/* ==========================================================================
   Lifestyle — shell de imagen estática
   El título depth vive en template-parts/depth-title.php + depth-hero.css
   (componente aislado — no redefinir aquí soft/sharp/mask).
   ========================================================================== */

.life-hero {
  --ink: #2a5128;
  --bg: #fefaf7;
  --veil-color: var(--bg);
  --veil-opacity: 0.55;
  --chrome-color: #fefaf7;
  --chrome-font: var(--font-sans, "DM Sans", system-ui, sans-serif);
  --sharp-mask: radial-gradient(
    ellipse 36% 36% at 50% 50%,
    #000 0%,
    rgba(0, 0, 0, 0.88) 50%,
    transparent 90%
  );
  position: relative;
  width: 100%;
  height: min(88svh, 920px);
  min-height: 480px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  cursor: default;
}

.life-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.life-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Velo regulable (color + opacidad desde meta) */
.life-hero > .hero-veil {
  z-index: 1;
  background: var(--veil-color, var(--bg));
  opacity: var(--veil-opacity);
}

.life-hero .hero-title {
  font-family: var(--font-display, "Cormorant Garamond", Garamond, ui-serif, Georgia, serif);
  font-weight: 500;
  color: var(--ink);
}

/* Bandas de lectura: labels de esquina sobre foto clara/oscura */
.life-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(26, 20, 17, 0.38) 0%, transparent 26%),
    linear-gradient(0deg, rgba(26, 20, 17, 0.42) 0%, transparent 30%);
}

.life-hero .hero-chrome {
  color: var(--chrome-color);
  font-family: var(--chrome-font);
}
.life-hero .hero-chrome .label {
  color: inherit;
  font-family: inherit;
  font-weight: 500;
  letter-spacing: 0.14em;
  /* Dual shadow: legible con chrome claro u oscuro sobre espuma/cielo */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 0 14px rgba(0, 0, 0, 0.4),
    0 0 1px rgba(254, 250, 247, 0.35);
}

.life-hero .hero-hint {
  color: var(--ink);
}

@media (min-width: 768px) {
  .life-hero { min-height: 560px; }
}

@media (max-width: 767px) {
  .life-hero {
    height: min(78svh, 720px);
    min-height: 420px;
  }
  /* Sin efecto depth/hover: título nítido y legible */
  .life-hero .hero-title-soft {
    display: none !important;
  }
  .life-hero .hero-title-sharp {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .life-hero .hero-title-wrap {
    padding: 0;
    margin: 0;
    transform: none !important;
    will-change: auto;
  }
  .life-hero .hero-title {
    font-size: clamp(2.75rem, 14vw, 4.5rem);
    white-space: normal;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.35),
      0 4px 24px rgba(0, 0, 0, 0.25);
  }
  .life-hero .hero-chrome--top { padding-top: 96px; }
  .life-hero .hero-chrome--bottom { padding-bottom: 28px; }
  .life-hero .hero-chrome .label {
    font-size: 0.6875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .life-hero .hero-title-soft {
    display: none !important;
  }
  .life-hero .hero-title-sharp {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .life-hero .hero-title-wrap {
    padding: 0;
    margin: 0;
    transform: none !important;
  }
}