/* =============================================================================
   HERO SECTION — styles.css
   Scoped to .hero-section / .hero__* BEM tree.
   All values reference CSS custom properties defined in theme.liquid :root.
   ============================================================================= */

/* ── Section shell ─────────────────────────────────────────────────────────── */
.hero-section {
  position: relative;
  overflow: hidden;
  min-height: var(--hero-min-h-mobile, 480px);
  display: flex;
  flex-direction: column;
}

/* ── Background media layer ─────────────────────────────────────────────────── */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Placeholder while media loads */
  background-color: var(--color-gray-200, #eaecf0);
}

.hero__media-img,
.hero__media-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ── Overlay layer ──────────────────────────────────────────────────────────── */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* background-color + opacity injected per-section via {% style %} */
}

/* ── Container: wraps content, controls vertical position ───────────────────── */
/* Width, max-width, margin-inline and padding-inline are all handled by       */
/* .fluid-container / .fluid-container--narrow / .fluid-container--full        */
/* from fluid_foundation.css — no need to duplicate those rules here.          */
.hero__container {
  position: relative;
  z-index: 2;
  flex: 1; /* stretches to fill section min-height */
  display: flex;
  flex-direction: column;
  padding-block: var(--hero-py-mobile, 48px);
}

/* ── Content position (vertical alignment within hero height) ───────────────── */
.hero__container--top     { justify-content: flex-start; }
.hero__container--center  { justify-content: center; }
.hero__container--bottom  { justify-content: flex-end; }
.hero__container--between { justify-content: space-between; }

/* ── Inner flex block (holds all blocks) ────────────────────────────────────── */
.hero__inner {
  display: flex;
  width: 100%;
  max-width: 100%;
  gap: var(--hero-gap-mobile, 24px);
}

/* Direction — column: row-wrap so consecutive button blocks sit side by side */
.hero__inner--col {
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
}

/* Non-button blocks in col layout span full width → simulate vertical stacking */
.hero__inner--col > *:not(.hero__btn-block) {
  flex: 1 0 100%;
  min-width: 0;
}

/* Direction — horizontal (column on mobile, row on desktop) */
.hero__inner--row {
  flex-direction: column;
}

/* ── Text alignment ──────────────────────────────────────────────────────────── */
.hero__inner--left   { text-align: left; }
.hero__inner--center { text-align: center; }
.hero__inner--right  { text-align: right; }

/* Col layout: justify-content controls horizontal positioning of items */
.hero__inner--col.hero__inner--left   { justify-content: flex-start; }
.hero__inner--col.hero__inner--center { justify-content: center; }
.hero__inner--col.hero__inner--right  { justify-content: flex-end; }

/* Row layout (col-direction): align-items controls cross-axis positioning */
.hero__inner--row.hero__inner--left   { align-items: flex-start; }
.hero__inner--row.hero__inner--center { align-items: center; }
.hero__inner--row.hero__inner--right  { align-items: flex-end; }

/* ── Typography ─────────────────────────────────────────────────────────────── */

.hero__subheading {
  display: block;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--color-primary, #2365ea);
}

.hero__heading {
  font-family: var(--font-heading, var(--font-body));
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--color-heading, #0f1526);
  margin: 0;
  /* Fluid type scale: clamps between h3 (mobile) and h1 (desktop) */
  font-size: clamp(var(--font-size-h3, 1.75rem), 4.5vw, var(--font-size-h1, 3.5rem));
}

.hero__description {
  font-size: var(--text-base, 1rem);
  line-height: 1.65;
  color: var(--color-muted, #818596);
}

.hero__inner--center .hero__description {
  margin-inline: auto;
}

/* ── Text overrides when a background image/video is active ─────────────────── */
/*
  .hero-section--has-media is added via Liquid when bg_image or bg_video
  is set. This ensures content reads over any background regardless of overlay.
*/
.hero-section--has-media .hero__subheading {
  color: rgba(255, 255, 255, 0.8);
}

.hero-section--has-media .hero__heading {
  color: var(--color-overlay-text, #ffffff);
}

.hero-section--has-media .hero__description {
  color: rgba(255, 255, 255, 0.75);
}

/* ── Button group wrapper (one per consecutive run of button blocks) ─────────── */
.hero__btn-block {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm, 0.75rem);
  flex-shrink: 0;
}

/* Highlight the hero's outline CTA (currently “Learn More”). */
.hero__btn-block .button--outline {
  background-color: #d32f2f;
  border-color: #d32f2f;
  color: #ffffff;
}

.hero__btn-block .button--outline:hover {
  background-color: #b71c1c;
  border-color: #b71c1c;
  color: #ffffff;
}

/* ── Desktop (≥1024px) ──────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .hero-section {
    min-height: var(--hero-min-h-desktop, 640px);
  }

  .hero__container {
    padding-block: var(--hero-py-desktop, 80px);
  }

  .hero__inner {
    gap: var(--hero-gap-desktop, 24px);
  }

  /* Horizontal direction: blocks flow into a row */
  .hero__inner--row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .hero__inner--row > * {
    flex: 1 1 40%;
    min-width: 0;
  }

  /*
    When horizontal + center-aligned: individual blocks left-align naturally
    inside their flex cells so adjacent columns don't fight each other.
  */
  .hero__inner--row.hero__inner--center > * {
    text-align: left;
  }

  .hero__inner--row.hero__inner--center .hero__description {
    margin-inline: 0;
  }

  /* Button blocks in horizontal row: don't stretch to the 40% column width */
  .hero__inner--row .hero__btn-block {
    flex: 0 0 auto;
  }
}

/* ── Accessibility ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__media-video {
    animation: none;
  }
}