/**
 * common/hero — Cabecera parametrizable.
 * Handle: pf_pfuture_component_hero
 *
 * Variantes:   --default, --compact, --split (imagen destacada al lado), --cover
 *              (imagen de fondo bajo el texto).
 * Altura:      --height-auto, --height-short, --height-tall, --height-full.
 * Alineación:  --align-left, --align-center.
 * Tono:        --tone-default, --tone-soft, --tone-invert.
 * Estado:      --has-image, --has-background, --overlay.
 *
 * Tokens: solo los canónicos de style.css (issue #60), sin literales de respaldo.
 * `--pf-hero-image-ratio` la escribe PHP con la proporción real de la imagen
 * destacada, para reservar su hueco antes de que cargue.
 *
 * Dirección «Expediente» (issue #112). Tono `default`, el de la portada: fondo
 * transparente sobre la página, título en `heading`, entradilla en `text-soft` (ya
 * no en `brand`, que ahora es navy y se leía como un segundo titular), antetítulo
 * en `text-muted` como versalita de 13 px. Tono `invert` (interiores y `cover`):
 * `bg-ink` con `on-ink` encima, que cambian solos de modo, así que la hoja no
 * necesita ningún bloque de modo oscuro. Botones: primario naranja de conversión
 * (`accent` / `on-accent`, hover `accent-hover`) y secundario con borde de 2 px
 * navy; sobre `invert` el secundario pasa a `on-ink`. Badges: 13 px, peso 400, sin
 * versalitas, borde de 1 px y fondo `surface`. El velo del `cover` cuelga de
 * `bg-ink`, no de `ink`, que en oscuro es una tinta clara y lo volvía blanquecino.
 * Sin sombra de texto: la separa el velo.
 */

.pf-hero {
  --pf-hero-bg: transparent;
  --pf-hero-text: var(--pf-color-text);
  --pf-hero-title: var(--pf-color-heading);
  --pf-hero-lead: var(--pf-color-text-soft);
  --pf-hero-eyebrow: var(--pf-color-text-muted);
  --pf-hero-meta: var(--pf-color-text-muted);
  --pf-hero-badge-bg: var(--pf-color-surface);
  --pf-hero-badge-border: var(--pf-color-border);
  --pf-hero-badge-text: var(--pf-color-text-soft);
  --pf-hero-badge-hover-border: var(--pf-color-border-strong);
  --pf-hero-cta-bg: var(--pf-color-accent);
  --pf-hero-cta-text: var(--pf-color-on-accent);
  --pf-hero-cta-hover-bg: var(--pf-color-accent-hover);
  --pf-hero-secondary: var(--pf-color-brand);
  --pf-hero-secondary-hover-text: var(--pf-color-text-invert);
  --pf-hero-overlay: color-mix(in srgb, var(--pf-color-bg-ink) 62%, transparent);
  --pf-hero-image-ratio: 3 / 2;
  --pf-hero-padding-block: var(--pf-space-2xl);

  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--pf-hero-bg);
  color: var(--pf-hero-text);
}

/* Tonos. */
.pf-hero--tone-soft {
  --pf-hero-bg: var(--pf-color-bg-alt);
}

/* Navy en claro, navy profundo en oscuro. Encima va `on-ink` y NUNCA el token de
 * texto invertido, que sobre `bg-ink` da 1,03:1 en oscuro (medido en #111). El
 * primario sigue naranja: 5,16:1 en claro y 5,63:1 en oscuro sobre `bg-ink`. */
.pf-hero--tone-invert {
  --pf-hero-bg: var(--pf-color-bg-ink);
  --pf-hero-text: var(--pf-color-on-ink);
  --pf-hero-title: var(--pf-color-on-ink);
  --pf-hero-lead: var(--pf-color-on-ink);
  --pf-hero-eyebrow: color-mix(in srgb, var(--pf-color-on-ink) 80%, transparent);
  --pf-hero-meta: color-mix(in srgb, var(--pf-color-on-ink) 80%, transparent);
  --pf-hero-badge-bg: transparent;
  --pf-hero-badge-border: color-mix(in srgb, var(--pf-color-on-ink) 35%, transparent);
  --pf-hero-badge-text: var(--pf-color-on-ink);
  --pf-hero-badge-hover-border: var(--pf-color-on-ink);
  --pf-hero-secondary: var(--pf-color-on-ink);
  --pf-hero-secondary-hover-text: var(--pf-color-bg-ink);
}

/* Altura mínima por parámetro. El contenido se centra verticalmente. */
.pf-hero--height-short { min-height: 40vh; }
.pf-hero--height-tall  { min-height: 70vh; }
.pf-hero--height-full  { min-height: 90vh; }

.pf-hero--height-short,
.pf-hero--height-tall,
.pf-hero--height-full {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pf-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pf-space-lg);
  align-items: center;
  width: 100%;
  max-width: var(--pf-container);
  margin-inline: auto;
  padding: var(--pf-hero-padding-block) var(--pf-gutter);
}

.pf-hero--compact {
  --pf-hero-padding-block: var(--pf-space-xl);
}

.pf-hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--pf-space-sm);
  align-items: flex-start;
  min-width: 0;
}

.pf-hero--align-center .pf-hero__body {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.pf-hero__before {
  width: 100%;
  font-size: var(--pf-text-sm);
}

/* Versalita de 13 px, peso 500 y tracking del token (regla de uso 130). */
.pf-hero__eyebrow {
  margin: 0;
  color: var(--pf-hero-eyebrow);
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-weight-medium);
  letter-spacing: var(--pf-tracking-caps);
  text-transform: uppercase;
}

/* Etiqueta del antetítulo, SOLO bajo `pf-hero--frame` (piloto de T-09, issue #150;
 * corregida en el #163). La tanda 14 la dibujó como PESTAÑA —sin borde inferior y con
 * margen negativo— pensando que se apoyaba sobre el marco, y no se apoya en nada: el
 * antetítulo vive en la columna del texto y el marco en la de la imagen, así que la
 * revisión la vio como una caja abierta flotando sobre el blanco. Se cierra la caja y
 * queda una etiqueta con borde, que es además lo que pedía la crítica 9 de la propuesta
 * visual (un recuadro abierto parece un control pulsable). Sigue viviendo solo bajo esta
 * clase: se extiende o se retira cuando el dueño la vea en la ficha de caso. */
.pf-hero--frame .pf-hero__eyebrow {
  width: max-content;
  max-width: 100%;
  padding: var(--pf-space-3xs) var(--pf-space-xs);
  border: var(--pf-rule);
  border-radius: var(--pf-radius-sm);
  background: var(--pf-color-surface);
  color: var(--pf-color-text-soft);
}

.pf-hero__title {
  margin: 0;
  max-width: 22ch;
  color: var(--pf-hero-title);
  font-size: var(--pf-text-3xl);
  font-weight: var(--pf-weight-bold);
  line-height: var(--pf-leading-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pf-hero--compact .pf-hero__title {
  font-size: var(--pf-text-2xl);
}

.pf-hero__lead {
  max-width: 60ch;
  color: var(--pf-hero-lead);
  font-size: var(--pf-text-xl);
  font-weight: var(--pf-weight-regular);
  line-height: var(--pf-leading-snug);
}

.pf-hero--compact .pf-hero__lead {
  font-size: var(--pf-text-md);
}

.pf-hero__lead > :first-child { margin-top: 0; }
.pf-hero__lead > :last-child  { margin-bottom: 0; }

.pf-hero__badges,
.pf-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pf-hero--align-center .pf-hero__badges,
.pf-hero--align-center .pf-hero__meta {
  justify-content: center;
}

.pf-hero__badge {
  display: inline-flex;
}

/* Pildoras de termino: borde de 1 px y fondo `surface`, 13 px, peso 400 y sin
 * mayusculas. Una sola señal al hover: el borde sube a `border-strong`. */
.pf-hero__badge-link,
.pf-hero__badge-label {
  display: inline-flex;
  align-items: center;
  padding: var(--pf-space-3xs) var(--pf-space-xs);
  border: 1px solid var(--pf-hero-badge-border);
  border-radius: var(--pf-radius-pill);
  background: var(--pf-hero-badge-bg);
  color: var(--pf-hero-badge-text);
  font-size: var(--pf-text-xs);
  font-weight: var(--pf-weight-regular);
  line-height: var(--pf-leading-snug);
  text-decoration: none;
  transition: border-color var(--pf-transition);
}

.pf-hero__badge-link:hover,
.pf-hero__badge-link:focus-visible {
  border-color: var(--pf-hero-badge-hover-border);
}

.pf-hero__meta {
  gap: var(--pf-space-2xs) var(--pf-space-md);
  color: var(--pf-hero-meta);
  font-size: var(--pf-text-sm);
}

.pf-hero__meta-label {
  font-weight: var(--pf-weight-medium);
}

.pf-hero__meta-label::after {
  content: ":";
}

/* Llamadas a la acción (reglas de uso 121-122 de DISENO-EXPEDIENTE.md): el
 * primario es el naranja de conversión con texto navy y el secundario un borde de
 * 2 px navy que se invierte al hover. Mismo radio y misma altura en los dos; el
 * borde del primario es transparente para que midan igual uno al lado del otro.
 * Nunca dos primarios en una misma vista: eso lo decide la plantilla con `style`. */
.pf-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-space-xs);
  margin-top: var(--pf-space-xs);
}

.pf-hero--align-center .pf-hero__ctas {
  justify-content: center;
}

.pf-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: var(--pf-space-xs) var(--pf-space-lg);
  border: 2px solid transparent;
  border-radius: var(--pf-radius-control);
  font-size: var(--pf-text-base);
  font-weight: var(--pf-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--pf-transition), color var(--pf-transition), border-color var(--pf-transition);
}

.pf-hero__cta--primary {
  background: var(--pf-hero-cta-bg);
  color: var(--pf-hero-cta-text);
}

/* El hover se queda en la familia del acento (`accent-hover` mantiene 4,7:1 con
 * `on-accent`), así que el texto no cambia ni sobre `invert`. */
.pf-hero__cta--primary:hover,
.pf-hero__cta--primary:focus-visible {
  background: var(--pf-hero-cta-hover-bg);
  color: var(--pf-hero-cta-text);
}

.pf-hero__cta--secondary {
  background: transparent;
  border-color: var(--pf-hero-secondary);
  color: var(--pf-hero-secondary);
}

.pf-hero__cta--secondary:hover,
.pf-hero__cta--secondary:focus-visible {
  background: var(--pf-hero-secondary);
  color: var(--pf-hero-secondary-hover-text);
}

.pf-hero__cta--ghost {
  padding-inline: var(--pf-space-xs);
  background: transparent;
  color: var(--pf-hero-lead);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pf-hero__cta--ghost:hover,
.pf-hero__cta--ghost:focus-visible {
  color: var(--pf-hero-title);
}

/* Imagen destacada: reserva su hueco con la proporción real. */
.pf-hero__media {
  min-width: 0;
  width: 100%;
  aspect-ratio: var(--pf-hero-image-ratio);
  border-radius: var(--pf-radius-card);
  overflow: hidden;
  background: var(--pf-color-bg-alt);
}

.pf-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-hero--align-center .pf-hero__media {
  max-width: 48rem;
  margin-inline: auto;
}

/* Dibujo decorativo de la columna vacía (S5 de la propuesta visual, issue #150).
 * No lleva `aspect-ratio` ni fondo: el SVG trae su propia proporción y es una línea
 * sobre la página, no una tarjeta. Por debajo de 900 px NO se pinta: es decorativo y
 * en móvil solo empujaría el texto hacia abajo. */
.pf-hero__media--figure {
  display: none;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
  background: none;
  color: var(--pf-color-brand);
}

.pf-hero__media--figure > svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Variante split: dos columnas con la imagen —o el dibujo— al lado. */
@media (min-width: 900px) {
  .pf-hero--split.pf-hero--has-image .pf-hero__inner,
  .pf-hero--split.pf-hero--has-figure .pf-hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .pf-hero__media--figure {
    display: block;
  }
}

/* Variante cover: imagen a sangre bajo el texto, con velo opcional. */
.pf-hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.pf-hero__background-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pf-hero--overlay .pf-hero__background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pf-hero-overlay);
}

.pf-hero--cover {
  --pf-hero-padding-block: var(--pf-space-3xl);
}

/* Entrada progresiva del texto, solo con JS y sin preferencia de movimiento reducido. */
.pf-hero.has-js.is-pending .pf-hero__body {
  opacity: 0;
  transform: translateY(var(--pf-space-xs));
}

.pf-hero.has-js .pf-hero__body {
  transition: opacity 360ms ease, transform 360ms ease;
}

@media (max-width: 600px) {
  .pf-hero {
    --pf-hero-padding-block: var(--pf-space-xl);
  }

  .pf-hero--height-full,
  .pf-hero--height-tall {
    min-height: 60vh;
  }

  .pf-hero__cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pf-hero.has-js .pf-hero__body {
    transition: none;
  }
}