/**
 * @file
 * Hero component styles. Every value a designer is likely to change is a custom
 * property on .ln-hero.
 */

.ln-hero {
  --ln-hero-padding-block: 80px;
  --ln-hero-padding-inline: var(--ln-container-gutter, 32px);
  --ln-hero-max-width: var(--ln-container-max, 1440px);
  --ln-hero-column-gap: 64px;
  --ln-hero-text-gap: 32px;
  --ln-hero-actions-gap: 64px;
  --ln-hero-text-max-width: 42rem;
  --ln-hero-media-radius: 16px;

  /* Transparent: the Layout Builder section paints the background. */
  --ln-hero-bg: transparent;
  --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: layout.css drops the first section's top padding, and owns the
     gap below to the next section. */
  padding-block: var(--ln-hero-padding-block) 0;
  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;
}

/* Gutter and max-width on the same box, so the 1440 is the outer edge. */
.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;
  padding-inline: var(--ln-hero-padding-inline);
}

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

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

/* No cropping by default: supplied art carries its own corners and shadow.
   ln-hero--rounded-media is the opt-in. */
.ln-hero__media img,
.ln-hero__media video,
.ln-hero__media iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

.ln-hero--rounded-media .ln-hero__media :is(img, video, iframe) {
  border-radius: var(--ln-hero-media-radius);
}

/* The scrim sits over the photo, so it has to round with it or it shows square
   corners on top of a rounded image. */
.ln-hero--rounded-media .ln-hero__backdrop,
.ln-hero--rounded-media .ln-hero__backdrop::after {
  border-radius: var(--ln-hero-media-radius);
}

.ln-hero--rounded-media .ln-hero__backdrop {
  overflow: clip;
}

@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;
  }
}

.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;
}

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

  overflow: hidden;
  isolation: isolate;
}

/* The section paints the background, so the hero has to answer a dark one.
   Values match the media_background treatment above. */
.section-background-grey .ln-hero {
  --ln-hero-fg: #ffffff;
  --ln-hero-muted: #e8ebef;
}

.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 does crop, because it must fill the section. */
.ln-hero__backdrop img,
.ln-hero__backdrop video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.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;
  /* Required: the container-inherit rule in css/editor-styles.css skips
     BEM-classed elements, so without this Cohesion's p { line-height: 1.8 } wins. */
  line-height: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ln-hero-accent);
}

.ln-hero__heading {
  margin: 0;
  /* Required: Cohesion sets color on bare h1/h2/h3, and an element rule beats an
     inherited value however specific the ancestor. */
  color: inherit;
  font-family: var(--ln-hero-heading-font, var(--ln-hero-font));
  font-size: var(--ln-hero-heading-size);
  font-weight: var(--ln-hero-heading-weight, 600);
  line-height: 1;
  text-wrap: balance;
}

/**
 * Headline font swap. The stack is Cohesion's own property, so the font stays
 * managed there; the literal is only a fallback if the base stylesheet is
 * missing (an unrebuilt cohesion/ directory renders the site unstyled anyway).
 *
 * Cohesion's stack ends "Playfair, serif", but css/fonts.css self-hosts
 * "Playfair Display" — so the real second choice is named here instead.
 *
 * 400, not the default 600: this is a serif display face and its Regular
 * already carries the weight the sans needs Semibold for.
 */
.ln-hero--font-tiempos {
  --ln-hero-heading-font: var(
    --ssa-font-stacks-tiempos-headline,
    "Tiempos Headline",
    "Playfair Display",
    serif
  );
  --ln-hero-heading-weight: 400;
}

.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;
}

/* 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: inline padding moves off the section onto the content column so the
 * media runs edge to edge.
 *
 * Left alignment is asserted against the text_only and media_background
 * variants specifically: their centring rule is (0,2,0), so one class loses.
 */
@media (max-width: 47.99rem) {
  .ln-hero {
    --ln-hero-text-gap: 16px;
    --ln-hero-actions-gap: 32px;
    --ln-hero-column-gap: 32px;

    /* Square: the image runs to the screen edges below. */
    --ln-hero-media-radius: 0;

    /* Nothing below the image — --ln-section-gap owns the gap to the next
       section. */
    --ln-hero-padding-block: 32px;
  }

  /* Zero here so the image runs edge to edge; the gutter moves inward to
     .ln-hero__content only. */
  .ln-hero__inner {
    padding-inline: 0;
  }

  .ln-hero__content {
    padding-inline: var(--ln-hero-padding-inline);
  }

  .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;
  }

  .ln-hero__actions {
    flex-wrap: nowrap;
    align-items: stretch;
  }

  /* flex-basis 0 splits the row evenly whatever the label lengths;
     min-inline-size: 0 lets a long translated label wrap instead of overflowing. */
  .ln-hero__actions > * {
    flex: 1 1 0;
    min-inline-size: 0;
  }
}

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