/* =============================================================
   Casona San José — Page Hero
   Hero full-bleed para páginas de servicio (/matrimonios/, etc.).
   Más compacto que el hero del Home; sin video.
   Referencia: PageHero.jsx del design system.
   ============================================================= */


/* -----------------------------------------------------------
   SECCIÓN — full-bleed foto, altura mínima 540px
   ----------------------------------------------------------- */

.csn-pagehero {
  position: relative;
  width: 100%;
  height: 74vh;
  min-height: 540px;
  max-height: 820px;
  overflow: hidden;
  color: var(--color-blanco);
  background-color: var(--color-noche);
  display: flex;
  align-items: flex-end;
}


/* -----------------------------------------------------------
   IMAGEN — background-image decorativa
   ----------------------------------------------------------- */

.csn-pagehero__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(1.03) brightness(0.82);
}


/* -----------------------------------------------------------
   VELO — gradiente de protección para legibilidad.
   Dos capas: scrim lateral izquierdo (zona del texto) + vertical.
   Reforzado 2026-08-26: las fotos reales de Daniel son más
   luminosas que los placeholders y el velo vertical solo no
   protegía la franja media donde vive el H1 y el subtítulo.
   ----------------------------------------------------------- */

.csn-pagehero__veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.62)  0%,
      rgba(0, 0, 0, 0.44) 34%,
      rgba(0, 0, 0, 0.14) 62%,
      rgba(0, 0, 0, 0.05) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.42)  0%,
      rgba(0, 0, 0, 0.10) 32%,
      rgba(0, 0, 0, 0.28) 58%,
      rgba(0, 0, 0, 0.66) 100%
    );
}

/* Mobile: el texto ocupa todo el ancho — el scrim lateral se
   reparte parejo en vez de concentrarse a la izquierda. */
@media (max-width: 768px) {
  .csn-pagehero__veil {
    background:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.50)  0%,
        rgba(0, 0, 0, 0.38) 60%,
        rgba(0, 0, 0, 0.30) 100%
      ),
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.42)  0%,
        rgba(0, 0, 0, 0.12) 32%,
        rgba(0, 0, 0, 0.30) 58%,
        rgba(0, 0, 0, 0.68) 100%
      );
  }
}


/* -----------------------------------------------------------
   INNER — contenido alineado a la izquierda/abajo
   ----------------------------------------------------------- */

.csn-pagehero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
  padding-block-end: clamp(3rem, 6vw, 6rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}


/* -----------------------------------------------------------
   EYEBROW
   ----------------------------------------------------------- */

.csn-pagehero__eb {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-blanco) 90%, transparent);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}


/* -----------------------------------------------------------
   TÍTULO H1
   ----------------------------------------------------------- */

.csn-pagehero__t {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.5rem, 5.5vw, 5rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--color-blanco);
  text-wrap: balance;
  max-width: 20ch;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35);
}

.csn-pagehero__t em {
  font-style: italic;
}


/* -----------------------------------------------------------
   SUBTÍTULO
   ----------------------------------------------------------- */

.csn-pagehero__sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-blanco) 94%, transparent);
  max-width: 56ch;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.60), 0 1px 2px rgba(0, 0, 0, 0.40);
}


/* -----------------------------------------------------------
   CTA
   ----------------------------------------------------------- */

.csn-pagehero__cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  background: var(--color-blanco);
  color: var(--color-noche);
  text-decoration: none;
  transition: background var(--duration-normal) var(--ease-out);
}

.csn-pagehero__cta:hover {
  background: var(--color-piedra);
}

.csn-pagehero__cta svg {
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-out);
}

.csn-pagehero__cta:hover svg {
  transform: translateX(4px);
}


/* -----------------------------------------------------------
   PREFERS-REDUCED-MOTION
   ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .csn-pagehero__cta,
  .csn-pagehero__cta svg {
    transition: none;
  }
  .csn-pagehero__cta:hover svg {
    transform: none;
  }
}