/*
 * Patient Learn About page. Loaded after components.css and patient-shell.css.
 *
 * The video player MECHANISM is not here — it lives in components.css, shared
 * with the HCP home page. Only this page's own rhythm and the desktop order
 * swap live below.
 */

.page {
  /*
   * Patient CTAs are navy, matching the sibling patient pages rather than
   * falling back to HCP's dark red. Its only consumers are `.button` and
   * `.button:hover` in components.css.
   */
  --color-cta: var(--color-isi-title-bar);

  /* Same pale blue wash as the home teasers — a literal with no token. */
  --patient-wash: #bbd3eb;
}

/*
 * Mobile gutter. This page's content sits at 32px against the shared 24px
 * default — the same override every sibling page carries.
 *
 * The header is NOT overridden here: this page draws the shared partial's own
 * 24/24/24 padding (159px), unlike the home page's 32/24/32 (175px), so the
 * partial is already correct and the home page's override is genuinely
 * home-only.
 */
@media (width < 48rem) {
  main {
    --container-margin: var(--space-xl); /* 32px */
  }
}

/* ===============================================================
 * Page hero
 * ============================================================= */

/* 56px either side on mobile; 104px / 56px on desktop. */
.learn-hero__inner {
  padding-block: 3.5rem;
}

.page-hero__lede {
  margin-block: var(--space-m) 0;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-body); /* 16px mobile */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body); /* 1.45 */
  letter-spacing: var(--tracking-isi-text);
}

/* The 80px accent rule sits 16px under the title at both widths. */
.learn-hero__inner .page-hero__rule {
  margin-block-start: var(--space-m);
}

/*
 * PER-BREAKPOINT PAIR — the shared `.page-hero__title` is 40px/1.1; this page
 * steps it to 28px/1.4 on mobile, the same step FAQ and Contact make.
 * Page-scoped by convention, because each page's own design is the authority.
 */
@media (width < 68rem) {
  .learn-hero .page-hero__title {
    font-size: var(--font-size-h3); /* 28px */
    line-height: var(--line-height-snug); /* 1.4 */
  }
}

@media (width >= 68rem) {
  .learn-hero__inner {
    padding-block: 6.5rem 3.5rem; /* 104px / 56px */
  }

  .page-hero__lede {
    max-inline-size: 40.125rem; /* 642px */
    font-size: var(--font-size-body-lg); /* 20px */
    letter-spacing: var(--tracking-body-lg);
  }
}

/* ===============================================================
 * What it is / How it Works / Fast Relief
 * ============================================================= */

/*
 * Mobile stacks the three cards 24px apart with no padding of its own — the
 * section runs flush from the hero to the divider. Desktop adds 104px below the
 * row and none above.
 */
.learn-cards-section {
  padding-block: 0;
}

.learn-cards {
  display: grid;
  gap: var(--space-l); /* 24px */
}

/*
 * Same card surface as the home teasers: #eef0f2 with the pale blue washing up
 * from the bottom to 56.6%. Identical on all six instances across the two
 * pages, but it stays page-scoped on both until a third consumer justifies
 * promoting it.
 *
 * `justify-content: flex-end` is the drawn arrangement: the copy sits at the
 * TOP and the image fills the remaining space below it, so the card's height is
 * fixed and the image takes the slack.
 */
.learn-card {
  display: flex;
  position: relative;
  flex-direction: column;
  gap: var(--space-m); /* 16px */
  padding: var(--space-xl) var(--space-l); /* 32px 24px, the mobile card */
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-card-surface);
  background-image: linear-gradient(
    to top,
    var(--patient-wash) 0%,
    /* The SAME token at alpha 0, derived rather than retyped: as a literal
       it is a silent twin, and repointing --patient-wash would leave the fade
       running to the old hue with nothing to catch it. */
    rgb(from var(--patient-wash) r g b / 0%) 56.601%
  );
}

/*
 * PER-BREAKPOINT PAIR — 24px at both widths, but the LEADING steps: 1.4 mobile
 * against 1.1 desktop.
 */
.learn-card__title {
  margin: 0;
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-h4); /* 24px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-snug); /* 1.4 */
  letter-spacing: var(--tracking-display);
}

/*
 * 18px/1.45 at both breakpoints — --font-size-lead, NOT the 16px the home
 * teasers use — and --color-text-body #3a3a3a where home's teaser copy is #000.
 * Two deliberate divergences between two structurally identical card
 * components; neither value should migrate to the other page.
 */
.learn-card__body {
  margin: 0;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-lead); /* 18px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body); /* 1.45 */
  letter-spacing: var(--tracking-body-lg);
}

/*
 * The reference marker links to the citation at the foot of the page rather
 * than being a bare superscript. The design draws it as plain text; making it a
 * link is an accessibility addition, not a design change — the marker is
 * meaningless unless a reader can reach what it refers to. It inherits the body
 * colour, so it is visually identical.
 */
.learn-card__ref {
  color: inherit;
  text-decoration: none;
}

.learn-card__ref:hover,
.learn-card__ref:focus-visible {
  text-decoration: underline;
}

/*
 * The photograph takes whatever height the fixed card leaves, and the card
 * clips it. All six instances overflow their frame on at least one edge, which
 * is why each gets its own inset below rather than a shared object-fit.
 */
.learn-card__media {
  position: relative;
  flex: 1 0 auto;
  min-block-size: 0;
}

.learn-card__media img {
  position: absolute;
  max-inline-size: none;
  block-size: auto;
}

@media (width < 68rem) {
  /*
   * The photograph is absolutely positioned, so it contributes NO height — the
   * card is only as tall as its copy unless a height is stated, and
   * `flex: 1 0 auto` on the media box has no free space to grow into. Desktop
   * states one 576px height for all three; mobile draws three different ones.
   */

  /*
   * CAPPED and centred. The row is three-up only at 68rem, so single-column a
   * card runs to 984px wide — a shape nothing is drawn at, and the same one the
   * home teasers were capped for. Every inset below is a percentage of the
   * card's own column, so an unbounded card is an unbounded photograph. 480px
   * matches the cap the home teasers use, so the two pages stack alike.
   */
  .learn-cards {
    max-inline-size: calc(30rem + var(--container-margin) * 2); /* 480px card */
  }

  /*
   * The drawn height becomes a FLOOR under a ratio, exactly as the home teasers
   * do it. The photograph is out of flow and contributes no height, so the
   * card's height has to be stated — but as a fixed px against a growing width
   * it changes the crop at every width. The ratios resolve to the drawn
   * 526/578/552 at a 366px card, and the floors keep a narrow viewport from
   * clipping the copy (`.learn-card` clips, and an aspect-ratio alone gives an
   * exact height).
   */

  /*
   * `inline-size: 100%` on all three is REQUIRED, not tidiness. Once the height
   * floor wins over the ratio at a narrow column, the card has a DEFINITE
   * height — and a box with a definite size in one axis plus an aspect-ratio
   * derives the OTHER axis from the ratio rather than stretching to its grid
   * area. The floor therefore re-derives the width, the card stops shrinking
   * below 366px, and the page scrolls sideways under 430. Stating the inline
   * size makes the width the definite axis, which is the direction the ratio is
   * meant to run. `min-inline-size: 0` does NOT fix it.
   */
  .learn-card--what {
    aspect-ratio: 366 / 526;
    inline-size: 100%;
    min-block-size: 32.875rem; /* 526px */
  }

  .learn-card--how {
    aspect-ratio: 366 / 578;
    inline-size: 100%;
    min-block-size: 36.125rem; /* 578px */
  }

  .learn-card--fast {
    aspect-ratio: 366 / 552;
    inline-size: 100%;
    min-block-size: 34.5rem; /* 552px */
  }

  /*
   * The video column, capped at the drawn 677px, centred. Its mechanism lives
   * in components.css and is SHARED with HCP home, so the cap is stated
   * here, page-scoped, which also keeps a patient-only fix off an HCP page.
   * `inline-size: 100%` alongside the auto margins for the flex-stretch reason
   * above.
   */
  .video__player {
    inline-size: 100%;
    max-inline-size: 42.3125rem; /* 677px */
    margin-inline: auto;
  }

  /*
   * Mobile insets, each measured from its own frame against the 318px content
   * column. Percentages resolve against the media box, which IS that column —
   * not the 430 viewport the design measures from.
   */

  /*
   * ...and hung from the media box's BOTTOM, not its top. Which edge stays put
   * decides what shrinkage costs: the image's height derives from its WIDTH,
   * while the card's is a ratio of the same width plus a copy block that wraps
   * less as the card grows. Anchored at the top, every pixel those two disagree
   * by opens as a GAP under the photograph. Anchored at the bottom the
   * photograph stays welded to the card's foot and the slack moves above it,
   * where the card's own wash already is.
   *
   * Cards 1 and 2 are FLUSH with the card's bottom edge, the card's own
   * 32px bottom padding expressed as a negative inset: the photograph meets the
   * edge deliberately rather than carrying the half-pixel of card the design
   * leaves under it. Card 3 keeps its drawn 120.6px, which bleeds past the edge
   * and is clipped — already flush to the eye.
   */

  /*
   * Card 1 is anchored from the RIGHT, unlike its two siblings. Its bleed past
   * the card's trailing edge is the thinnest of the three, and a bleed as
   * a PERCENTAGE loses to the card's FIXED 24px padding as the card shrinks,
   * opening a gap at the right edge on narrow phones. -1.5rem is that padding,
   * so the right edge is welded to the card's at every width. Cards 2 and 3
   * bleed by 28-84px here and stay left-anchored.
   */
  .learn-card--what .learn-card__media img {
    inline-size: 125.472%; /* 399 / 318 */
    inset-inline: auto -1.5rem; /* -24px, the card's own inline padding */
    inset-block-end: -2rem; /* -32px, the card's own bottom padding */
  }

  .learn-card--how .learn-card__media img {
    inline-size: 150.314%; /* 478 / 318 */
    inset-inline-start: -25.157%; /* -80 / 318 */
    inset-block-end: -2rem; /* -32px, the card's own bottom padding */
  }

  .learn-card--fast .learn-card__media img {
    inline-size: 165.723%; /* 527 / 318 */
    inset-inline-start: -33.019%; /* -105 / 318 */
    inset-block-end: -7.5375rem; /* -120.6px */
  }
}

@media (width >= 68rem) {
  .learn-cards-section {
    padding-block: 0 6.5rem; /* 104px below the row */
  }

  /*
   * 26px, not the 24px spacing token — the drawn gap between the three cards.
   * Built at 26 rather than rounded to the token, exactly as the Affordability
   * benefit cards are.
   */
  .learn-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.625rem; /* 26px */
  }

  .learn-card {
    min-block-size: 36rem; /* 576px */
    padding: 2.5rem var(--space-l); /* 40px 24px */
  }

  .learn-card__title {
    line-height: var(--line-height-tight); /* 1.1 */
  }

  /*
   * The design gives two of the three cards a text box NARROWER than their own
   * column — 350.667 and 342.667 against the 383 the middle card uses. These
   * are authored measures, not glyph metrics: at the full column width card 1
   * wraps to three lines where four are drawn. Built as drawn.
   */
  .learn-card--what .learn-card__body {
    max-inline-size: 91.558%; /* 350.667 / 383 */
  }

  .learn-card--fast .learn-card__body {
    max-inline-size: 89.703%; /* 342.667 / 382 */
  }

  /*
   * Desktop insets, from each card's own frame against the 383px column — and
   * hung from the media box's BOTTOM, for the reason written out on the mobile
   * pair above. The card's height is a flat 576 while the image's follows the
   * column, so across this range the two drift apart and the whole difference
   * falls out as a gap under the photograph.
   *
   * Cards 1 and 2 are FLUSH with the card's bottom edge — the card's own 40px
   * bottom padding as a negative inset — so the photograph meets the edge at
   * every width rather than carrying the drawn sliver of card. Card 3 keeps its
   * drawn 73px, which bleeds past the edge and is clipped.
   */

  /*
   * Card 1 anchored from the RIGHT here too, and for the same reason: its
   * trailing bleed is the thinnest of the three and a percentage competing
   * with a fixed 24px padding, so it drifts off the card's edge across the
   * range. The drawn left inset rides on the other end instead, where the
   * photograph's background already meets the card's wash.
   */
  .learn-card--what .learn-card__media img {
    inline-size: 109.889%; /* 420.876 / 383 */
    inset-inline: auto -1.5rem; /* -24px, the card's own inline padding */
    inset-block-end: -2.5rem; /* -40px, the card's own bottom padding */
  }

  .learn-card--how .learn-card__media img {
    inline-size: 136.815%; /* 524 / 383 */
    inset-inline-start: -22.193%; /* -85 / 383 */
    inset-block-end: -2.5rem; /* -40px, the card's own bottom padding */
  }

  .learn-card--fast .learn-card__media img {
    inline-size: 137.958%; /* 527 / 382 */
    inset-inline-start: -19.11%; /* -73 / 382 */
    inset-block-end: -4.5625rem; /* -73px */
  }
}

/* ===============================================================
 * Divider
 * ============================================================= */

/*
 * Its own section at both widths, exactly as on the home page: 56px either side
 * and full-bleed on mobile, 20px either side on the content column on desktop.
 */
.patient-divider {
  margin-block: 3.5rem; /* 56px */
}

@media (width < 68rem) {
  .patient-divider {
    inline-size: 100%;
    max-inline-size: none;
  }
}

@media (width >= 68rem) {
  .patient-divider {
    margin-block: 1.25rem; /* 20px */
  }
}

/* ===============================================================
 * Video assistance
 *
 * The player mechanism lives in components.css. What follows is this page's
 * own rhythm plus the ORDER SWAP, which is the part that differs from the HCP
 * home page's arrangement of the same component.
 * ============================================================= */

/* No top padding and 40px below on mobile; 104px / 160px on desktop. */
.video {
  padding-block: 0 2.5rem;
}

.video__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-l); /* 24px */
}

.video__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m); /* 16px */
}

/*
 * 16px line box at 13px, not the 1.45 default — the same correction the HCP
 * home page makes for its hero eyebrow.
 */
.video__body .eyebrow {
  margin-block-end: 0;
  line-height: 1.25;
}

/*
 * The design nests eyebrow + title in their own frame whose gap differs by
 * breakpoint: 8px on mobile against 16px on desktop. The outer 16px gap is
 * right for every other pair, so mobile pulls this one pair back by 8 rather
 * than restructuring the markup around a single value.
 */
@media (width < 68rem) {
  .video__body .eyebrow {
    margin-block-end: calc(var(--space-s) - var(--space-m)); /* -8px */
  }
}

.video__rule {
  inline-size: 5rem; /* 80px */
  margin: 0;
  border: 0;
  border-block-start: var(--border-width) solid var(--color-rule);
}

.video__lede {
  margin: 0;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-body); /* 16px mobile */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body); /* 1.45 */
  letter-spacing: var(--tracking-isi-text);
}

/*
 * PER-BREAKPOINT PAIR on the shared `.section__title`: 28px/1.4 mobile against
 * the shared 40px/1.1 desktop. A per-page mobile opt-in, since the shared class
 * draws a different pair on each page that uses it.
 */
@media (width < 68rem) {
  #video-title {
    font-size: var(--font-size-h3); /* 28px */
    line-height: var(--line-height-snug); /* 1.4 */
  }
}

@media (width >= 68rem) {
  .video {
    padding-block: 6.5rem 10rem; /* 104px / 160px */
  }

  /*
   * Desktop draws the video to the LEFT of the copy; mobile stacks the copy
   * first with the video below it. DOM order follows MOBILE and `order`
   * re-places the player on desktop — never a DOM swap, since the two
   * breakpoints genuinely disagree.
   *
   * The video column is a fixed 677px; the copy takes the slack.
   */
  .video__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-l);
  }

  .video__player {
    order: -1;
    flex: 0 0 42.3125rem; /* 677px */
  }

  .video__body {
    flex: 1 0 0;
    gap: var(--space-m);
    padding: 2.5rem; /* 40px, the drawn inner frame */
  }

  .video__lede {
    font-size: var(--font-size-body-lg); /* 20px */
    letter-spacing: var(--tracking-body-lg);
  }

  /*
   * The play glyph steps up on desktop. components.css carries the 49.84px
   * mobile size; the desktop step is per-page. Without it the page renders the
   * mobile glyph at desktop width, which nothing but looking at it catches — a
   * too-small button still fits and still clicks.
   */
  html.js .video__play {
    inline-size: 5.7617rem; /* 92.187px */
  }
}

/* ===============================================================
 * References
 *
 * A page-level block, NOT part of the shared patient ISI partial: this page's
 * ISI ends with REFERENCES where the home page's ends at the FDA paragraph.
 * Putting it in the partial would ship a References list on a page that draws
 * none.
 *
 * It has to read as a CONTINUATION of the ISI panel rather than a box below
 * it, which is exactly what the ISI's own desktop rules already allow for:
 * `.isi` sets `border-block-end: 0` and rounds only its top corners, so it is
 * an open-bottomed panel by design. This supplies the matching open-topped
 * half — same surface, same width, same side borders, no top border, no
 * radius. On mobile `.isi` is a full-width white block with an upward shadow,
 * so the continuation is just the same white with no shadow of its own.
 * ============================================================= */

.isi-refs {
  position: relative;

  /* Above the peek, like `.isi` itself — otherwise the sticky tray paints over
     the citation as it slides past. */
  z-index: 21;
  background-color: var(--color-surface);
}

/*
 * `.isi__body` ends with 24px of its own padding and the References heading
 * sits on the ISI's standard 16px section rhythm, so the continuation starts
 * 8px above where it otherwise would.
 */
.isi-refs__inner {
  padding-block: 0 var(--space-l);
  margin-block-start: calc(var(--space-s) * -1); /* -8px */
}

.isi-refs .isi__heading {
  margin-block-end: var(--space-xs);
}

@media (width >= 68rem) {
  .isi-refs {
    max-inline-size: calc(
      var(--container-max) - var(--isi-container-margin) * 2
    );
    margin-inline: auto;
    border: var(--border-width) solid var(--color-isi-border);
    border-block-start: 0;
    background-color: var(--color-isi-surface);
  }
}