/**
 * @file
 * Media and text: a 2fr panel of copy against a 1fr strip of media, each
 * bleeding off its own side of the viewport.
 *
 * Measured from tmp/costar-work.png, a 2x export of a 1920px frame. At 1x the
 * panel runs x 0-1268.5, the media x 1285-1920 and the gap between them is 16px
 * — which is what `2fr 1fr` with a 16px gap computes to within 1px, so the
 * split is expressed as fractions rather than percentages.
 *
 * Measured: the fill (#f4f4f3, over 2.1M pixels), the 32px radius (best fit at
 * 2.4px error; 40px was off by 21), the 16px gap, the 816px copy width, the
 * 48px/1.1 heading and the 18px/1.3 body. Adopted from the design system, not
 * measured: the block padding, the panel's inner end padding, the gaps between
 * heading, body, buttons and footnote, and every stacked value.
 *
 * One deliberate deviation. The mockup starts the copy at x 240, which is
 * (1920 - 1440) / 2 — the container's OUTER edge, ignoring the 15px gutter every
 * other block insets by. Followed literally, this section's heading would sit
 * 15px left of the heading in the section above it. The gutter is included
 * instead, so the inset is 255px at 1920. Drop the trailing
 * `+ var(--ln-container-gutter)` below to match the mockup exactly.
 */

.ln-media-text {
  /* Stops at its native width: past 1920 the section centres rather than
     stretching the media strip. Matches .ln-formula. */
  --ln-media-text-max-width: 1920px;

  --ln-media-text-gap: 32px;
  --ln-media-text-radius: 16px;
  --ln-media-text-box-shadow: 0px 8px 20px 0px rgba(99, 102, 106, 0.28);
  --ln-media-text-panel-bg: #f4f4f3;

  --ln-media-text-panel-padding-block-start: 80px;
  --ln-media-text-panel-padding-block-end: 32px;
  /* The panel's edge against the gap. The other edge is the copy inset. */
  --ln-media-text-panel-padding-gap: 64px;

  --ln-media-text-copy-width: 816px;

  /* Floor for the media box, so a short block of copy cannot squeeze the photo
     into a sliver. The mockup's panel measures 482px tall. */
  --ln-media-text-media-min: 480px;

  /* Same clamp as --ln-text-h2-size, so this heading matches a Text block's h2
     at every width. Keep the two in step. */
  --ln-media-text-heading-size: clamp(2rem, 3.5vw, 48px);
  --ln-media-text-body-size: 18px;
  --ln-media-text-footnote-size: 14px;
  /* Same muted grey as --ln-tabs-muted and --ln-comparison-muted. */
  --ln-media-text-footnote-link: #63666a;
  /* Heavier than the 300 around it, so weight also marks the link. */
  --ln-media-text-footnote-link-weight: 500;

  --ln-media-text-heading-gap: 24px;
  --ln-media-text-body-gap: 56px;
  --ln-media-text-footnote-gap: 72px;

  /**
   * Aligns the copy to the page container's edge, and is why this element is a
   * container: the inset is consumed on the PANEL, where a percentage would
   * resolve against the panel's grid area rather than the section. cqi always
   * means this box's own width, whichever descendant reads it — and unlike vw it
   * excludes the scrollbar and respects the 1920 cap above.
   *
   * Below 1440 + 2 gutters the first term wins and the copy sits at the gutter,
   * which is also what makes the stacked and no-media cases need no override.
   */
  --ln-media-text-copy-inset: max(
    var(--ln-container-gutter, 15px),
    calc(
      (100cqi - var(--ln-container-max, 1440px)) / 2 +
        var(--ln-container-gutter, 15px)
    )
  );

  container-type: inline-size;
  display: grid;
  /* minmax(0, Nfr) rather than Nfr: the default minimum is min-content, so a
     long unbreakable word in the copy could otherwise widen the panel track and
     throw the 2:1 ratio the inset arithmetic assumes. */
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--ln-media-text-gap);
  align-items: stretch;
  box-sizing: border-box;
  max-inline-size: var(--ln-media-text-max-width);
  margin-inline: auto;
  color: var(--ln-color-ink, #1c1c1c);
  font-family: var(--ln-font-sans, Outfit, sans-serif);
}

/* Without cqi the max() above is invalid at computed-value time, which would
   leave padding at 0 rather than falling back — hence a whole replacement. */
@supports not (width: 1cqi) {
  .ln-media-text {
    --ln-media-text-copy-inset: var(--ln-container-gutter, 15px);
  }
}

.ln-media-text *,
.ln-media-text *::before,
.ln-media-text *::after {
  box-sizing: inherit;
}

/* Nothing to round against on the bled edge, so only the corners facing the
   gap are rounded. */
.ln-media-text__panel {
  padding-block-start: var(--ln-media-text-panel-padding-block-start);
  padding-block-end: var(--ln-media-text-panel-padding-block-end);
  padding-inline-start: var(--ln-media-text-copy-inset);
  padding-inline-end: var(--ln-media-text-panel-padding-gap);
  border-start-end-radius: var(--ln-media-text-radius);
  border-end-end-radius: var(--ln-media-text-radius);
  background-color: var(--ln-media-text-panel-bg);
}

.ln-media-text__media {
  /* ln-responsive-media sets block-size: 100%, which against a stretched grid
     item is the row height; this only binds when the copy is the shorter side. */
  min-block-size: var(--ln-media-text-media-min);
  border-start-start-radius: var(--ln-media-text-radius);
  border-end-start-radius: var(--ln-media-text-radius);
  box-shadow: var(--ln-media-text-box-shadow);
  overflow: hidden;
}

.ln-media-text__copy {
  max-inline-size: var(--ln-media-text-copy-width);
}

/**
 * Media on the other side: the columns swap, and so does every edge.
 *
 * Explicit grid-column rather than `order`, so the panel stays first in the DOM
 * and the copy is still read before the decoration.
 */
.ln-media-text--media-left {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.ln-media-text--media-left .ln-media-text__panel {
  grid-column: 2;
  padding-inline-start: var(--ln-media-text-panel-padding-gap);
  padding-inline-end: var(--ln-media-text-copy-inset);
  border-radius: 0;
  border-start-start-radius: var(--ln-media-text-radius);
  border-end-start-radius: var(--ln-media-text-radius);
}

.ln-media-text--media-left .ln-media-text__media {
  grid-column: 1;
  grid-row: 1;
  border-radius: 0;
  border-start-end-radius: var(--ln-media-text-radius);
  border-end-end-radius: var(--ln-media-text-radius);
}

/* Pushed to the container edge, since that is the side the copy aligns to. */
.ln-media-text--media-left .ln-media-text__copy {
  margin-inline-start: auto;
}

/* A block saved with no media: the panel takes the whole row rather than
   leaving a third of it empty. The inset needs no adjustment — it is measured
   from the section, not from the panel. */
.ln-media-text--no-media {
  grid-template-columns: minmax(0, 1fr);
}

.ln-media-text__heading {
  margin: 0 0 var(--ln-media-text-heading-gap);
  /* Required: Cohesion styles bare h2, and an element rule beats an inherited
     value however specific the ancestor. */
  color: inherit;
  font-size: var(--ln-media-text-heading-size);
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
}

.ln-media-text__body {
  font-size: var(--ln-media-text-body-size);
  font-weight: 300;
  /* Measured: two body lines sit 23px apart at 18px in the mockup. */
  line-height: 1.3;
  text-wrap: pretty;
}

.ln-media-text__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-block-start: var(--ln-media-text-body-gap);
}

.ln-media-text__footnote {
  margin-block-start: var(--ln-media-text-footnote-gap);
  font-size: var(--ln-media-text-footnote-size);
  font-weight: 300;
  line-height: 1.4;
}

/**
 * All three declarations undo Cohesion's `Link` base style
 * (cohesion_base_styles.link), which targets a bare `a` and sets colour
 * #cf0000, text-decoration underline, font-weight normal, and font-size 1rem
 * rising to 1.125rem at its `sm` breakpoint. That last one is why an untouched
 * footnote link came out at 18px inside 14px copy — it is set, not inherited,
 * so nothing about the footnote's own size could reach it.
 *
 * Its selector is (0,0,1), so one class here is enough; the media query it
 * puts the size in does not affect specificity. The size inherits rather than
 * repeating the token, so it tracks the footnote if that ever changes; the
 * weight is deliberately its own value and does not.
 */
.ln-media-text__footnote a {
  color: var(--ln-media-text-footnote-link);
  font-size: inherit;
  font-weight: var(--ln-media-text-footnote-link-weight);
  text-decoration: none;
}

/**
 * The underline comes back on interaction. The grey alone would not carry the
 * link: against the footnote's own ink it is 2.95:1, under the 3:1 WCAG 1.4.1
 * asks of colour used as the sole cue. The 500 weight against the surrounding
 * 300 is the second resting cue, and this is the third. Against the panel the
 * grey itself is fine at 5.24:1.
 *
 * Cohesion's own a:focus outline is left alone deliberately: at (0,1,1) it
 * still applies, and it is the visible focus indicator.
 *
 * The colour is restated, not inherited from the rule above. Cohesion's
 * `a:hover` sets #961e00 at (0,1,1) — the same weight as this component's base
 * `a` rule — and its stylesheet is in the `theme` group, after component CSS,
 * so it wins that tie. (0,2,1) here is what settles it.
 */
.ln-media-text__footnote a:hover,
.ln-media-text__footnote a:focus-visible {
  color: var(--ln-media-text-footnote-link);
  text-decoration: underline;
}

/**
 * Stacked. 63.99rem matches .ln-formula rather than the 48rem page breakpoint:
 * a third of an 800px viewport is a 260px strip of photograph, already too
 * narrow to carry a subject.
 *
 * The rounding rotates rather than disappearing — the panel rounds the corners
 * facing the gap below it, the media the ones facing the gap above. Both still
 * bleed to both viewport edges.
 */
@media (max-width: 63.99rem) {
  .ln-media-text,
  .ln-media-text--media-left {
    --ln-media-text-panel-padding-block: 48px;
    --ln-media-text-panel-padding-gap: var(--ln-container-gutter, 15px);
    --ln-media-text-copy-width: none;

    grid-template-columns: minmax(0, 1fr);
  }

  .ln-media-text__panel,
  .ln-media-text--media-left .ln-media-text__panel {
    grid-column: 1;
    border-radius: 0;
    border-end-start-radius: var(--ln-media-text-radius);
    border-end-end-radius: var(--ln-media-text-radius);
  }

  .ln-media-text__media,
  .ln-media-text--media-left .ln-media-text__media {
    grid-column: 1;
    /* Row 2, not 1: stacked, the copy leads whichever side it was on. */
    grid-row: 2;
    /* A shape rather than a floor — full bleed at 480px tall is a letterbox on
       a phone — so the min-block-size is cleared and the ratio decides. */
    min-block-size: 0;
    aspect-ratio: 4 / 3;
    border-radius: 0;
    border-start-start-radius: var(--ln-media-text-radius);
    border-start-end-radius: var(--ln-media-text-radius);
  }

  .ln-media-text--media-left .ln-media-text__copy {
    margin-inline-start: 0;
  }
}