/*
 * Villa Pojana — intestazione "page-hero"
 * ------------------------------------------------------------------
 * Intestazione scura con eyebrow, titolo e testo introduttivo, con
 * arco della Serliana in filigrana facoltativo (assente in "Educazione"
 * e "Calendario"): comune alle pagine interne "Visita", "Scopri",
 * "Educazione" e "Calendario" (vp/page-hero-visita, vp/page-hero-scopri,
 * vp/page-hero-educazione, vp/page-hero-calendario), e dalla pagina 404
 * (404.php). Caricato solo su queste pagine, vedi
 * villa_pojana_enqueue_assets() in functions.php.
 *
 * Variabili, reset, header/topbar, navigazione, .section base e
 * pair-block/editorial/newsletter/footer sono in main.css.
 */

.page-hero {
  background: var(--ink); color: var(--paper);
  padding: 200px 48px 100px; position: relative; overflow: hidden;
}
.page-hero-inner { max-width: 1440px; margin: 0 auto; }
.page-hero-eyebrow {
  font-size: 11px; letter-spacing: 0.28em; color: var(--terracotta-soft);
  text-transform: uppercase; font-weight: 600; margin-bottom: 28px;
  display: flex; align-items: center; gap: 12px;
}
.page-hero-eyebrow::before { content: ''; width: 24px; height: 1.5px; background: var(--terracotta-soft); }
.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(50px, 7vw, 96px);
  line-height: 0.95; font-weight: 300; letter-spacing: -0.04em;
  font-variation-settings: 'opsz' 144, 'SOFT' 30; max-width: 820px;
}
.page-hero-title em { font-style: italic; color: var(--terracotta-soft); font-variation-settings: 'opsz' 144, 'SOFT' 100; }
.page-hero-lead {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.6; color: rgba(250,246,236,0.72); max-width: 560px; margin-top: 36px;
  font-variation-settings: 'opsz' 24, 'SOFT' 50;
}
.page-hero-arch {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  opacity: 0.04; pointer-events: none; width: min(520px, 42vw);
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .page-hero { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 640px) {
  .page-hero {
    padding-left: 20px; padding-right: 20px;
    padding-top: 140px; padding-bottom: 60px;
  }
}