/* ===========================
   PAGE HEADER HERO (shared across all inner pages)
   =========================== */
.page-header-hero {
    position: relative;
    /* Sprint 5.0 — Issue #014: heros més alts per a més presència visual */
    height: clamp(420px, 62vh, 580px);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    /* Cinturo: si algu torna a moure `background-position-y` (el parallax JS que ho feia va
       ser eliminat el 2026-07-10), el `repeat` per defecte reomplia el buit amb el capdamunt
       de la imatge i deixava una costura. Amb `no-repeat` no pot passar. */
    background-repeat: no-repeat;
    margin-top: calc(-1 * var(--header-height));
    padding-top: var(--header-height);
    overflow: hidden;
}
@media (max-width: 768px) {
    .page-header-hero {
        height: clamp(340px, 50vh, 440px);
        min-height: 340px;
    }
}

.page-header-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(92, 64, 51, 0.6) 0%,
        rgba(45, 90, 39, 0.5) 100%
    );
    z-index: 1;
}

.page-header-hero .page-title {
    position: relative;
    z-index: 2;
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 7vw, 4.5rem);
    font-weight: 700;
    color: var(--color-white);
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    margin-bottom: 10px;
}

.page-header-hero .page-subtitle {
    position: relative;
    z-index: 2;
    font-family: var(--font-accent);
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
    color: var(--color-accent-light);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}


/* ===========================
   CWV-02 (2026-10-21) — LA FOTO DE LA CAPÇALERA ÉS UN <picture>, NO UN FONS CSS
   Abans: background-image inline d'un JPG de 1920 px (650 KB-1 MB) = l'element LCP de les internes, sense AVIF/WebP,
   sense variants ni prioritat. Ara: <picture class="page-header-hero__media"> (template-parts/page-header.php) amb
   les variants 768/1280/1920 en AVIF/WebP/JPEG, eager i fetchpriority="high". Mateix aspecte: object-fit:cover i
   object-position:center = el background-size:cover + background-position:center d'abans.
   =========================== */
.page-header-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0; /* sota el ::before (scrim, z-index 1) i el títol (z-index 2) */
    display: block;
}
.page-header-hero__media > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
}

/* Parallax d'escriptori: el mateix efecte que el background-attachment:fixed que hi havia (style.css: fixed per sobre
   de 768 px; scroll fins a 768 i amb moviment reduït). La foto es fixa a la finestra (cover de la finestra, com un
   fons fix) i el clip-path de la secció la retalla: només se'n veu la part que queda darrere la capçalera.
   «hover + pointer fine»: on el fixed d'abans es veia de debò. Safari d'iOS/iPadOS l'ignorava (s'hi veia quiet, com
   scroll), i els iPad fan més de 768 px: sense aquesta condició, hi apareixeria un parallax que no hi era.
   ⚠️ L-CT: cap ancestre de la secció no pot portar transform/filter/will-change/contain (atraparien el fixed).
   Verificat el 2026-10-21: la imatge mesura exactament la finestra a 1024, 1440 i 1920. */
@media (min-width: 769px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .page-header-hero--picture {
        clip-path: inset(0);
    }
    .page-header-hero--picture .page-header-hero__media > img {
        position: fixed;
    }
}

/* ===========================
   ONP-01 (2026-10-21) — L'H1 PORTA EL TÍTOL I EL SUBTÍTOL
   La línia daurada (.page-subtitle) era un <p> germà de l'h1: l'h1 deia una sola paraula («Allotjament»). Ara és un
   <span> DINS de l'h1, amb la mateixa classe, i aquestes regles en reprodueixen la geometria d'abans:
   · display:block i pes 400 (dins de l'h1 n'heretaria el 700) i l'interlineat del <p> (1,7; 1,45 fins a 480 px,
     mobile-fixes.css), no el de l'h1 (1,2);
   · 20 px de separació = els 10 de margin-bottom de l'h1 + els 10 de margin-top del <p> d'abans (en flex no
     col·lapsen);
   · el marge inferior del <p> (1,2em, regla base de p) es queda dins de l'h1 i l'h1 perd el seu: el bloc centrat
     fa la mateixa alçada i no es mou.
   =========================== */
.page-header-hero .page-title .page-title__main {
    display: block;
}
.page-header-hero .page-title .page-subtitle {
    display: block;
    font-weight: 400;
    line-height: 1.7;
    margin-top: 20px;
    margin-bottom: 1.2em;
}
.page-header-hero .page-title:has(.page-subtitle) {
    margin-bottom: 0;
}
@media (max-width: 480px) {
    .page-header-hero .page-title .page-subtitle {
        line-height: 1.45;
    }
}