/*
 * Annual-giving banner from the Giving Tuesday Figma desktop/mobile frames.
 * Opt-in: only pages with body.has-campaign-banner display the component.
 * The 82px/167px reference heights include the thin gray bottom divider.
 * Keep these rules separate from the existing .banner hero-page layouts.
 */
body.has-campaign-banner {
  --campaign-reference-height: 82px;
  --campaign-nav-top: var(--campaign-reference-height);
  --campaign-anchor-offset: 64px;
}

.campaign-banner {
  position: relative;
  width: 100%;
  margin: 0;
  background: #000;
  color: #fff;
  border-bottom: 3px solid #d9d9d9;
  box-sizing: border-box;
  /* Figma specifies LT Std. Use the matching installed face where available;
     no third-party font files are bundled or assumed to be web licensed. */
  font-family: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal;
  letter-spacing: 0;
}

/* Desktop: the three source-frame columns are centered as a single group. */
.campaign-banner__inner {
  display: grid;
  grid-template-columns: 212px minmax(0, 643px) 160px;
  justify-content: center;
  align-items: center;
  min-height: calc(var(--campaign-reference-height) - 3px);
  padding: 3.5px 8px;
  box-sizing: border-box;
}

.campaign-banner__dates,
.campaign-banner__message {
  margin: 0;
  padding: 0;
  color: inherit;
  text-align: center;
  letter-spacing: 0;
}

.campaign-banner__dates {
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  text-transform: uppercase;
}

.campaign-banner__message {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

.campaign-banner__message span {
  white-space: nowrap;
}

/* Preserve the Figma button's visible 160 × 28px footprint. Its invisible
   hit area extends vertically to 44px for touch, without changing the art. */
.campaign-banner__link,
.campaign-banner__link:visited {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 160px;
  height: 28px;
  padding: 0 8px;
  box-sizing: border-box;
  border: 0;
  border-radius: 3.2px;
  background: #ec008c;
  color: #fff;
  font: 500 14px/21px "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.48px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.campaign-banner__link::before {
  position: absolute;
  inset: -8px 0;
  content: "";
}

.campaign-banner__link:hover {
  background: #c90077;
  color: #fff;
  text-decoration: none;
}

.campaign-banner__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  color: #fff;
  text-decoration: none;
}

/* Keep the existing fixed breadcrumb strip directly below the visible part
   of the banner. The small controller lets it reach top: 0 after scrolling. */
body.has-campaign-banner .page-breadcrumbs {
  top: var(--campaign-nav-top);
}

/* Contain the existing absolute hero copy within its image section. Without
   this, viewport-relative headings can overlap the stacked campaign banner. */
body.has-campaign-banner .campaign-hero {
  position: relative;
}

/* Preserve the feature pages' original viewport placement where there is
   room, and move their copy down only far enough to clear the fixed nav. */
body.has-campaign-banner .campaign-hero > .banner {
  top: max(var(--campaign-anchor-offset), calc(25vh - var(--campaign-reference-height)));
}

/* Anchor destinations clear the existing breadcrumb strip after the banner
   scrolls away. These offsets do not affect pages without the campaign. */
body.has-campaign-banner [id] {
  scroll-margin-top: var(--campaign-anchor-offset);
}

/* Between desktop and phone widths, the center column can wrap between its
   two phrases while the date and button retain their reference dimensions.
   Stack below tablet width. At the 390px reference, the source text bounds
   are centered around natural line boxes; visible text is never clipped. */
@media (max-width: 767px) {
  body.has-campaign-banner {
    --campaign-reference-height: 167px;
  }

  .campaign-banner__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 20px 33px 28px;
    align-content: center;
    justify-items: center;
    gap: 20px;
  }

  .campaign-banner__dates {
    width: 198px;
    max-width: 100%;
  }

  .campaign-banner__message {
    width: 298px;
    max-width: 100%;
  }

  .campaign-banner__message span {
    display: block;
  }
}

/* Very narrow or zoomed views may grow rather than clipping text or causing
   sideways page scrolling. The 390px Figma reference remains unchanged. */
@media (max-width: 359px) {
  .campaign-banner__inner {
    grid-template-rows: auto auto auto;
    gap: 14px;
    padding: 18px 8px;
  }

  .campaign-banner__message span {
    white-space: normal;
  }
}

/* The shared inquiry form stylesheet expands offset columns at <=768px.
   Clear the hero's Bootstrap offset when that column becomes full width. */
@media (max-width: 768px) {
  body.has-campaign-banner .campaign-hero--training > .banner > .offset-md-2 {
    margin-left: 0;
  }
}

/* Keep the long word "Transformational" inside the narrowest phone view. */
@media (max-width: 359px) {
  body.has-campaign-banner .campaign-hero--training h1 {
    font-size: clamp(28px, 10vw, 36px);
    line-height: 1.1;
  }
}