/*
 * Home page sections. Loaded after components.css.
 *
 * Mobile-first: the single column is the base and the desktop arrangement is
 * added at 68rem, matching the breakpoint the shell already uses.
 */

/*
 * Mobile gutter. This page's content sits at 32px against the shared 24px
 * default. Scoped to `main` so the shared header/nav partial keeps 24px.
 *
 * `.hero` needs its own copy: unlike every other section on this page it
 * sits in `.hero-band` alongside the header, not inside `<main>`, so the
 * `main` scope above never reaches it.
 */
@media (width < 48rem) {
  main {
    --container-margin: var(--space-xl); /* 32px */
  }

  .hero {
    --container-margin: var(--space-xl); /* 32px */
  }
}

/* ---------------------------------------------------------------
 * Button
 * ------------------------------------------------------------- */

/* ===============================================================
 * Hero
 * ============================================================= */

/*
 * The header and hero share one photographic band so the navy texture runs
 * unbroken behind both; the header is transparent over it.
 *
 * The navy is painted by a pseudo-element rather than by the band itself so
 * that where it STOPS is independent of how tall the band's content is —
 * on mobile the inhaler and the promo sit partly on the white section below.
 */
.hero-band {
  position: relative;
}

.hero-band::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 100%;
  background-color: var(--color-nav-surface);
  background-image: url("../img/hero-background.webp");
  background-position: center top;
  background-size: cover;
}

.hero {
  position: relative;
  color: var(--color-white);
}

.hero__inner {
  display: grid;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}

.hero__eyebrow {
  margin-block-end: 0;
  color: var(--color-brand-tertiary);
}

.hero__rule {
  inline-size: 100%;
  margin-block: var(--space-l);
  border: 0;
  border-block-start: var(--border-width) solid currentcolor;
  opacity: 0.5;
}

.hero__title {
  margin-block-end: var(--space-l);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: var(--font-size-display-3);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-display);
}

/*
 * Mobile hero. With the aside in flow the navy band grows to contain it and
 * the whole hero renders navy, so block contribution is cancelled rather
 * than the aside being positioned — the single column keeps its natural
 * order and nothing overlaps.
 */
@media (width < 68rem) {
  /* No hero CTA on mobile; the button belongs to the desktop layout alone. */
  .hero__cta {
    display: none;
  }

  /* Same as .hero__cta above: the efficacy CTA is desktop only. */
  .efficacy__cta {
    display: none;
  }

  /*
   * Home's header is taller than every other page's — 32/24/32 padding
   * against the shared partial's 24/24/24. Page scope, not the shared
   * class: the other pages are correct as built.
   */
  .hero-band .site-header__inner {
    padding-block: var(--space-xl);
  }

  /*
   * Title-bottom to inhaler-top is 35.25px, carried entirely by the grid
   * row-gap (the title's own margin drops to 0 below).
   */
  .hero__inner {
    padding-block: var(--space-xl) 0;
    row-gap: 2.2031rem; /* 35.25px */
  }

  /* Tighter than the 1.45 body default. */
  .hero__eyebrow {
    line-height: 1.25;
  }

  .hero__rule {
    margin-block: var(--space-m);
  }

  /* The whole copy block centers on mobile; the inhaler is already centered
     unconditionally via .hero__figure. */
  .hero__copy {
    text-align: center;
  }

  /*
   * Constrain the measure: unconstrained the title wraps against the full
   * 382px content column and sets one line short of the design.
   */
  .hero__title {
    max-inline-size: 22.125rem; /* 354px */
    margin-block-end: 0; /* the grid row-gap above is the whole gap */
    margin-inline: auto;
  }

  /*
   * Everything stays in normal flow — the inhaler and promo occupy real
   * space, so nothing slides underneath them. Only the navy stops early:
   * 31px above the inhaler's bottom, plus the gap and the promo.
   */
  .hero-band::before {
    block-size: calc(
      100% - (1.9375rem + var(--space-xl) + var(--savings-promo-height))
    );
  }
}

.hero__figure {
  display: flex;
  justify-content: center;
}

/*
 * Interpolates between 304px tall on a narrow phone and 560px on a wide
 * desktop.
 */
.hero__inhaler {
  inline-size: auto;

  /* Required alongside the inline constraints: the height attribute is only
     a presentational hint, so without this the image keeps its 560px cap and
     `max-inline-size: 100%` squeezes the width alone whenever the grid track
     runs narrower than the image. */
  block-size: auto;
  max-block-size: clamp(19rem, 12.19rem + 25.35vw, 35rem);
}

/* ---------------------------------------------------------------
 * Savings-card call-out that overlaps the hero edge
 * ------------------------------------------------------------- */

.savings-promo {
  display: flex;
  position: relative;
  align-items: center;

  /*
   * A margin, not a flex `gap` on .hero__aside: as a flex item the promo's
   * `margin-inline: auto` would suppress stretch and collapse it to its
   * content width.
   */
  margin-block-start: var(--space-xl);
  min-block-size: var(--savings-promo-height);
  padding: var(--space-m);
  border-radius: var(--radius-sm);
  background-color: var(--color-accent);
}

/*
 * The card is clipped by this 193x144 frame, not by the box: the frame sits
 * flush with the box's right and bottom edges but starts 27px ABOVE it, so
 * the card's top corner pops out over the box while the hand is cut at the
 * box's own edge and radius.
 */
.savings-promo__clip {
  position: absolute;
  inset-block-start: -1.6875rem; /* -27px */
  inset-inline-end: 0;
  inline-size: 12.0625rem; /* 193px */
  block-size: 9rem; /* 144px */
  overflow: hidden;
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/*
 * Raster placement inside the clip frame: a 201.3px-wide image rotated
 * 23.27deg, offset so its centre lands where the design puts it. One rule
 * serves both breakpoints.
 */
.savings-promo__card {
  position: absolute;
  inset-block-start: -1.3375rem; /* -21.4px */
  inset-inline-start: 3.0688rem; /* 49.1px */
  inline-size: 12.5813rem; /* 201.3px */

  /* The raster is wider than the 193px frame that clips it; base.css's
     `img { max-inline-size: 100% }` would otherwise shrink it to the frame. */
  max-inline-size: none;

  /* Required: the height attribute is a presentational hint, so constraining
     inline-size alone leaves the intrinsic height in force. */
  block-size: auto;
  rotate: 23.27deg;
}

/* ===============================================================
 * Product summary — "Xopenex:" plus bullets
 * ============================================================= */

.summary__title {
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-display);
}

/* Keep the superscript from gluing to the word before it, which overflows
   the column at large text-zoom settings. */
.summary__title sup {
  white-space: normal;
}

.summary__list {
  padding-inline-start: 1.875rem; /* 30px */
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: var(--font-size-body-lg);
  line-height: var(--line-height-loose);
  letter-spacing: var(--tracking-body-lg);
  list-style: disc;
}

/* ===============================================================
 * Clinical Efficacy — the two-sentence lede
 * ============================================================= */

/*
 * The Clinical Efficacy lede is two paragraphs with a 12px gap at both
 * breakpoints, so this is unscoped from any media query.
 * `.affordability__lede` has its own `p + p` rule at a different value.
 */
.section-intro .prose p + p {
  margin-block-start: 0.75rem; /* 12px */
}

/* ===============================================================
 * Access & Affordability — footnote
 * ============================================================= */

/*
 * This instance runs smaller than `.footnote`'s sitewide 10.32px default, at
 * both breakpoints. Scoped to `.affordability` so the default is untouched
 * everywhere else it is used.
 */
.affordability .footnote {
  font-size: 0.4838rem; /* 7.74px */
  line-height: 1;
}

/*
 * Mobile type for the summary heading and list. `--tracking-body-lg` is an
 * em value (0.015em), so it resolves correctly at 16px without a separate
 * token.
 */
@media (width < 68rem) {
  .summary__title {
    font-size: var(--font-size-h3); /* 28px */
    line-height: var(--line-height-snug); /* 1.4 */
  }

  .summary__list {
    font-size: var(--font-size-body); /* 16px */
  }

  /*
   * Same divider split as the desktop rule further down, mobile's own
   * numbers: 50px either side of the divider, minus the hr's own 8px UA
   * margin on each side, is 42px of section padding.
   */
  .section:has(.summary) {
    padding-block-end: 2.625rem; /* 42px */
  }

  /*
   * The mobile divider strips between major sections are 112px tall with the
   * line centered — 56px either side — and the sections themselves
   * contribute nothing, so the shared `<hr>` carries the whole gap. Ordered
   * before `#efficacy-title` below (stylelint no-descending-specificity: a
   * class `:has()` argument is less specific than an id one).
   */
  .section:has(.affordability) {
    padding-block: 0;
  }

  .section:has(#efficacy-title) {
    padding-block: 2.625rem 0; /* 42px / 0 */
  }

  .section:has(#video-title) {
    padding-block-start: 0;
  }

  section:has(#efficacy-title) + hr.section__rule,
  section:has(#affordability-title) + hr.section__rule {
    margin-block: 3.5rem; /* 56px */
  }

  /*
   * 24px from the footnote to the savings-card photo below it. Mobile only:
   * desktop's equivalent gap is 12px.
   *
   * DO NOT give this image a fixed height. A fixed height against a fluid
   * width makes `object-fit: cover` absorb the disagreement by cropping the
   * ARTWORK, and the wider the column the more of the photograph is thrown
   * away. It scales to the column at its own ratio, whole.
   */
  .affordability__media {
    margin-block-start: 1.5rem; /* 24px */
  }

  /*
   * Three mobile gaps the shared classes do not carry: "Xopenex:" to its
   * bullet list, "Clinical Efficacy" to its lede, and the lede to the
   * stat-card grid below it — 24px, 24px and 34px. Scoped to home's own ids
   * rather than the shared class, since Efficacy reuses `.section-intro` at
   * different values.
   */
  #summary-title {
    margin-block-end: 1.5rem; /* 24px */
  }

  .section-intro .section__title {
    margin-block-end: 1.5rem; /* 24px */
  }

  .section-intro {
    margin-block-end: 2.125rem; /* 34px */
  }

  /*
   * `.prose` carries a shared 20px default with no mobile override. All
   * three of this page's uses — the Clinical Efficacy lede,
   * `.affordability__lede` and `.video__lede` — want 16px on mobile, so one
   * unscoped rule covers them.
   */
  .prose {
    font-size: var(--font-size-body); /* 16px */
  }
}

/*
 * `.section__title` (components.css) carries a shared 40px/1.2 default with
 * no general mobile override — each consuming page opts in per instance
 * (affordability.css's `.offer .section__title` is the same pattern). All
 * three of this page's instances step down to 28px/1.4 on mobile.
 * `#affordability-title` is shared markup with Efficacy/FAQ, but that is not
 * a collision risk: home.css only ever loads on this page.
 */
@media (width < 68rem) {
  #efficacy-title,
  #affordability-title,
  #video-title {
    font-size: var(--font-size-h3); /* 28px */
    line-height: var(--line-height-snug); /* 1.4 */
  }
}

/*
 * Both bands center their text column on mobile — they are card/callout
 * treatments, not body copy. `text-align` cascades to the eyebrow, heading,
 * lede and footnote and centers the inline `.button` within its line box, so
 * no separate button rule is needed.
 */
@media (width < 68rem) {
  .affordability__body,
  .video__body {
    text-align: center;
  }
}

/* ===============================================================
 * Video assistance
 * ============================================================= */

.video__body {
  padding: var(--space-l);
}

.video__lede {
  margin-block: var(--space-l);
}

.video__link {
  color: var(--color-link);
  font-weight: var(--font-weight-semibold);
}

/* ===============================================================
 * Footer
 * ============================================================= */

/* ===============================================================
 * Desktop
 * ============================================================= */

@media (width >= 68rem) {
  /*
   * The navy band is bounded to the COPY and the aside hangs past it, ~59px
   * of the inhaler sitting on the white section below. With the aside in
   * flow the band grows to contain the inhaler and the whole hero renders
   * navy, so the aside is taken out of flow and the band height stays
   * nav + 60 + copy + 140.
   */
  .hero__inner {
    display: grid;

    /* The promo track is fixed at its design width and the inhaler column
       absorbs the slack. The inhaler track's floor is the inhaler's own fluid
       width (its height clamp below, times the raster's 700:1456 ratio), so
       the track can never be narrower than the image and the copy column is
       what yields as the viewport narrows. */
    grid-template-columns:
      auto minmax(clamp(9.14rem, 5.86rem + 12.19vw, 16.8125rem), 1fr)
      20.8125rem;
    align-items: end;
    padding-block: 3.75rem 8.75rem; /* 60 / 140 */
  }

  .hero__copy {
    max-inline-size: 41.6875rem; /* 667px */
  }

  /* Copy, inhaler and promo are one row, so the aside stops being a box and
     its two children become grid items directly. */
  .hero__aside {
    display: contents;
  }

  /*
   * Negative block margins are what keep the band bounded. The 560px inhaler
   * against a ~329px copy column would otherwise drive the row height and
   * turn the whole hero navy; cancelling 45px above and 199px below makes it
   * contribute only the copy's height while it hangs 59px onto the white
   * section.
   */
  .hero__figure {
    justify-content: end;
    margin-block: -2.8125rem -12.4375rem; /* -45 / -199 */
  }

  /*
   * The promo card sits at the hero's lower-right, overhanging the content
   * column rather than sitting flush with it. Giving back the container's own
   * gutter is the full overhang this layout can express, since
   * --container-max caps narrower than the design's page width.
   */
  .savings-promo {
    max-inline-size: 20.8125rem; /* 333px */

    /* Bottom edge 24px above the band bottom; -116px offsets the hero's own
       140px bottom padding. */
    margin-block: 0 -7.25rem;
    margin-inline: 0 calc(var(--container-margin) * -1);
  }

  /* The headline-left/lede-right intro lives in components.css as
     .section-intro — Efficacy uses it too. .summary is home-only. */
  .summary {
    display: grid;
    gap: var(--gutter);
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  /*
   * This section needs more clearance from the hero than the shared
   * `.section` rhythm gives it — 117px against the site-wide 72px. Scoped to
   * `.summary`'s own section via `:has()` so no other page's `.section`
   * spacing moves.
   *
   * The bottom side pairs with `.section__rule`'s own 8px UA margin (never
   * reset — see base.css) and `#efficacy-title`'s matching top override
   * below.
   */
  .section:has(.summary) {
    padding-block: 7.3125rem 4.125rem; /* 117px / 66px */
  }

  /*
   * `.affordability` and `#affordability-title` are markup this band SHARES
   * with the Efficacy and FAQ pages, but that is not a collision risk here:
   * home.css is never loaded on those pages (each links its own page
   * stylesheet), so this rule can only ever match on the home page.
   *
   * 72px is set deliberately tighter than the design's own spacing for this
   * band, matching Efficacy and FAQ. Ordered before the
   * `#efficacy-title`/`#video-title` rules below (stylelint
   * no-descending-specificity: a class `:has()` argument is less specific
   * than an id one).
   */
  .section:has(.affordability) {
    padding-block: 4.5rem; /* 72px */
  }

  /*
   * Clinical Efficacy's own clearance from the dividers above and below it —
   * see the `.section:has(.summary)` comment for how each side splits.
   * `#efficacy-title` does not collide with the Efficacy page (that page's
   * heading id is `clinical-efficacy-title`), so this is safely home-only.
   */
  .section:has(#efficacy-title) {
    padding-block: 3.5rem 7.25rem; /* 56px / 116px */
  }

  /*
   * Video's own top clearance from the Affordability→Video divider, matching
   * the 72px that band carries. DESKTOP ONLY; mobile is 0 here, because
   * there the divider strip supplies the whole gap.
   *
   * Bottom is deliberately left at the shared value: it borders the sticky
   * ISI handover, and that boundary is not touched here.
   */
  .section:has(#video-title) {
    padding-block-start: 4.5rem; /* 72px */
  }

  /*
   * On desktop the photo sits on the LEFT, bleeding the left edge, same as
   * every other page. The DOM order is body-then-media because mobile wants
   * text above image, and desktop's `.affordability` grid would place the
   * first DOM child in the left column — so `order` re-places media first
   * visually without moving it in the DOM, leaving mobile's reading order
   * untouched.
   */
  .affordability__media {
    order: -1;
  }

  /* .stat-grid's column count and .affordability's two-column split are
     shared components and live in components.css. .video is home-only. */
  .video {
    display: grid;
    gap: var(--gutter);
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .video__body {
    padding: 2.5rem;
  }

  html.js .video__play {
    inline-size: 5.76rem; /* 92.19px */
  }
}

/*
 * Laptop range. The copy hugs its four-line headline and the inhaler sits
 * beside it, so the row's slack lands next to the promo instead of between
 * headline and image. 1440 and up is the drawn layout and is untouched.
 */
@media (68rem <= width < 90rem) {
  /* The row keeps its drawn height, so the wrapped headline flows down into
     the bottom padding instead of pushing the band, the inhaler and the
     call-out down with it. */
  .hero__inner {
    block-size: 32.5625rem; /* 521px */
    grid-template-rows: minmax(0, 1fr);
  }

  .hero__copy {
    align-self: start;
    max-inline-size: calc(var(--font-size-display-3) * 9);
  }

  .hero__figure {
    align-self: center;
    justify-content: start;
  }

  /* Scaled from its bottom-right corner so it keeps its place in the band. */
  .savings-promo {
    transform: scale(0.85);
    transform-origin: 100% 100%;
  }
}