/* ============================================================
   Interlaken® · Componente · Hero
   Tres variantes:
   · home    — full-bleed cinematográfico (patrón B asimétrico)
   · unit    — full-bleed con lockup -work prominente
   · product — editorial compacto sin foto (texto sobre blanco)

   Sprint 2.E del rediseño · 25 abril 2026 · refactor patrón B.

   Decisiones aplicadas:
   · Mobile-first riguroso (375px → 768px → 1024px → 1440px).
   · Variantes home/unit usan fondo full-bleed: paleta sólida
     temporal, foto cuando esté disponible. La estructura es la
     misma — solo se sustituye --ilk-hero-bg por background-image.
   · Gradient diagonal aparece automáticamente cuando hay foto
     (clase .ilk-hero--with-photo). Sobre paleta sólida no hay
     overlay porque no hace falta.
   · Variant product mantiene formato editorial compacto.
   · Sin video reproducible en mobile.
   · Cumple los 4 criterios rectores del sistema.
   ============================================================ */

.ilk-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.ilk-hero__inner {
  position: relative;
  z-index: 2;
}

/* Bloque de contenido común a las tres variantes */
.ilk-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--ilk-space-5);
}

@media (min-width: 768px) {
  .ilk-hero__content { gap: var(--ilk-space-6); }
}

.ilk-hero__title {
  margin: 0;
}

.ilk-hero__desc {
  margin: 0;
  max-width: 56ch;
}

.ilk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ilk-space-3);
  margin-top: var(--ilk-space-3);
}

/* ────────────────────────────────────────────────────────────
   1 · Base full-bleed (compartida por home y unit)
   Fondo dark por default. Cuando se asigne foto vía
   --ilk-hero-bg-image y clase .ilk-hero--with-photo, aparece
   también el gradient diagonal del overlay.
   ──────────────────────────────────────────────────────────── */

.ilk-hero--home,
.ilk-hero--unit {
  background-color: var(--ilk-hero-bg, var(--ilk-bg-dark));
  background-image: var(--ilk-hero-bg-image, none);
  background-size: cover;
  background-position: var(--ilk-hero-bg-position, center);
  color: var(--ilk-fg-inverse);
  /* 100svh = small viewport height (descuenta barras del navegador en mobile).
     Garantiza que todo el contenido del hero queda dentro del fold visible
     sin requerir scroll para ver los botones. Fallback a 100vh para
     navegadores antiguos. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
}

/* Home conserva centrado vertical · su contenido tiene altura más estable
   (título + lead + botones + stats fijos) y el patrón B asimétrico
   se beneficia del centrado óptico del bloque texto. */
.ilk-hero--home {
  align-items: center;
}

/* Unit usa anclaje desde el top en lugar de centrado vertical.
   Razón: los títulos y leads tienen alturas variables entre páginas
   (1 línea vs 2 líneas, leads largos vs cortos). Con `align-items: center`,
   esa variación producía un drift sutil de posición — el breadcrumb de
   Bridgework caía ~30px más abajo que el de Groundwork porque su bloque
   total era más corto y se centraba más abajo.
   Con `flex-start`, el breadcrumb arranca SIEMPRE a la misma altura y el
   contenido fluye desde ahí, garantizando estabilidad entre páginas.
   El padding-top calibrado (más generoso que el original) preserva el
   "aire óptico" superior que daba la sensación de respiración.
   Lección: 26 abril 2026 · Álvaro identificó el "salto" entre páginas. */
.ilk-hero--unit {
  align-items: flex-start;
}

/* Texto sobre fondo oscuro/foto: todo blanco por default */
.ilk-hero--home .ilk-hero__title,
.ilk-hero--unit .ilk-hero__title {
  color: var(--ilk-fg-inverse);
}

.ilk-hero--home .ilk-hero__desc,
.ilk-hero--unit .ilk-hero__desc {
  color: rgba(255, 255, 255, 0.85);
}

/* Inner con padding generoso · base compartida home + unit */
.ilk-hero--home .ilk-hero__inner,
.ilk-hero--unit .ilk-hero__inner {
  width: 100%;
  padding-block: var(--ilk-space-16) var(--ilk-space-12);
  padding-inline: var(--ilk-space-5);
}

@media (min-width: 768px) {
  .ilk-hero--home .ilk-hero__inner,
  .ilk-hero--unit .ilk-hero__inner {
    padding-block: var(--ilk-space-20);
    padding-inline: var(--ilk-space-8);
  }
}

@media (min-width: 1024px) {
  .ilk-hero--home .ilk-hero__inner,
  .ilk-hero--unit .ilk-hero__inner {
    padding-block: var(--ilk-space-24);
  }
}

/* Padding-block calibrado para hero--unit con anclaje desde el top.
   Valores moderados que mantienen consistencia entre páginas (toda la
   variabilidad de altura del contenido se absorbe abajo, no arriba)
   y al mismo tiempo garantizan que el contenido completo — incluidos
   los botones — quede dentro del fold sin requerir scroll.
   Lección 26 abril 2026 (segunda iteración): el primer fix usaba
   padding-top 32 (128px) que sacaba los botones del viewport. Los
   valores actuales son intermedios entre el centrado original (8/10
   en mobile, 12/20 en desktop) y el over-padded de la primera versión. */
.ilk-hero--unit .ilk-hero__inner {
  padding-block: var(--ilk-space-8) var(--ilk-space-10);
}

@media (min-width: 768px) {
  .ilk-hero--unit .ilk-hero__inner {
    padding-block: var(--ilk-space-10) var(--ilk-space-12);
  }
}

@media (min-width: 1024px) {
  .ilk-hero--unit .ilk-hero__inner {
    padding-block: var(--ilk-space-12) var(--ilk-space-16);
  }
}

/* Overlay gradient diagonal — se activa solo con foto */
.ilk-hero--home::before,
.ilk-hero--unit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    105deg,
    rgba(13, 13, 13, 0.92) 0%,
    rgba(13, 13, 13, 0.65) 35%,
    rgba(13, 13, 13, 0.30) 60%,
    rgba(13, 13, 13, 0.10) 80%,
    rgba(13, 13, 13, 0)    100%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ilk-transition);
}

/* En mobile el gradient va vertical (oscuro abajo, libre arriba)
   para no aplastar el texto sobre la foto vertical */
@media (max-width: 767px) {
  .ilk-hero--home::before,
  .ilk-hero--unit::before {
    background: linear-gradient(
      180deg,
      rgba(13, 13, 13, 0)    0%,
      rgba(13, 13, 13, 0.30) 35%,
      rgba(13, 13, 13, 0.75) 70%,
      rgba(13, 13, 13, 0.92) 100%
    );
  }
}

.ilk-hero--with-photo::before {
  opacity: 1;
}

/* En mobile, cuando hay foto, contenido alineado al fondo
   (zona oscura del gradient vertical) */
@media (max-width: 767px) {
  .ilk-hero--with-photo {
    align-items: flex-end;
  }
}

/* ────────────────────────────────────────────────────────────
   2 · Variante HOME
   Texto en zona izquierda, lado derecho libre para la foto.
   ──────────────────────────────────────────────────────────── */

.ilk-hero--home .ilk-hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--ilk-space-12);
  max-width: var(--ilk-container-wide);
  margin-inline: auto;
}

.ilk-hero--home .ilk-hero__content {
  max-width: 640px;
}

.ilk-hero--home .ilk-hero__title {
  font-size: var(--ilk-fs-fluid-display);
  font-weight: var(--ilk-fw-bold);
  line-height: var(--ilk-lh-tight);
  letter-spacing: var(--ilk-tracking-tight);
}

.ilk-hero--home .ilk-hero__title strong {
  color: var(--ilk-orange);
  font-weight: var(--ilk-fw-bold);
}

/* Stats: banda inferior dentro del hero */
.ilk-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ilk-space-4);
  padding-top: var(--ilk-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

@media (min-width: 768px) {
  .ilk-hero__stats {
    gap: var(--ilk-space-8);
  }
}

.ilk-hero__stat-num {
  display: block;
  font-family: var(--ilk-font-sans);
  font-weight: var(--ilk-fw-bold);
  font-size: var(--ilk-fs-2xl);
  line-height: 1;
  color: var(--ilk-orange);
  margin-bottom: var(--ilk-space-2);
}

@media (min-width: 768px) {
  .ilk-hero__stat-num { font-size: var(--ilk-fs-3xl); }
}

.ilk-hero__stat-label {
  display: block;
  font-size: var(--ilk-fs-xs);
  font-weight: var(--ilk-fw-light);
  color: rgba(255, 255, 255, 0.65);
  line-height: var(--ilk-lh-snug);
}

/* ────────────────────────────────────────────────────────────
   3 · Variante UNIT
   Lockup -work prominente + tagline del oficio centrado.
   ──────────────────────────────────────────────────────────── */

.ilk-hero--unit {
  text-align: center;
}

.ilk-hero--unit .ilk-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ilk-space-6);
  max-width: var(--ilk-container-wide);
  margin-inline: auto;
}

.ilk-hero--unit .ilk-hero__content {
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}

.ilk-hero--unit .ilk-hero__lockup {
  margin-bottom: var(--ilk-space-4);
}

@media (min-width: 768px) {
  .ilk-hero--unit .ilk-hero__lockup { margin-bottom: var(--ilk-space-6); }
}

.ilk-hero--unit .ilk-hero__title {
  font-weight: var(--ilk-fw-light);
  font-size: var(--ilk-fs-fluid-h1);
  line-height: var(--ilk-lh-tight);
  letter-spacing: var(--ilk-tracking-tight);
  max-width: 22ch;
}

.ilk-hero--unit .ilk-hero__desc {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}

.ilk-hero--unit .ilk-hero__actions {
  justify-content: center;
}

/* Paleta específica por instalador — cada unidad hereda su tono profundo
   declarado en tokens.css. Provisionales hasta confirmación oficial de
   Claude Design — cuando lleguen los hex oficiales, basta actualizar
   las variables --ilk-<unidad>-deep en tokens.css. */
.ilk-hero--unit-groundwork    { --ilk-hero-bg: var(--ilk-groundwork-hero); }
.ilk-hero--unit-bridgework    { --ilk-hero-bg: var(--ilk-bridgework-hero); }
.ilk-hero--unit-fieldwork     { --ilk-hero-bg: var(--ilk-fieldwork-hero); }
.ilk-hero--unit-academy       { --ilk-hero-bg: var(--ilk-academy-hero); }
.ilk-hero--unit-responsework  { --ilk-hero-bg: var(--ilk-responsework-hero); }
.ilk-hero--unit-campamentos   { --ilk-hero-bg: var(--ilk-campamentos-hero); }

/* Botones secondary y ghost adaptados al contexto oscuro del hero */
.ilk-hero--home .ilk-btn-secondary,
.ilk-hero--unit .ilk-btn-secondary {
  color: var(--ilk-fg-inverse);
  border-color: rgba(255, 255, 255, 0.4);
}

.ilk-hero--home .ilk-btn-secondary:hover,
.ilk-hero--unit .ilk-btn-secondary:hover {
  border-color: var(--ilk-orange);
  color: var(--ilk-orange);
}

.ilk-hero--home .ilk-btn-ghost,
.ilk-hero--unit .ilk-btn-ghost {
  color: var(--ilk-fg-inverse);
}

.ilk-hero--home .ilk-btn-ghost:hover,
.ilk-hero--unit .ilk-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ilk-fg-inverse);
}

/* ────────────────────────────────────────────────────────────
   4 · Variante PRODUCT — editorial compacto
   Sin foto full-bleed. Texto sobre fondo blanco normal.
   Va al grano para llevar al usuario al contenido.
   ──────────────────────────────────────────────────────────── */

.ilk-hero--product {
  background: var(--ilk-bg-1);
  color: var(--ilk-fg-1);
}

.ilk-hero--product .ilk-hero__inner {
  padding-block: var(--ilk-space-8) var(--ilk-space-12);
  padding-inline: var(--ilk-space-5);
  max-width: var(--ilk-container-base);
  margin-inline: auto;
}

@media (min-width: 768px) {
  .ilk-hero--product .ilk-hero__inner {
    padding-block: var(--ilk-space-12) var(--ilk-space-16);
    padding-inline: var(--ilk-space-8);
  }
}

.ilk-hero--product .ilk-hero__breadcrumb {
  margin-bottom: var(--ilk-space-5);
}

.ilk-hero--product .ilk-hero__eyebrow {
  margin-bottom: var(--ilk-space-2);
}

.ilk-hero--product .ilk-hero__title {
  font-size: var(--ilk-fs-fluid-h1);
  line-height: var(--ilk-lh-tight);
  letter-spacing: var(--ilk-tracking-tight);
  margin: 0 0 var(--ilk-space-4);
  max-width: 24ch;
  color: var(--ilk-fg-1);
}

.ilk-hero--product .ilk-hero__hook {
  font-size: var(--ilk-fs-fluid-lead);
  font-weight: var(--ilk-fw-light);
  font-style: italic;
  color: var(--ilk-fg-2);
  line-height: var(--ilk-lh-relaxed);
  max-width: 56ch;
  margin: 0 0 var(--ilk-space-6);
}