/**
 * Mas Vilarmau — _section-system.css
 * ---------------------------------------------------------------------------
 * CAPA FINAL del tema: overrides TRANSVERSALS-POSICIONALS i sistema de seccions
 * que han de tenir l'ÚLTIMA PARAULA de la cascada. Carrega al lloc que ocupaven
 * els sprints (després de mobile-fixes + tota la cadena de components/seccions),
 * de manera que l'ordre de càrrega — i per tant el resultat visual — es preserva.
 *
 * Consolidació F3.3 — dissolució de la capa sprintXX cap a noms honestos:
 *   · A1 (2026-06-24) ← sprint43: PhotoSwipe polish + aria-current al menú (mini-nav mort eliminat).
 *   · A3 (2026-06-24) ← sprint55: lang-switcher dropdown + back-to-top.
 *   · A4 (2026-06-24) ← sprint41: sistema de disseny TRANSVERSAL (paleta aplicada,
 *       microinteraccions premium, hero-meta, badges, focus-rings, btn-text, Reservar
 *       header). Carrega darrere sprint42 — verificat DISJUNT (única intersecció
 *       .section-divider: eixos margin-block/inline i especificitat no conflictius →
 *       pixel-neutre). Bloc situat AL PRINCIPI per preservar «sprint41 abans de A1/A3».
 * ========================================================================= */

/* #################################################################
   HERO DE PÀGINES INTERNES — gran + scrim net, TRANSVERSAL a totes les internes
   (la-masia, allotjament, entorn, com-arribar, preus, contacte). Petició usuari
   2026-06-24: el hero ha de ser igual a totes (mides + scrim de La Masia).
   Carrega després de _sections-responsive → guanya la cascada al mòbil
   (anul·la max-height:400px). Les legals usen .legal-hero (NO afectades).
   ################################################################# */
.page-header-hero::before {
    background:
        radial-gradient(125% 95% at 50% 42%, rgba(22,17,13,.16) 0%, rgba(22,17,13,.46) 100%),
        linear-gradient(to bottom, rgba(22,17,13,.30) 0%, rgba(22,17,13,.04) 40%, rgba(22,17,13,.48) 100%);
}
.page-header-hero {
    height: clamp(540px, 80vh, 760px);
    min-height: 540px;
    padding-top: calc(var(--header-height) * 2);
}
@media (max-width: 768px) {
    .page-header-hero {
        height: clamp(420px, 64vh, 560px);
        min-height: 420px;
        max-height: none; /* anul·la el max-height:400px de _sections-responsive */
    }
}
/* Subtítol del hero: halo fosc per a llegibilitat sobre fons clars (U1, 2026-06-24).
   Manté el to daurat (color a _page-header) i el fa llegible sobre les zones clares de
   les façanes. Transversal a TOTS els heros interns (mateix criteri a totes les pàgines). */
.page-header-hero .page-subtitle {
    text-shadow: 0 0 4px rgba(22, 17, 13, .7), 0 1px 3px rgba(22, 17, 13, .7), 0 2px 14px rgba(22, 17, 13, .5);
}

/* #################################################################
   SISTEMA DE DISSENY TRANSVERSAL + MICROINTERACCIONS  (← sprint41, A4 2026-06-24)
   Era assets/css/sprint41.css (ara breadcrumb). Paleta aplicada a components reals,
   microinteraccions premium, bloc capacitat hero i botó Reservar del header.
   ################################################################# */
/* =================================================================
   A) PALETA APLICADA A COMPONENTS REALS
   ================================================================= */

/* --- A.1 Subtítols de secció: tracking i color daurat pedra --- */
.section-subtitle,
.welcome-text .section-subtitle {
    color: var(--color-stone);
    letter-spacing: 0.32em;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
}

/* --- A.2 Separadors editorials sage→stone --- */
.section-divider,
.section-divider--left {
    height: 2px;
    border: none;
    background: linear-gradient(
        90deg,
        var(--color-sage) 0%,
        var(--color-stone) 100%
    );
    opacity: 0.85;
    margin-block: 12px;
    max-width: 64px;
}
.section-divider--left { margin-inline-start: 0; }

/* --- A.3 CTAs text-secundaris (Descobreix la masia →, Coneix la masia →…) --- */
.btn-text,
.btn-text:visited {
    color: var(--color-sage);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    background-image: linear-gradient(var(--color-sage), var(--color-sage));
    background-size: 0 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 280ms cubic-bezier(.2,.8,.2,1), color 200ms;
    padding-bottom: 2px;
}
.btn-text:hover,
.btn-text:focus-visible {
    background-size: 100% 1.5px;
    color: var(--color-primary);
}

/* btn-text-light al hero (sobre imatge) — manté blanc però amb underline sage al hover */
.btn-text-light,
.btn-text-light:visited {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-decoration: none;
    background-image: linear-gradient(var(--color-sage), var(--color-sage));
    background-size: 0 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 280ms cubic-bezier(.2,.8,.2,1), color 200ms;
    padding-bottom: 2px;
}
.btn-text-light:hover,
.btn-text-light:focus-visible {
    background-size: 100% 1.5px;
    color: #fff;
}

/* --- A.4 Badges (X places) al sage --- */
.room-card .room-badge,
.room-card .badge,
[class*="room-"] [class*="badge"],
.room-places-badge {
    background: var(--color-sage) !important;
    color: #FFFFFF !important;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* --- A.6 Focus rings AAA sage per a tot accessible --- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--color-sage);
    outline-offset: 3px;
    border-radius: 4px;
}

/* =================================================================
   B) BLOC CAPACITAT AL HERO
   ================================================================= */
.hero-meta {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    color: rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.hero-meta__item {
    padding-inline: 18px;
    white-space: nowrap;
}
.hero-meta__sep {
    width: 4px;
    height: 4px;
    background: var(--color-stone);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(168, 128, 74, 0.6);
}
@media (max-width: 600px) {
    .hero-meta {
        font-size: 0.8rem;       /* 2026-07-10: era 0.64rem = 10.2px (terra tipografic) */
        letter-spacing: 0.08em;  /* era 0.1em — compensa l'augment de cos */
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px 4px;
    }
    .hero-meta__item { padding-inline: 8px; }
    /* Amaguem els punts separadors a mòbil: si la meta trenca de línia,
       evitem el separador (·) orfe penjant; els ítems queden separats pel
       padding/gap. */
    .hero-meta__sep { display: none; }
}

/* =================================================================
   B-bis) MAPES — hint del gate tactil en mobil (BLOC B responsive, 2026-07-10)
   El JS (assets/js/map-touch.js) desactiva el `dragging` de Leaflet a <=768px i
   insereix aquest hint dins el contenidor del mapa; el primer tap el desbloqueja
   (classe .mv-map-unlocked) i el hint s'esvaeix.
   `pointer-events:none` es OBLIGATORI: els taps han d'arribar als marcadors i al
   mapa (el gate funcional `mobile-touch` en depen).
   z-index 700 = sobre els panes de Leaflet (200-600), sota els controls (1000).
   ================================================================= */
@media (max-width: 768px) {
    .mv-map-hint {
        position: absolute;
        left: 50%;
        bottom: 12px;
        transform: translateX(-50%);
        z-index: 700;
        pointer-events: none;
        max-width: calc(100% - 24px);
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(43, 33, 27, 0.82);
        color: var(--color-white);
        font-family: var(--font-body);
        font-size: 0.8rem;
        letter-spacing: 0.02em;
        line-height: 1.3;
        white-space: nowrap;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
        transition: opacity 260ms ease, visibility 260ms ease;
    }
    .mv-map-unlocked .mv-map-hint {
        opacity: 0;
        visibility: hidden;
    }
}
@media (min-width: 769px) {
    .mv-map-hint { display: none; }
}

/* =================================================================
   C) MICROINTERACCIONS PREMIUM
   ================================================================= */

/* --- C.1 Cursor pointer a tot el clicable que potser no en té --- */
[role="button"],
button:not([disabled]),
[onclick],
summary {
    cursor: pointer;
}

/* --- C.2 Cards d'espais (.space-card o equivalents) --- */
.space-card,
.section-spaces .card,
.section-spaces .feature-card,
.section-spaces > div > div[class*="card"] {
    transition:
        transform 280ms cubic-bezier(.2,.8,.2,1),
        box-shadow 280ms cubic-bezier(.2,.8,.2,1),
        border-color 200ms;
    will-change: transform;
    cursor: default;
}
.space-card:hover,
.section-spaces .card:hover,
.section-spaces .feature-card:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow:
        0 14px 36px rgba(92, 64, 51, 0.18),
        0 4px 12px rgba(92, 64, 51, 0.08);
}

/* --- C.3 Habitacions: imatge amb zoom subtle al hover --- */
.room-card,
.section-rooms .card,
.section-rooms .room {
    transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms;
    overflow: hidden;
}
.room-card:hover,
.section-rooms .card:hover,
.section-rooms .room:hover {
    transform: translateY(-4px);
    box-shadow:
        0 16px 40px rgba(92, 64, 51, 0.18),
        0 4px 12px rgba(92, 64, 51, 0.08);
}
.room-card img,
.section-rooms img,
.room-thumbnails img {
    transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.room-card:hover img,
.section-rooms .card:hover img,
.section-rooms .room:hover img {
    transform: scale(1.045);
}

/* --- C.4 Botó primari: scale subtle al press --- */
.btn-primary {
    transition:
        transform 160ms cubic-bezier(.2,.8,.2,1),
        box-shadow 200ms,
        background-color 200ms;
    will-change: transform;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(92, 64, 51, 0.28);
}
.btn-primary:active {
    transform: scale(0.97) translateY(0);
    transition-duration: 80ms;
}

/* --- C.5 Galeria horitzontal: zoom subtle de cada item al hover --- */
.gallery-strip-item {
    overflow: hidden;
    border-radius: 6px;
}
.gallery-strip-item picture,
.gallery-strip-item img {
    transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}
.gallery-strip-item:hover picture,
.gallery-strip-item:hover img {
    transform: scale(1.04);
}

/* --- C.6 FAQ accordion: chevron rota + fons sage subtle al ":open" --- */
details summary {
    transition: background-color 200ms, color 200ms;
    list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details[open] > summary {
    background-color: rgba(92, 117, 72, 0.05);
    color: var(--color-primary);
}
details summary svg,
details summary .faq-chevron {
    transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}
details[open] > summary svg,
details[open] > summary .faq-chevron {
    transform: rotate(180deg);
}

/* --- C.7 Reducció de moviment ----- */
@media (prefers-reduced-motion: reduce) {
    .space-card, .room-card, .btn-primary, .gallery-strip-item picture, .gallery-strip-item img,
    .room-card img, .section-rooms img, .room-thumbnails img,
    details summary, details summary svg {
        transition: none !important;
    }
    .space-card:hover, .room-card:hover { transform: none; }
}

/* =================================================================
   E) RESERVAR HEADER refinat
   ================================================================= */
.header-actions .nav-cta a {
    border-radius: 4px;
    background-color: var(--color-primary);
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition:
        transform 160ms cubic-bezier(.2,.8,.2,1),
        box-shadow 200ms,
        background-color 200ms;
    box-shadow: 0 2px 8px rgba(92, 64, 51, 0.12);
}
.header-actions .nav-cta a:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(92, 64, 51, 0.25);
    background-color: var(--color-primary-light, #94655A); /* hover marró vibrant clar */
}
.header-actions .nav-cta a:active {
    transform: scale(0.97);
}

/* (Hero "Descobreix ↓" scroll-indicator eliminat 2026-06-22: codi mort,
   cap element al HTML del hero —ara slideshow— el referencia.) */

/* =================================================================
   PhotoSwipe v5 — polish minimalista  (← sprint43 A)
   Backdrop una mica menys negre + tipografia de marca a comptador/botons/caption.
   ================================================================= */
.pswp__bg {
    background: #1a1a1a;
}
.pswp__counter,
.pswp__button {
    font-family: var(--font-body, sans-serif);
}
.pswp__caption {
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.92);
}

/* =================================================================
   aria-current visible al menú principal  (← sprint43 D)
   ================================================================= */
.main-navigation a[aria-current="page"],
.main-navigation .current-menu-item > a {
    color: var(--color-primary);
    font-weight: 600;
}
.main-navigation a[aria-current="page"]::after,
.main-navigation .current-menu-item > a::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--color-sage);
    width: 50%;
    margin: 4px auto 0;
    border-radius: 1px;
}

/* === Lang switcher dropdown (header) — A3: mogut de sprint55 #3 (2026-06-24). === */
/* =================================================================
   #3 — LANG SWITCHER DROPDOWN
   Visible a desktop al header; a mòbil queda dins el drawer.
   ================================================================= */
.lang-switcher--dropdown {
    position: relative;
    font-size: 0.85rem;
    display: inline-block;
}
.lang-switcher--dropdown .lang-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px 7px 12px;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    border-radius: 4px;
    cursor: pointer;
    transition: background 200ms, color 200ms;
    text-transform: uppercase;
    line-height: 1;
}
.lang-switcher--dropdown .lang-current:hover,
.lang-switcher--dropdown .lang-current[aria-expanded="true"] {
    background: var(--color-cream);
    color: var(--color-primary);
}
.lang-switcher--dropdown .lang-current:focus-visible {
    outline: 2px solid var(--color-sage);
    outline-offset: 2px;
}
.lang-switcher--dropdown .lang-current__chevron {
    width: 10px;
    height: 10px;
    transition: transform 200ms;
}
.lang-switcher--dropdown .lang-current[aria-expanded="true"] .lang-current__chevron {
    transform: rotate(180deg);
}
.lang-switcher--dropdown .lang-options {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 100%;
    background: #fff;
    list-style: none;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 10px 28px rgba(43, 33, 27, 0.14);
    z-index: 200;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 180ms, transform 180ms;
}
.lang-switcher--dropdown[data-open="true"] .lang-options {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.lang-switcher--dropdown .lang-options li {
    margin: 0;
    list-style: none;
}
/* TR-04: l'opcio feia 76x39px (identic en desktop i en mobil). `min-height` + centrat vertical
   la puja a 44px sense tocar el padding ni el text. El desplegable es `position:absolute` i
   esta tancat per defecte -> no mou cap pixel de cap pagina. (2026-07-10, GRUP 2.) */
.lang-switcher--dropdown .lang-options a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border-radius: 3px;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 160ms, color 160ms;
    text-align: left;
    white-space: nowrap;
}
.lang-switcher--dropdown .lang-options a:hover,
.lang-switcher--dropdown .lang-options a:focus-visible {
    background: var(--color-cream);
    color: var(--color-primary);
    outline: none;
}
.lang-switcher--dropdown .lang-options a[aria-current="true"] {
    color: var(--color-primary);
    font-weight: 600;
}

/* Reset estils antics .lang-switcher (no-dropdown) — ja no s'apliquen quan tenim --dropdown */
.header-actions .lang-switcher--dropdown { gap: 0; }

@media (prefers-reduced-motion: reduce) {
    .lang-switcher--dropdown .lang-options { transition: none; }
    .lang-switcher--dropdown .lang-current__chevron { transition: none; }
}


/* === Back-to-top (botó flotant global) — A3: mogut de sprint55 #4 (2026-06-24).
   sprint64 (@768) i sprint63-a11y carreguen després → mantenen l ultima paraula. === */
/* =================================================================
   #4 — BACK TO TOP
   Botó flotant rodó, apareix amb scroll > 600px.
   ================================================================= */
/* F4 (2026-07-10): el cookie banner (z-95) tapava exactament el back-to-top (z-90, 44x44px) i
   el deixava inert. Mentre el banner viu, el boto no s'ofereix; en acceptar/rebutjar torna
   (cookie-banner.js treu la classe `mv-cookies-open`). Mateixa familia que TR-03.
   Especificitat (0,2,1) > `.back-to-top.is-visible` (0,2,0) -> sense !important. */
body.mv-cookies-open .back-to-top {
    visibility: hidden;
    pointer-events: none;
}

.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 240ms ease, transform 240ms cubic-bezier(.2,.8,.2,1), background 200ms;
    box-shadow: 0 6px 20px rgba(43, 33, 27, 0.25);
    padding: 0;
    line-height: 1;
}
.back-to-top.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top:hover {
    background: #5C3A2A;
    transform: translateY(-2px);
}
.back-to-top:active {
    transform: translateY(0);
}
.back-to-top:focus-visible {
    outline: 2px solid var(--color-sage);
    outline-offset: 3px;
}
.back-to-top svg {
    width: 20px;
    height: 20px;
    display: block;
}

@media (max-width: 480px) {
    .back-to-top {
        bottom: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: opacity 100ms, background 100ms;
    }
}

/* ##### CONTRAST WCAG AA (color-contrast, !important) — ← sprint63-a11y, F3.3 Grup-4a 2026-06-24.
   Override transversal-posicional: ha de tenir l ultima paraula sobre .section-subtitle i enllaços legals.
   sprint63-a11y.css queda orfe (CSS); el seu JS (sprint63-a11y.js) es manté enquadrat. ##### */
/* Sprint 6.3 — Fixos accessibilitat WCAG 2.1 AA (color-contrast) */

/*
 * Variable nova per a textos accent stone/sage que necessiten contrast AA (4.5:1 mínim).
 * Es manté --mv-accent-stone (#C49560) per a fons, separadors i elements grans on AA exigeix 3:1.
 */
:root {
}

/* Subtítols de secció (eyebrow) — text petit (~13-14px) requereix 4.5:1 */
.section-subtitle,
.legal-hero__eyebrow,
.preus-intro-content .section-subtitle,
.masia-intro-text .section-subtitle {
  color: var(--color-stone-deep) !important;
}

/* Si en algun context s'utilitza el sage clar per a text petit, també l'enfosquim */
.section-subtitle--sage,
.section-subtitle.sage {
  color: var(--color-sage-deep) !important;
}

/* Enllaços dins el contingut de pàgines legals: sage clar tenia ratio ~3:1 (sub-AA) */
.legal-content-wrap .entry-content a,
.legal-page .entry-content a,
.entry-content a.legal-link {
  color: var(--color-primary) !important; /* marró brand: contrast 6.5:1 sobre cream — AA OK */
  text-decoration-color: var(--color-stone-deep) !important;
}

.legal-content-wrap .entry-content a:hover,
.legal-page .entry-content a:hover {
  color: var(--color-primary-soft) !important;
}