/**
 * @file
 * Hero component styles.
 *
 * Values from Figma "2026 Landing Page Updates", node 333:2982.
 * Typography uses Outfit, which the site already loads through the Site Studio
 * font library (weights 100/300/400/600).
 *
 * Every value a designer is likely to change is exposed as a custom property on
 * .ln-hero, so a theme can re-skin the hero without overriding selectors.
 */

.ln-hero {
  /* Figma: 80px block padding, 240px inline at 1920px wide (12.5% of viewport). */
  --ln-hero-padding-block: 80px;
  --ln-hero-padding-inline: clamp(1.25rem, 12.5vw, 240px);
  --ln-hero-max-width: 1440px;
  --ln-hero-column-gap: 64px;
  --ln-hero-text-gap: 32px;
  --ln-hero-actions-gap: 64px;
  --ln-hero-text-max-width: 42rem;

  --ln-hero-bg: #ffffff;
  --ln-hero-fg: #1c1c1c;
  --ln-hero-muted: #1c1c1c;
  --ln-hero-accent: #cf0000;

  --ln-hero-font: Outfit, sans-serif;
  --ln-hero-heading-size: clamp(2.5rem, 5vw, 72px);
  --ln-hero-body-size: 18px;

  position: relative;
  box-sizing: border-box;
  /**
   * Top only. Nothing precedes the hero inside a layout region, so the space
   * below the site header has to come from the hero itself — the sibling rules
   * in css/layout.css add nothing before a first child. The bottom is 0 for the
   * same reason the other unboxed blocks are: that space is the gap to the next
   * section, and layout.css owns it.
   */
  padding-block: var(--ln-hero-padding-block) 0;
  padding-inline: var(--ln-hero-padding-inline);
  background-color: var(--ln-hero-bg);
  color: var(--ln-hero-fg);
  font-family: var(--ln-hero-font);
}

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

/* Layout. */
.ln-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ln-hero-column-gap);
  max-width: var(--ln-hero-max-width);
  margin-inline: auto;
}

.ln-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--ln-hero-actions-gap);
  min-width: 0;
}

.ln-hero__media {
  min-width: 0;
}

/**
 * The image sizes to its own intrinsic ratio — no aspect-ratio, no object-fit.
 * Supplied art already carries its rounded corners and drop shadow, and any
 * cropping here would clip the transparent padding the shadow lives in.
 */
.ln-hero__media img,
.ln-hero__media video,
.ln-hero__media iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (min-width: 62rem) {
  .ln-hero--media-right .ln-hero__inner,
  .ln-hero--media-left .ln-hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .ln-hero--media-right .ln-hero__content,
  .ln-hero--media-left .ln-hero__content,
  .ln-hero--media-right .ln-hero__media,
  .ln-hero--media-left .ln-hero__media {
    flex: 1 1 0;
  }

  .ln-hero--media-left .ln-hero__content {
    order: 2;
  }
}

/* Centred variants. */
.ln-hero--text-only .ln-hero__content,
.ln-hero--media-background .ln-hero__content {
  margin-inline: auto;
  max-width: var(--ln-hero-text-max-width);
  text-align: center;
}

/* Background media. */
.ln-hero--media-background {
  --ln-hero-fg: #ffffff;
  --ln-hero-muted: #e8ebef;

  overflow: hidden;
  isolation: isolate;
}

.ln-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.ln-hero__backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

/* The background variant is the exception: it must fill the section, so it does
   crop. Pre-composed art is not appropriate for this layout. */
.ln-hero__backdrop img,
.ln-hero__backdrop video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Typography. Figma: heading Outfit SemiBold 72/1.0, body Outfit Light 18/1.3,
   with 32px between them. */
.ln-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--ln-hero-text-gap);
}

.ln-hero__eyebrow {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  /* Stated because this is a component-authored <p>, and the container-inherit
     rule in css/editor-styles.css deliberately skips those — without a value here
     the eyebrow would pick up Cohesion's p { line-height: 1.8 }, which on a
     single-line uppercase label is a visible change in the space it occupies.
     `inherit` reproduces what that rule was doing for it, rather than inventing a
     number; worth replacing with the value from the comp when someone has it. */
  line-height: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ln-hero-accent);
}

.ln-hero__heading {
  margin: 0;
  font-size: var(--ln-hero-heading-size);
  font-weight: 600;
  line-height: 1;
  text-wrap: balance;
}

.ln-hero__subheading {
  margin: 0;
  font-size: var(--ln-hero-body-size);
  font-weight: 300;
  line-height: 1.3;
  color: var(--ln-hero-muted);
}

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

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

/* Calls to action. Buttons style themselves; the hero only handles placement. */
.ln-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.ln-hero--text-only .ln-hero__actions,
.ln-hero--media-background .ln-hero__actions {
  justify-content: center;
}

/**
 * Phone. Values supplied directly by the designer, not measured.
 *
 * The inline padding moves off the section and onto the content column. It sits
 * on .ln-hero at every other width, which pads the media as well — and the media
 * is meant to run edge to edge here. Moving it rather than zeroing it and
 * re-adding is why .ln-hero__inner needs nothing: with the section at 0 its
 * max-width and auto margins already let it span the full viewport.
 *
 * The three gaps are all existing tokens, so nothing new is introduced:
 *
 *   heading -> body      --ln-hero-text-gap      32 -> 16
 *   body -> CTAs         --ln-hero-actions-gap   64 -> 32
 *   CTAs -> media        --ln-hero-column-gap    64 -> 32
 *
 * Left alignment is asserted against the two centring variants rather than on
 * .ln-hero__content alone. Their rule is (0,2,0), so a single class here would
 * lose to it and a text_only or media_background hero would stay centred — the
 * one case where "it works on the page I am looking at" hides a bug.
 */
@media (max-width: 47.99rem) {
  .ln-hero {
    --ln-hero-text-gap: 16px;
    --ln-hero-actions-gap: 32px;
    --ln-hero-column-gap: 32px;

    /* 32px above the heading, against 80px at wider widths. Nothing below the
       image: the gap to the next section is --ln-section-gap's job, and adding
       padding here as well would have stacked 32px on top of it. */
    --ln-hero-padding-block: 32px;

    padding-inline: 0;
  }

  .ln-hero__content {
    padding-inline: var(--ln-hero-padding-inline-mobile, 16px);
  }

  .ln-hero--text-only .ln-hero__content,
  .ln-hero--media-background .ln-hero__content {
    margin-inline: 0;
    max-width: none;
    text-align: start;
  }

  .ln-hero--text-only .ln-hero__actions,
  .ln-hero--media-background .ln-hero__actions {
    justify-content: flex-start;
  }

  /**
   * The two CTAs split the row.
   *
   * nowrap and stretch, where every other width lets them size to their labels
   * and wrap. flex-basis 0 rather than auto so the split is even regardless of
   * label length — otherwise "Ask an Expert" would take more room than "Buy
   * Online" and the pair would look misaligned. min-inline-size: 0 is what lets
   * a flex item shrink below its content width; without it a long translated
   * label pushes the row wider than the screen instead of wrapping its text.
   */
  .ln-hero__actions {
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .ln-hero__actions > * {
    flex: 1 1 0;
    min-inline-size: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ln-hero * {
    animation: none !important;
    transition: none !important;
  }
}