/**
 * @file
 * Comparison table styles.
 *
 * Sticky tier headers, category rows with a title and description, zebra-striped
 * feature rows, and red or grey tick marks.
 *
 * Colours and geometry were sampled from a 2x PNG export of Figma node 372:5426
 * and are exact: table width, row height, cell inset, column positions, tick
 * diameter and every hex value. Font sizes are derived from measured glyph
 * heights, so those are within a couple of pixels rather than exact — worth a
 * check against the design if type looks off.
 */

.ln-comparison {
  /**
   * 0, deliberately. This block has no box of its own, so the whitespace around
   * it in the design *is* the gap between sections — which css/layout.css now
   * supplies. An 80px padding here was measured from the standalone component
   * frame, where the surrounding page whitespace looked like part of the
   * component; on a real page it double-counted, and the gap came out at almost
   * twice what the full-page design shows.
   *
   * Kept as a token rather than deleted so a one-off placement can still carry
   * its own padding. Blocks that *do* have a box — the carousel's grey band,
   * the accordion card, the tabs panel, the form's rounded card — keep theirs,
   * because the designer draws 80-95px inside those.
   */
  --ln-comparison-padding-block: 0;
  --ln-comparison-padding-inline: clamp(1.25rem, 12.5vw, 240px);
  /* The comp centres a 1090px table in a 1920 frame — narrower than the hero
     and accordion, which run to 1440. */
  --ln-comparison-max-width: 1090px;

  /* Palette sampled from the 2x export, except where noted. */
  --ln-comparison-fg: #1c1c1c;
  /* Section heading, kept in step with .ln-accordion__heading and the Text
     block's h2. Not the navy below — that one was measured, this one was not. */
  --ln-comparison-heading-fg: #1c1c1c;
  /* Category titles: #051b2c sampled from the 2x export. Deliberately distinct
     from the near-black used elsewhere in the palette. */
  --ln-comparison-group-fg: #051b2c;
  --ln-comparison-tier-fg: #1c1c1c;
  --ln-comparison-muted: #63666a;
  --ln-comparison-stripe: #f4f4f3;
  --ln-comparison-bg: #ffffff;

  /* The sticky tier row is translucent so rows read as passing beneath it.
     Set as its own property rather than reusing --ln-comparison-bg, since the
     section itself must stay opaque. The blur keeps the tier labels legible
     against whatever text is passing behind them. */
  --ln-comparison-head-bg: rgb(255 255 255 / 80%);
  --ln-comparison-head-backdrop: blur(8px);

  --ln-comparison-mark: #cf0000;
  --ln-comparison-mark-excluded: #c6c6c6;

  --ln-comparison-font: Outfit, sans-serif;

  /* Tokens rather than literals because the expand caret's height is derived
     from them — it is sized to one title line so it centres on the heading. */
  --ln-comparison-group-title-size: 24px;
  --ln-comparison-group-title-leading: 1.3;

  /**
   * 1, so the subhead sits tight under the title as the mockup shows.
   *
   * Deliberately not a comfortable reading value, because this is a single line
   * of supporting copy rather than a paragraph. With the 16px flex gap above it,
   * the result measures about 26px from the title's baseline to the subhead's cap
   * top, against 25.5 and 29 at the two boundaries in the export.
   *
   * The one thing to watch: at 1 there is no leading at all, so if a translated
   * description ever wraps to two lines they will sit flush. 1.2 would be the
   * insurance value, at a cost of about 1.6px to the gap.
   */
  --ln-comparison-group-description-leading: 1;

  /* 500 per the design. Restated on the paragraph as well as the container — see
     .ln-comparison__group-description p. */
  --ln-comparison-group-description-weight: 500;

  /* Caret to title. Measured 13px in the export; 12 is within a pixel. */
  --ln-comparison-toggle-gap: 12px;
  --ln-comparison-caret-size: 14px;

  /**
   * Indent for the first column, so feature labels line up with the group titles
   * rather than with the carets.
   *
   * Derived rather than typed: it is exactly what the caret occupies inside the
   * toggle, so changing the caret size or its gap moves the column with it. A
   * literal 40px here would silently fall out of alignment the first time either
   * of those changed.
   */
  --ln-comparison-feature-indent: calc(
    var(--ln-comparison-cell-padding-inline) +
    var(--ln-comparison-caret-size) +
    var(--ln-comparison-toggle-gap)
  );

  --ln-comparison-feature-width: 40.7%;
  /* Rows measure 52px: 24px of text at 16/1.5 plus 14px above and below. */
  --ln-comparison-cell-padding-block: 14px;
  --ln-comparison-cell-padding-inline: 14px;

  /**
   * Offset for the sticky tier row, so it pins below the sticky site header
   * rather than underneath it. The site header is 60px tall.
   *
   * Written to read a global --ln-site-header-height first. Nothing defines that
   * yet — there are no CSS custom properties anywhere in the site's stylesheets
   * today — but declaring it on :root in a base stylesheet would let this and
   * every future sticky component follow the header automatically, instead of
   * each one carrying its own copy of the number.
   */
  --ln-comparison-sticky-top: var(--ln-site-header-height, 60px);

  /* Sits above table content but must stay below the site header. Lower this if
     the tier row ever paints over the header. */
  --ln-comparison-head-z: 2;

  box-sizing: border-box;
  padding-block: var(--ln-comparison-padding-block);
  padding-inline: var(--ln-comparison-padding-inline);
  background-color: var(--ln-comparison-bg);
  color: var(--ln-comparison-fg);
  font-family: var(--ln-comparison-font);
}

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

.ln-comparison__inner {
  max-width: var(--ln-comparison-max-width);
  margin-inline: auto;
}

/* Centred to match the accordion section heading. Category headings inside the
   table stay left-aligned, per the comp. */
.ln-comparison__heading {
  margin: 0 0 2rem;
  font-size: clamp(2rem, 3.5vw, 48px);
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  color: var(--ln-comparison-heading-fg);
}

/**
 * .ln-comparison__scroll is now a plain wrapper — no overflow, no focus ring.
 *
 * It was a horizontal scroll container below 64rem, paired with a 40rem minimum
 * width on the table. Both are gone: the table reads fine at any width the
 * section gives it, so it simply fits instead.
 *
 * Two things worth keeping from that arrangement, because they will come up again
 * if anyone reinstates it:
 *
 * - overflow-x: auto makes an element a scroll container on *both* axes — per
 *   spec, `visible` on one axis computes to `auto` when the other is not visible.
 *   So a scroll wrapper pins the sticky tier row to a box as tall as the table,
 *   which looks exactly like sticky not working. Sticky and horizontal scroll
 *   cannot coexist here; it is one or the other.
 * - A scroll container's *min*-content contribution is zero, but its
 *   *max*-content contribution is the full width of its content. Ancestors that
 *   size to their content read the second number.
 *
 * The class stays as a structural hook and a place to put scrolling back.
 */
.ln-comparison__table {
  /* No min-width. 40rem was a legibility floor for four columns, but with no
     scroll container it could only overflow: at 768px the section's 12.5vw
     padding leaves 576px, and the floor wanted 640px. */
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

/**
 * The sticky tier row, at every width.
 *
 * Set on the cells rather than thead or tr — those are not reliable sticky
 * containers across browsers.
 *
 * It was static below 64rem for one reason, worth keeping because it returns the
 * moment anyone reinstates horizontal scrolling: sticky and horizontal scroll
 * cannot coexist. overflow-x: auto makes an element a scroll container on *both*
 * axes, per spec, so sticky resolves against a box as tall as the table and
 * appears not to work at all. While .ln-comparison__scroll scrolled, one of the
 * two had to go. It no longer does, so nothing stands in the way.
 *
 * The translucent fill and the blur are deliberate rather than decorative: they
 * are what makes rows read as passing *beneath* the row rather than colliding
 * with it. prefers-reduced-transparency turns both off, which is the one case
 * where legibility beats the effect.
 *
 * Two ways this fails quietly:
 *
 * - `top` reads --ln-site-header-height with a 60px fallback, which is only
 *   right if the site header is itself sticky. Nothing in the Site Studio config
 *   declares it so — no custom style sets position: sticky or fixed, and there is
 *   no theme JS for it — so if the header scrolls away at some width, this row
 *   pins 60px down with page content visible above it. The accordion's split
 *   heading and the anchor scroll-margin in css/layout.css read the same token,
 *   so the real fix is to define --ln-site-header-height per breakpoint in
 *   css/tokens.css rather than to patch one component.
 * - Any ancestor with overflow other than visible breaks sticky silently. None of
 *   this module's CSS sets one, but a Cohesion wrapper could.
 *
 * One piece of history, because the symptom was misleading: this rule used to be
 * overridden by a `position: static` inside a media query placed *above* it in
 * the file. A media query adds no specificity, so at equal specificity the later
 * rule won and the row stayed sticky at every width — reported as "the headers
 * are covering the top row". Overrides belong after what they override.
 */
.ln-comparison__head th {
  position: sticky;
  top: var(--ln-comparison-sticky-top);
  z-index: var(--ln-comparison-head-z);
  /* Symmetric. This was `0.75rem <inline> 1.5rem` — 12px above and 24px below,
     which came off the desktop export where the tier row sits well clear of the
     first category heading. Pinned and translucent it reads as a lopsided band
     instead, so both sides are 12px. */
  padding: 0.75rem var(--ln-comparison-cell-padding-inline);
  background-color: var(--ln-comparison-head-bg);

  /* -webkit- prefix for Safari before 18, which shipped this prefixed only.
     Unsupported browsers fall back to the translucent background alone. */
  -webkit-backdrop-filter: var(--ln-comparison-head-backdrop);
  backdrop-filter: var(--ln-comparison-head-backdrop);
  font-size: 24px;
  font-weight: 600;
  color: var(--ln-comparison-tier-fg);
}

/**
 * Honour an OS-level "reduce transparency" setting: make the tier row solid and
 * drop the blur. Users who enable that setting generally do so because layered
 * translucency is hard to read.
 */
@media (prefers-reduced-transparency: reduce) {
  .ln-comparison {
    --ln-comparison-head-bg: #ffffff;
    --ln-comparison-head-backdrop: none;
  }
}

.ln-comparison__corner {
  width: var(--ln-comparison-feature-width);
}

.ln-comparison__tier {
  text-align: center;
}

/* Category header row. */
.ln-comparison__group-cell {
  padding: 2.5rem 0 0.5rem;
  font-weight: 400;
}

/**
 * Caret first, then the title and description as one column.
 *
 * flex-start on both axes: the caret leads the row, and the text follows
 * immediately rather than being pushed to the far edge. It was space-between
 * while the caret sat on the right.
 *
 * Measured at 13px between the caret and the title in the export; 12px here,
 * which is within a pixel and lands on the spacing the rest of the component
 * uses.
 */
.ln-comparison__toggle {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--ln-comparison-toggle-gap);
  width: 100%;
  padding: 0 var(--ln-comparison-cell-padding-inline) 1rem;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/**
 * Site Studio styles buttons globally, including a brand-red hover fill. This is
 * a plain disclosure control, not a call to action, so every interactive state is
 * reset back to the resting appearance. The chevron rotation and aria-expanded
 * communicate the state; a colour change would read as a CTA.
 *
 * The selector repeats the class to outrank the global button rules without
 * resorting to !important.
 */
.ln-comparison__toggle.ln-comparison__toggle:hover,
.ln-comparison__toggle.ln-comparison__toggle:focus,
.ln-comparison__toggle.ln-comparison__toggle:active {
  border: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  text-decoration: none;
}

.ln-comparison__toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/**
 * Title and description stacked, as one flex item beside the caret.
 *
 * Being a single item is what indents both of them past the caret — the design
 * has the description starting level with the title, not with the caret.
 *
 * It takes the remaining width so a long description wraps against the table
 * edge. min-inline-size: 0 because a flex item will not shrink below its
 * content's intrinsic width without it, and a long unbroken string would
 * otherwise push the row wider than the table.
 *
 * 16px is the design's gap between the two text layers, which maps directly onto
 * a flex gap because both carry an explicit line-height — Figma measures between
 * layer bounds, and a text layer's bounds are its line box.
 *
 * The line heights then add their own half-leading on top: 3.6px below the title
 * at 24/1.3 and 4px above the subhead at 16/1.5. That is inherent to the type,
 * not something to remove — taking it out would mean shrinking a line-height and
 * changing how the text itself sets. With 16px here the measured result is about
 * 30px from the title's baseline to the subhead's cap top, which is what the
 * export shows.
 */
.ln-comparison__group-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-inline-size: 0;
}

.ln-comparison__group-title {
  font-size: var(--ln-comparison-group-title-size);
  font-weight: 600;
  line-height: var(--ln-comparison-group-title-leading);
  color: var(--ln-comparison-group-fg);
}

/**
 * 500 per the design, set here rather than left to <strong> tags in the content.
 *
 * Weight is a design decision, and this field is authored once per paragraph per
 * language — around thirty locale-specific translations. Relying on markup would
 * mean every translator remembering to wrap the sentence, forever, and one miss
 * renders a section at 300 next to neighbours at 500. It is also the wrong
 * semantics: <strong> means strong importance, and wrapping a whole supporting
 * sentence in it tells assistive technology the subhead matters more than the
 * title above it.
 */
.ln-comparison__group-description {
  font-size: 16px;
  font-weight: var(--ln-comparison-group-description-weight);
  line-height: var(--ln-comparison-group-description-leading);
  color: var(--ln-comparison-muted);
}

/**
 * The line-height has to be restated on the paragraph, not just inherited.
 *
 * Site Studio sets line-height on p globally, and a rule on the element beats an
 * inherited value from an ancestor however specific that ancestor's selector is —
 * inheritance only applies where nothing else matches. So the value on
 * .ln-comparison__group-description above was never reaching the paragraph, and
 * the subhead rendered at Cohesion's 1.8 rather than this component's.
 *
 * A single class is enough to outrank a type selector. Same fix as
 * .ln-tabs__copy p, for the same reason.
 */
.ln-comparison__group-description p {
  font-weight: var(--ln-comparison-group-description-weight);
  line-height: var(--ln-comparison-group-description-leading);
}

/**
 * Descendant selectors, not child ones, and that is the whole fix.
 *
 * field_description renders as
 *   <span class="…__group-description"><div><p>…</p></div></span>
 * because there is no field template stripping the wrapper for this field. So
 * `> :first-child` matched the div, which never had a margin, while the <p>
 * inside kept its own — roughly a full em of unasked-for space above the
 * subhead. Dropping the `>` reaches the paragraph too.
 *
 * Two paragraphs still space correctly: the first loses only its top margin and
 * the last only its bottom, so the margins between them survive.
 */
.ln-comparison__group-description :first-child {
  margin-top: 0;
}

.ln-comparison__group-description :last-child {
  margin-bottom: 0;
}

/**
 * The caret sits on the group title's line, not at the top of the button.
 *
 * The button aligns its children to flex-start so the title stays put whatever
 * length the description runs to. Left alone, that put the 12px glyph at the top
 * of a 31px title line — about 10px above the title's optical centre, which read
 * as the caret floating above the heading rather than belonging to it.
 *
 * Giving the wrapper the height of exactly one title line and centring the glyph
 * inside it puts the caret on the heading's midline. It holds when the title
 * wraps (the wrapper still matches the first line) and when there is no
 * description at all, which align-items: center on the button would not: that
 * would centre against the title and description together, dropping the caret
 * towards the boundary between them.
 */
.ln-comparison__toggle-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  block-size: calc(
    var(--ln-comparison-group-title-size) *
    var(--ln-comparison-group-title-leading)
  );
  color: var(--ln-comparison-mark);
  transition: transform 0.15s ease-in-out;
}

.ln-comparison__toggle-icon svg {
  display: block;
  width: var(--ln-comparison-caret-size);
  height: auto;
}

.ln-comparison__toggle[aria-expanded='true'] .ln-comparison__toggle-icon {
  transform: rotate(180deg);
}

/**
 * Feature rows.
 *
 * vertical-align is set explicitly on both cells. Table cells inherit middle
 * alignment from tbody in the browser default, but Site Studio's global table
 * styles override that to top, which left labels and ticks sitting high in rows
 * whose text wraps to two lines.
 */
.ln-comparison__feature,
.ln-comparison__cell {
  padding: var(--ln-comparison-cell-padding-block) var(--ln-comparison-cell-padding-inline);
  vertical-align: middle;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}

/**
 * Feature labels are the muted grey, not the body near-black, and are indented to
 * sit under the group titles. Only the first column moves — the tier columns stay
 * centred on their own axes.
 */
.ln-comparison__feature {
  padding-inline-start: var(--ln-comparison-feature-indent);
  font-weight: 400;
  color: var(--ln-comparison-muted);
}

.ln-comparison__cell {
  text-align: center;
  white-space: nowrap;
}

.ln-comparison__value {
  font-weight: 600;
  color: var(--ln-comparison-fg);
}

/* Zebra striping runs within each category, matching the comp. */
.ln-comparison__group-rows .ln-comparison__row:nth-child(even) > * {
  background-color: var(--ln-comparison-stripe);
}

.ln-comparison__mark {
  display: inline-flex;
  color: var(--ln-comparison-mark);
}

.ln-comparison__mark--excluded {
  color: var(--ln-comparison-mark-excluded);
}

.ln-comparison__mark svg {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .ln-comparison__toggle-icon {
    transition: none;
  }
}

@media (max-width: 48rem) {
  .ln-comparison {
    --ln-comparison-padding-block: 0;

    /* The token, not the property on .ln-comparison__group-title, so the caret's
       height tracks the smaller title rather than staying sized to the desktop
       one. */
    --ln-comparison-group-title-size: 20px;

    /**
     * 16px, the page gutter, in place of a clamp that resolves to 12.5vw here —
     * 50px at 401px.
     *
     * This one costs more than it does elsewhere. Every other component just
     * looks over-indented at 50px; here it is 100px off the width the table has
     * to fit four columns into.
     */
    --ln-comparison-padding-inline: 16px;

    /**
     * 34%, down from 40.7%.
     *
     * Fixed layout below reads this off .ln-comparison__corner in the header row
     * and splits the rest equally between the three tier columns. At a 358px
     * container that is 122px for the feature names and 79px per tier, leaving
     * 67px of tier content once padding is off — enough for "Platinum" at 14px,
     * which is the widest label and the thing that sets the floor.
     *
     * Giving the feature column *less* is counter-intuitive but correct: it can
     * wrap over as many lines as it likes, and a one-word tier header cannot.
     */
    --ln-comparison-feature-width: 34%;

    /* 6px, from 14px. Four columns of it is 112px of a 358px table, and it is the
       cheapest place to find room. Narrows the caret indent too, which is derived
       from it. */
    --ln-comparison-cell-padding-inline: 6px;
  }

  /**
   * table-layout: fixed, so width: 100% actually means 100%.
   *
   * Under auto layout — the default — a table is never narrower than its
   * min-content width, and `width` is a suggestion it may exceed. That
   * min-content width is the sum of each column's longest unbreakable word plus
   * its padding, which came to about 415px against a 358px container: three tier
   * headers at 18px with 14px of padding a side, plus a feature column whose 40px
   * caret indent counts as well. Hence a table wider than its own wrapper.
   *
   * Fixed layout takes column widths from the first row and stops caring what the
   * cells contain, so the table is exactly as wide as it is told to be. Without a
   * scroll container that is the only way to guarantee no overflow.
   *
   * The trade is that content can no longer widen a column, so the values above
   * have to leave room for it and long words must be allowed to break.
   */
  .ln-comparison__table {
    table-layout: fixed;
  }

  .ln-comparison__head th {
    font-size: 14px;
  }

  .ln-comparison__feature,
  .ln-comparison__cell {
    font-size: 14px;
  }

  /**
   * Safety valves, needed because a fixed column cannot grow to fit.
   *
   * break-word so a long feature name — or a German translation of one — wraps
   * inside its column rather than spilling across the tier columns. nowrap comes
   * off the value cells for the same reason: harmless for a tick or "3rd", but
   * under fixed layout anything longer would overflow instead of wrapping.
   */
  .ln-comparison__feature {
    overflow-wrap: break-word;
  }

  .ln-comparison__cell {
    white-space: normal;
  }
}