/**
 * Content templates A, B and C.
 *
 * A — standard page: statement, alternating rows, "on this page", photo CTA.
 * B — sub-nav page: sticky rail, long-form article, facts, quote, gallery.
 * C — life page: two-column intro, photo cards, day schedule, photo CTA.
 */

/* ---------------------------------------------------------------
 * Statement band (A and C)
 * ------------------------------------------------------------- */
.sbs-statement-band .sbs-eyebrow {
  margin-bottom: 40px;
}

/* ---------------------------------------------------------------
 * Alternating rows — the content variant is taller than the home one
 * ------------------------------------------------------------- */
.sbs-rows--content .sbs-rows__row,
.sbs-rows--content .sbs-rows__media {
  min-height: var(--sbs-row-min-h-lg);
}

.sbs-rows__text p + p {
  margin-top: 1.1em;
}

/* ---------------------------------------------------------------
 * "On this page" link grid (A)
 * ------------------------------------------------------------- */
.sbs-link-grid .sbs-eyebrow {
  margin-bottom: 32px;
}

.sbs-link-grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--sbs-gap-card);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbs-link-grid__item {
  border-top: 1px solid var(--sbs-grey-200);
}

.sbs-link-grid__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0;
  font-family: var(--sbs-font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: var(--sbs-w-regular);
  line-height: 1.2;
}

.sbs-link-grid__arrow {
  color: var(--sbs-gold);
  font-size: 18px;
  transition: transform var(--sbs-dur-fast) var(--sbs-ease);
}

.sbs-link-grid__item a:hover .sbs-link-grid__arrow {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------
 * Closing band
 * ------------------------------------------------------------- */
.sbs-cta-band--photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 560px;
  overflow: hidden;
}

.sbs-cta-band--photo .sbs-cta-band__media {
  position: absolute;
  inset: 0;
  opacity: 0.7;
}

.sbs-cta-band--photo .sbs-cta-band__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sbs-cta-band--photo .sbs-cta-band__heading {
  color: var(--sbs-white);
}

.sbs-cta-band--photo .sbs-cta-band__text {
  color: rgba(255, 255, 255, 0.82);
}

.sbs-cta-band__heading {
  max-width: 22ch;
  font-size: var(--sbs-h2-sm);
  font-weight: var(--sbs-w-medium);
  line-height: var(--sbs-lh-tight);
}

.sbs-cta-band__body .sbs-eyebrow {
  margin-bottom: 24px;
}

.sbs-cta-band__text {
  max-width: 54ch;
  margin: 24px 0 0;
}

.sbs-cta-band__actions {
  margin-top: 40px;
}

/* The plain variant is a row: heading left, buttons right. */
.sbs-cta-band:not(.sbs-cta-band--photo) .sbs-cta-band__body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.sbs-cta-band:not(.sbs-cta-band--photo) .sbs-cta-band__actions {
  margin-top: 0;
}

/* ---------------------------------------------------------------
 * Sub-nav page (B)
 * ------------------------------------------------------------- */
.sbs-subnav__grid {
  display: grid;
  grid-template-columns: var(--sbs-subnav-w) 1fr;
  gap: 80px;
  /* Deliberately NOT `align-items: start`. A sticky element can only travel
   * inside its containing block, so the rail column has to be as tall as the
   * row — which is what the default `stretch` gives it. Shrinking the column
   * to its content leaves the sticky child nowhere to go, and it scrolls away
   * with the page as if the rule were not there. */
}

/* The rail follows the reader down a long article, and while it does,
 * contents.js marks the section being read. */
.sbs-subnav__sticky {
  position: sticky;
  top: 120px;
}

.sbs-section-nav__label {
  margin-bottom: 24px;
}

.sbs-section-nav ul {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

/* The rule carrying the reader's position sits on the link, not the item,
 * because contents.js sets the active state on whichever link matches the
 * heading being read — the same class it sets on the news entry's list. */
.sbs-section-nav a {
  display: block;
  padding: 10px 0 10px 20px;
  border-left: 2px solid var(--sbs-grey-200);
  font-size: var(--sbs-body);
  line-height: 1.5;
  color: var(--sbs-grey-600);
  transition: color var(--sbs-dur-fast) var(--sbs-ease),
    border-color var(--sbs-dur-fast) var(--sbs-ease);
}

.sbs-section-nav a.is-active {
  border-left-color: var(--sbs-gold);
  color: var(--sbs-ink);
}

.sbs-section-nav a:hover {
  color: var(--sbs-gold);
}

.sbs-ask {
  padding: 32px 28px;
  background: var(--sbs-off-white);
}

.sbs-ask .sbs-eyebrow {
  margin-bottom: 18px;
}

.sbs-ask__line {
  margin: 0 0 6px;
  font-size: var(--sbs-body-sm);
  color: var(--sbs-grey-600);
}

/* As on the news entry: the column stops growing at its design width. */
.sbs-subnav__body {
  max-width: 912px;
}

.sbs-subnav__lead {
  margin-bottom: 48px;
}

.sbs-subnav__figure {
  height: 520px;
  margin-bottom: 56px;
}

.sbs-subnav__body > .sbs-content {
  margin-bottom: 56px;
}

/* ---------------------------------------------------------------
 * Fact grid (B)
 * ------------------------------------------------------------- */
.sbs-fact-grid {
  margin-bottom: 56px;
}

.sbs-fact-grid__cell {
  padding: 28px 26px;
}

.sbs-fact-grid__title {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: var(--sbs-w-regular);
}

.sbs-fact-grid__text {
  margin: 0;
  font-size: var(--sbs-body-xs);
  line-height: 1.6;
}

/* ---------------------------------------------------------------
 * Gallery (B)
 * ------------------------------------------------------------- */
.sbs-gallery {
  margin-top: 56px;
}

.sbs-gallery__heading {
  margin-bottom: 28px;
  font-size: var(--sbs-h3);
  font-weight: var(--sbs-w-medium);
}

.sbs-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sbs-gap-gallery);
}

.sbs-gallery__item {
  height: 260px;
}

/* ---------------------------------------------------------------
 * Life page (C)
 * ------------------------------------------------------------- */
.sbs-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.sbs-intro__statement {
  margin: 0;
}

.sbs-intro__body p {
  margin-bottom: 40px;
}

.sbs-card-grid {
  display: grid;
  gap: var(--sbs-gap-card);
}

.sbs-card-grid__card {
  height: 420px;
}

.sbs-card-grid__media {
  position: absolute;
  inset: 0;
}

.sbs-card-grid__title {
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: var(--sbs-w-medium);
}

/* ---------------------------------------------------------------
 * Day schedule (C)
 * ------------------------------------------------------------- */
.sbs-schedule__heading {
  margin-bottom: 48px;
  font-size: var(--sbs-h2-sm);
  font-weight: var(--sbs-w-medium);
  color: var(--sbs-white);
}

.sbs-schedule__list {
  margin: 0;
}

.sbs-schedule__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: baseline;
  padding: 30px 0;
  border-top: 1px solid var(--sbs-ink-line);
}

.sbs-schedule__row:last-child {
  border-bottom: 1px solid var(--sbs-ink-line);
}

.sbs-schedule__label {
  font-family: var(--sbs-font-mono);
  font-size: var(--sbs-eyebrow);
  letter-spacing: var(--sbs-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sbs-gold);
}

.sbs-schedule__text {
  margin: 0;
  font-family: var(--sbs-font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: var(--sbs-w-regular);
  line-height: 1.3;
  color: var(--sbs-white);
}

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .sbs-subnav__grid,
  .sbs-intro__grid {
    gap: 48px;
  }

  .sbs-link-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .sbs-subnav__grid,
  .sbs-intro__grid {
    grid-template-columns: 1fr;
  }

  /* Sticky would pin the rail over the article it is meant to sit beside. */
  .sbs-subnav__sticky {
    position: static;
  }

  .sbs-link-grid__list,
  .sbs-gallery__grid {
    grid-template-columns: 1fr;
  }

  .sbs-card-grid {
    grid-template-columns: 1fr !important;
  }

  .sbs-rows--content .sbs-rows__row,
  .sbs-rows--content .sbs-rows__media {
    min-height: 0;
  }

  .sbs-cta-band--photo {
    height: auto;
    padding: var(--sbs-section-y-sm) 0;
  }

  .sbs-subnav__figure {
    height: 320px;
  }

  .sbs-schedule__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}