/**
 * @file
 * Tabbed content styles.
 *
 * Colours sampled from a 2x export of the mockup, except the panel surface, which
 * comes from --ln-color-surface-gray in css/tokens.css. Two values depart from
 * the rest of the library and are intentional, not oversights:
 * - the panel grey is its own value, where every other block uses a flat #f4f4f3;
 * - body copy is pure #000000, where the rest of the library uses #1c1c1c.
 *
 * The panel was a gradient until the tab videos made it untenable — see the note
 * on --ln-color-surface-gray. Flattening it also flattened the active tab, which
 * is painted as part of the same surface.
 *
 * Geometry: an 808px white strip centred above the panel, 69px tall, holding
 * three 61px tabs with 8px of padding and gap. The active tab is painted as part
 * of the panel surface so the two read as joined. Tab metrics come from the
 * designer's Figma spec; type sizes are derived from measured glyph heights, so
 * those are within a couple of pixels rather than exact.
 */

.ln-tabs {
  /**
   * 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.
   *
   * This is the padding outside the strip and panel. --ln-tabs-panel-padding is
   * the padding inside the panel and is untouched — the design puts nothing above
   * the tab strip, but 80px inside the panel.
   *
   * Kept as a token rather than deleted so a one-off placement can still carry
   * its own padding.
   */
  --ln-tabs-padding-block: 0;
  --ln-tabs-padding-inline: clamp(1.25rem, 12.5vw, 240px);
  --ln-tabs-max-width: 1440px;

  --ln-tabs-fg: #000000;
  --ln-tabs-muted: #63666a;
  --ln-tabs-accent: #cf0000;
  --ln-tabs-accent-hover: #961f00;
  --ln-tabs-strip-bg: #ffffff;

  /**
   * The tab and the panel are one surface, so both read this.
   *
   * When both were gradients this was the colour where they met — the tab's ended
   * on it and the panel's began on it, and holding it in one place is what made
   * the join seamless. Now that both are flat it is simply the surface colour,
   * and the join is seamless because there is only one value in play.
   */
  --ln-tabs-surface: var(--ln-color-surface-gray, #ededed);
  /* Measured 24px on all four corners. An earlier reading of 12px came from
     testing alpha, which caught the export's drop shadow rather than the fill. */
  --ln-tabs-panel-radius: 24px;

  /**
   * Tab geometry, from the designer's Figma spec:
   *   width 258.667, height 61, padding 14px 10px, radius 16px top corners.
   * The spec's 4px border-bottom is intentionally omitted — see .ln-tabs__tab.
   *
   * The 258.667 width is not set directly — it falls out of the arithmetic:
   *   8 + 258.667 + 8 + 258.667 + 8 + 258.667 + 8 = 808
   * that is, 8px of strip padding, three flexed tabs and an 8px gap between them.
   * Both the 8px insets were measured in the export. Leaving the tabs on flex: 1
   * means the width stays correct if a fourth tier is ever added.
   */
  --ln-tabs-tab-radius: 16px;
  --ln-tabs-strip-width: 808px;
  --ln-tabs-strip-pad: 8px;
  --ln-tabs-tab-gap: 8px;
  --ln-tabs-tab-height: 61px;
  --ln-tabs-tab-pad-block: 14px;
  --ln-tabs-tab-pad-inline: 10px;
  --ln-tabs-panel-padding: 80px;
  --ln-tabs-column-gap: 64px;

  /* The delivered panel animations. Now 1216 x 762 after the re-export, down
     from 1800 x 1128 — the same ratio to five decimal places, so this value did
     not move. See .ln-video--tabs. */
  --ln-tabs-video-ratio: 1216 / 762;

  /**
   * Pills on this surface are white, per the design. The pill's own default is
   * #ececec, which against this background sits within a level or two of
   * invisible.
   */
  --ln-pill-bg: #ffffff;

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

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

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

.ln-tabs__inner {
  max-width: var(--ln-tabs-max-width);
  margin-inline: auto;
}

/* Tab strip: a white bar the width of the tabs, centred, sitting on the panel. */
.ln-tabs__strip {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* No bottom padding: the tabs sit flush on the panel, which is what joins them. */
.ln-tabs__list {
  display: flex;
  gap: var(--ln-tabs-tab-gap);
  width: 100%;
  max-width: var(--ln-tabs-strip-width);
  margin: 0;
  padding: var(--ln-tabs-strip-pad) var(--ln-tabs-strip-pad) 0;
  background-color: var(--ln-tabs-strip-bg);
  list-style: none;
}

/**
 * The margin and padding resets are load-bearing. Site Studio styles li globally,
 * and its bottom spacing opened a gap between the tab strip and the panel. The
 * list-style reset on the ul does not cover the item's own box.
 */
.ln-tabs__item {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/**
 * min-height rather than height, so a long or translated label grows the tab
 * instead of overflowing it. With the three tier names it resolves to exactly 61px.
 *
 * The spec lists a 4px border-bottom, but it is not reproduced: it draws nothing in
 * the mockup, and reserving it as a transparent border produced a visible grey
 * band. That was a gradient-era problem — background-origin defaults to padding-box
 * while background-clip defaults to border-box, so the fill was sized to the
 * padding box and tiled out over the border area, showing its light top edge again
 * rather than continuing its foot. A flat colour would tile harmlessly, but the
 * border still draws nothing in the mockup, so it stays out.
 */
.ln-tabs__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--ln-tabs-tab-height);
  padding: var(--ln-tabs-tab-pad-block) var(--ln-tabs-tab-pad-inline);
  border-radius: var(--ln-tabs-tab-radius) var(--ln-tabs-tab-radius) 0 0;
  color: var(--ln-tabs-muted);
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

/**
 * The active tab reads as part of the panel surface, which is how the mockup joins
 * them. The strip itself stays square — measured as square at its outer corners —
 * so only the tab is rounded.
 *
 * Figma originally exported this fill as:
 *   linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(180deg, #ECECEC, #DFDEDA)
 * Two notes kept because they will come up again with any Figma fill: the first
 * layer is Figma's way of noting an opaque white base, and pasted verbatim it would
 * paint white over everything, because CSS draws the first background layer on top.
 * Moot here now — the surface is flat, so the tab takes the one colour.
 *
 * .is-active is set by tabs.js. Before the script runs no tab is marked active,
 * which is correct: every panel is visible at that point, so highlighting one tab
 * would imply a selection that is not being made.
 */
.ln-tabs__tab.is-active {
  background-color: var(--ln-tabs-surface);
  color: var(--ln-tabs-accent);
  font-weight: 700;
}

.ln-tabs__tab:hover,
.ln-tabs__tab:focus {
  color: var(--ln-tabs-accent);
  text-decoration: none;
}

.ln-tabs__tab:focus-visible {
  outline: 2px solid var(--ln-tabs-accent);
  outline-offset: -4px;
}

/**
 * Panel surface. Shared stops from css/tokens.css, vertical axis.
 *
 * The stop positions are the designer's for this component. The axis is not: it
 * is 180deg where the export says 161.07deg, and that is the one deliberate
 * departure.
 *
 * At 161deg the colour along the panel's top edge shifts #dfdeda to #ebebeb
 * across the width of the tab strip — 12 levels, against roughly 3 where a hard
 * edge becomes visible — and a tab with a flat-coloured foot can only match that
 * at one horizontal position. The middle tab looked joined while the outer two
 * showed a seam. That was reported and fixed once already, and the design has
 * arrived on a diagonal again since.
 *
 * The carousel keeps its own diagonal, because nothing meets its edges.
 *
 * Vertically the top edge is one colour all the way across, and the first stop
 * sits at 17.59% so the top sixth is flat — the join has real tolerance rather
 * than depending on a single pixel row matching.
 */
.ln-tabs__panels {
  border-radius: var(--ln-tabs-panel-radius);
  background-color: var(--ln-tabs-surface);
}

/**
 * Scroll offset for a deep link to a tab.
 *
 * The id is on the panel, and the strip sits above it — so landing a panel at
 * the top of the viewport pushes the tabs out of sight entirely, which is what
 * "the tab is cut off" looks like. The offset has to clear the sticky site
 * header *and* the strip.
 *
 * Derived rather than typed, because both parts change: --ln-tabs-tab-height
 * drops from 61px to 52px at 60rem, and the site header height is a shared
 * token. A literal here would be right at one breakpoint and wrong at the other.
 *
 * The strip's height is exactly tab-height + strip-pad — .ln-tabs__list pads its
 * top only, since the tabs sit flush on the panel, which is what joins them. So
 * that sum is the distance from the panel's top edge to the strip's.
 *
 * 24px of breathing room, matching the general anchor offset in css/layout.css.
 *
 * Specificity is the point of the [id]. css/layout.css sets a 60px + 24px offset
 * on `.layout__region [id]` at (0,2,0), which already covers the header but knows
 * nothing about the strip. Two classes here would only tie with it and leave the
 * outcome to which stylesheet the browser parsed first; the attribute selector
 * takes this to (0,3,0) and settles it. It also reads honestly — this rule is
 * about elements that are link targets.
 */
.ln-tabs__panels .ln-tabs__panel[id] {
  scroll-margin-top: calc(
    var(--ln-site-header-height, 60px) +
    var(--ln-tabs-tab-height) +
    var(--ln-tabs-strip-pad) +
    24px
  );
}

.ln-tabs__panel {
  padding: var(--ln-tabs-panel-padding);
}

/* Before the script runs, every panel is visible and separated by a rule, so the
   block reads as a sequence rather than as overlapping content. */
.ln-tabs:not(.ln-tabs--enhanced) .ln-tabs__panel + .ln-tabs__panel {
  border-top: 1px solid rgb(0 0 0 / 10%);
}

.ln-tabs__panel:focus-visible {
  outline: 2px solid var(--ln-tabs-accent);
  outline-offset: -4px;
}

/* Panel head. */
.ln-tabs__heading {
  margin: 0;
  color: var(--ln-tabs-accent);
  font-size: clamp(2rem, 3.5vw, 48px);
  font-weight: 700;
  line-height: 1.1;
}

/**
 * A div, not a p. The subheading field renders its own <p> via the text format,
 * and a <p> cannot nest inside another <p> — the browser would close the outer one
 * early and push the content out, which is what happened before.
 */
.ln-tabs__subheading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
}

/* The paragraph the text format emits is a direct flex child now. */
.ln-tabs__subheading > p {
  margin: 0;
}

/**
 * The visibility glyph is 29x21, not square. Measured at 28.5 x 20.5 in the
 * mockup, so it renders at its native size. Sizing it to a square box would
 * letterbox or distort it, so the box takes the asset's own dimensions.
 */
.ln-tabs__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 29px;
  height: 21px;
  color: currentColor;
}

.ln-tabs__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Two columns: copy left, image right. */
.ln-tabs__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ln-tabs-column-gap);
  align-items: start;
  margin-top: 3rem;
}

.ln-tabs__copy {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.3;
}

/* Set on the paragraphs as well as the container: the WYSIWYG can nest content
   whose own line-height would otherwise win over the inherited value. */
.ln-tabs__copy p {
  line-height: 1.3;
}

.ln-tabs__copy > :first-child {
  margin-top: 0;
}

.ln-tabs__copy > :last-child {
  margin-bottom: 0;
}

/**
 * Checklist. The bulleted list an editor writes in the WYSIWYG is given the same
 * red bubble tick used by the comparison table, as a background image rather than
 * a marker so it can sit beside multi-line items.
 *
 * The SVG is inlined as a data URI because a list-style-image cannot inherit
 * currentColor; the red is fixed here to match --ln-tabs-accent.
 */
.ln-tabs__copy :is(ul) {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.ln-tabs__copy :is(ul) li {
  position: relative;
  margin: 0;
  padding: 0 0 0 2.25rem;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.3;
}

.ln-tabs__copy :is(ul) li + li {
  margin-top: 1rem;
}

.ln-tabs__copy :is(ul) li::before {
  content: '';
  position: absolute;
  top: 0.2em;
  left: 0;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath fill='%23cf0000' fill-rule='evenodd' d='M9.12209 2.22385C10.3055.862875 12.0519 0 14 0c1.948 0 3.6943.86279 4.8777 2.22365 1.7994-.12571 3.6447.49904 5.0223 1.87666 1.3776 1.37761 2.0023 3.22289 1.8766 5.02222C27.1373 10.3059 28 12.0522 28 14c0 1.9482-.863 3.6947-2.2241 4.8781.1254 1.7991-.4993 3.644-1.8767 5.0214-1.3774 1.3773-3.2223 2.0021-5.0213 1.8767C17.6944 27.1371 15.948 28 14 28c-1.9479 0-3.6943-.8628-4.87769-2.2236-1.79935.1257-3.64466-.499-5.02229-1.8767-1.37762-1.3776-2.00238-3.2229-1.87666-5.0222C.862666 17.6941 0 15.9478 0 14c0-1.9479.862753-3.6942 2.22356-4.87766C2.09799 7.32315 2.72276 5.47805 4.10026 4.10055 5.47777 2.72304 7.32289 2.09827 9.12209 2.22385ZM19.184 11.3952c.3457-.484.2336-1.1566-.2504-1.5023-.4839-.3457-1.1565-.2336-1.5022.2504L12.7857 16.6473l-2.3319-2.3319c-.4206-.4205-1.10241-.4205-1.52297 0-.42057.4206-.42057 1.1025 0 1.523l3.23077 3.2308c.2238.2238.5348.3379.8503.3117.3155-.0261.6035-.1897.7875-.4473l5.3846-7.5384Z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* CTA link. */
.ln-tabs__cta {
  margin-top: 2rem;
}

.ln-tabs__cta a {
  color: var(--ln-tabs-accent);
  font-weight: 600;
  text-decoration: none;
}

.ln-tabs__cta a:hover,
.ln-tabs__cta a:focus {
  color: var(--ln-tabs-accent-hover);
  text-decoration: underline;
}

.ln-tabs__media img {
  display: block;
  max-width: 100%;
  height: auto;
}

/**
 * The panel clips. Everything about how they behave lives in the video
 * component; all this contributes is the aspect ratio, which belongs to the
 * asset the designer delivered rather than to a shared component.
 *
 * Reserving the ratio stops the panel reflowing once metadata loads, but it has
 * to match the file or object-fit letterboxes the difference. This is the
 * delivered clip's ratio, not the 1248 x 800 of the still frames supplied
 * first — those differed by 2.2%, which showed as thin bars above and below.
 * Update the token if a future export changes size.
 */
.ln-video--tabs {
  --ln-video-ratio: var(--ln-tabs-video-ratio);
}

@media (max-width: 60rem) {
  .ln-tabs {
    --ln-tabs-panel-padding: 32px;
    --ln-tabs-tab-height: 52px;
    --ln-tabs-tab-pad-block: 10px;
    --ln-tabs-column-gap: 32px;
  }

  .ln-tabs__body {
    grid-template-columns: 1fr;
  }

  .ln-tabs__tab {
    font-size: 16px;
  }
}

/**
 * Phone.
 *
 * The section's inline padding goes to zero so the grey panel reaches both
 * viewport edges. The panel keeps its own 32px, so content is still inset — what
 * changes is that the *surface* is full-bleed rather than a floating card.
 *
 * The strip then has to re-create an inset of its own, because it is no longer
 * getting one from the section. 62px each side, which puts the three tabs in
 * about 277px of the 401px frame — the comp measures them at 270px.
 *
 * padding on .ln-tabs__strip rather than the list: the strip is the full-width
 * flex container that centres the list, and the list already uses its own padding
 * for the white surround the tabs sit on. Padding the strip insets the whole
 * assembly without touching that.
 */
@media (max-width: 47.99rem) {
  .ln-tabs {
    --ln-tabs-padding-inline: 0px;
  }

  .ln-tabs__strip {
    padding-inline: 62px;
  }

  /**
   * Media above the copy.
   *
   * .ln-tabs__body is a grid, one column at this width, with .ln-tabs__copy
   * first in the DOM and .ln-tabs__media second — the order the two-column
   * desktop layout wants. order: -1 lifts the media to the first row so the
   * panel reads heading, subheading, media, copy.
   *
   * Visual order only; the DOM is untouched. Safe here because the media holds
   * nothing focusable — the video renders without controls and the CTA lives in
   * the copy — so there is no focus order to diverge from the reading order. It
   * would not be safe if a link were ever added inside the media.
   */
  .ln-tabs__media {
    order: -1;
  }
}