/**
 * Mas Vilarmau — Sprint 6.4 (Passada 3): POLISH DE PROPORCIONS
 * ---------------------------------------------------------------------------
 * Full que carrega l'ÚLTIM (després de sprint63-a11y) → té l'última paraula
 * sobre espais, alineació i ritme vertical de la PORTADA. Tot deriva dels
 * tokens d'espaiat 8pt definits a style.css (:root). Cap valor màgic nou.
 *
 * Objectius (crítica de l'usuari: «espais/proporcions no prou professionals»):
 *   1. Ritme vertical ÚNIC a totes les seccions de la home.
 *   2. Hero: escala d'espais regular + separar preu de l'scroll-indicator.
 *   3. Estacions: graella FIXA (4 col desktop · 2×2 tablet · 1 col mòbil),
 *      sense fletxes ni comptador.
 *   4. Espais: fletxes FORA del track (mai solapant targetes).
 *   5. CTA d'habitacions centrat.
 *   6. Testimonis: retallar l'aire superior excessiu.
 *   + Polish transversal: gutters iguals, aspect-ratios consistents.
 *
 * Tot amb CSP estricta (zero inline, zero JS aquí). WCAG AA preservat.
 * ========================================================================= */

/* =================================================================
   0) RITME VERTICAL UNIFICAT
   Totes les seccions de la home comparteixen la mateixa cadència
   vertical (--section-pad-y). Substitueix els paddings heterogenis
   (60px token vell · 100px hard-coded testimonis · clamp estacions).
   ================================================================= */
/* Passada 6 (2026-06-19): ritme uniforme compacte (transicions ~80px).
   Abans anava de 56px a 240px (incoherent). Selectors corregits perquè
   coincideixin amb el DOM real: .section-entorn (no .section-entorn-home,
   que no existeix al PHP) + s'afegeixen .section-gallery-strip i
   .section-contact-quick (estaven fora del sistema). 40px = 5×8 (8pt). */
.section-welcome,
.section-gallery-strip,
.section-spaces,
.section-rooms,
.section-seasons,
.section-testimonials,
.section-entorn,
.section-faq,
.section-contact-quick {
    padding-block: 40px;
}

/* El padding del .section-cta-banner (var(--space-lg)) està plegat a components/_entorn-cta.css (F3.2, 2026-06-22). */

/* Marge superior coherent entre la capçalera de secció i el seu contingut.
   Unifica els márgenes díspars (.card-carousel 56px / 44px, grids 60px). */
.section-spaces .card-carousel,
.section-rooms .rooms-teaser-grid,
.section-rooms .rooms-grid,
.section-seasons .seasons-grid {
    margin-top: var(--space-xl);
}

/* =================================================================
   1) HERO — el contingut MAI sota la capçalera fixa OPACA (91px)
   ---------------------------------------------------------------
   La capçalera és position:fixed i OPACA (fons blanc). El hero té
   margin-top:-90px (full-bleed sota la capçalera) + padding-top de
   l'alçada de capçalera. Amb align-items:center, un .hero-content
   més alt que l'espai útil es repartia simètricament i el subtítol
   pujava SOTA la capçalera en viewports baixos (1366×768, 1920×800).

   FIX ROBUST a qualsevol alçada:
   · El centrat es fa amb margin-block:auto (no align-items:center).
     En flexbox, quan el contingut és més alt que el contenidor, els
     margins auto col·lapsen a 0 i el bloc s'ANCORA a flex-start
     (respectant el padding-top) en lloc de desbordar cap amunt.
   · .hero-content reserva l'alçada de la capçalera + aire com a
     padding-top de guàrdia: el subtítol queda SEMPRE per sota dels
     91px, a qualsevol alçada de viewport.
   · Sense scroll-indicator: el padding inferior torna a ser simètric
     i el bloc queda òpticament centrat dins l'espai disponible.
   ================================================================= */

/* El contingut s'autocentra amb margins auto: centrat si hi ha espai,
   ancorat a dalt (sota la capçalera) si el viewport és baix. */
.hero-section {
    align-items: stretch; /* deixem que .hero-content gestioni el centrat */
}
.hero-section .hero-content {
    width: 100%;
    /* Guàrdia: alçada capçalera (91px) + aire perquè el subtítol no hi toqui.
       El padding inferior és menor (ja no hi ha scroll-indicator) i deixa el
       bloc òpticament equilibrat. */
    padding-top: calc(var(--header-height) + var(--space-lg));
    padding-bottom: var(--space-2xl);
    /* Centrat vertical robust: amb espai sobrant, els auto reparteixen;
       amb dèficit, col·lapsen a 0 i el contingut queda ancorat a dalt. */
    margin-block: auto;
}

/* Cadència vertical regular entre els elements del hero (override dels
   margin-bottom heterogenis: 40px subtitle, 20px h1, 50px desc...). */
.hero-section .hero-subtitle   { margin-bottom: var(--space-sm); }
.hero-section .hero-title      { margin-bottom: var(--space-sm); }
.hero-section .hero-description { margin-bottom: var(--space-md); }
.hero-section .hero-meta       { margin-top: 0; margin-bottom: var(--space-lg); }

/* Accions del hero: centrades amb gap coherent (abans no tenien regla → es
   mostraven en línia base sense control). Amb 1 sol botó queda equilibrat. */
.hero-section .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin: 0;
}

/* Preu: tancament del bloc amb aire coherent respecte a les accions. */
.hero-section .hero-price {
    margin-top: var(--space-md);
    margin-bottom: 0;
}

/* =================================================================
   2) ESTACIONS → GRAELLA FIXA (no carrusel)
   El JS ja NO l'autoplay (no té data-carousel-autoplay) i el tractem
   visualment com a graella. Amaguem fletxes i comptador.
   4 col ≥1024px · 2×2 600–1023px · 1 col <600px.
   ================================================================= */
.card-carousel--seasons {
    margin-top: var(--space-xl);
    position: static; /* ja no cal context per a fletxes absolutes */
}

/* El track deixa de ser un carrusel scroll-snap i passa a graella. */
.card-carousel--seasons .card-carousel__track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
}

/* Les targetes ja no necessiten flex-basis ni snap. */
.card-carousel--seasons .card-carousel__item {
    flex: initial;
    width: auto;
    scroll-snap-align: none;
}

/* Amaga controls del carrusel a estacions (fletxes + comptador). */
.card-carousel--seasons .card-carousel__arrow,
.card-carousel--seasons .card-carousel__count {
    display: none !important;
}

/* La targeta d'estació ocupa tota l'alçada de la cel·la per igualar files. */
.card-carousel--seasons .season-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.card-carousel--seasons .season-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Aspect-ratio consistent de les fotos d'estació dins la graella. */
.card-carousel--seasons .season-card-media {
    aspect-ratio: 4 / 3;
}

@media (max-width: 1023px) {
    .card-carousel--seasons .card-carousel__track {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
}
@media (max-width: 599px) {
    .card-carousel--seasons .card-carousel__track {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    /* 2026-07-10 (BLOC C responsive) — la targeta d'estacio duu la descripcio sencera, o sigui
       que NO va a 2 columnes (seria il·legible). Compactem la mitja (4/3 -> 16/9: son fotos de
       paisatge, el crop no els fa mal) i tanquem el body: 2.268px -> 1.935px de seccio.
       Viu aqui i no a _card-carousel.css perque sprint64 defineix l'aspect-ratio base (4/3) i
       carrega l'ULTIM: al component perdria la cascada. */
    .card-carousel--seasons .season-card-media { aspect-ratio: 16 / 9; }
    .card-carousel--seasons .season-card-body { padding: 14px 16px 16px; }
}

/* =================================================================
   3) ESPAIS — fletxes FORA del track (mai sobre les targetes)
   Reservem marge horitzontal al carrusel i empenyem les fletxes
   cap a fora amb prou contrast.
   ================================================================= */
.section-spaces .card-carousel {
    position: relative;
    /* marge perquè les fletxes (fora) no es retallin dins el container */
    padding-inline: clamp(0px, 4vw, 56px);
}

/* Fletxes situades al marge exterior reservat, no sobre les targetes.
   Alineades verticalment amb el centre de la IMATGE (zona visual dominant),
   no amb el centre del bloc imatge+text (quedarien massa baixes). */
.section-spaces .card-carousel .card-carousel__arrow--prev {
    left: 0;
}
.section-spaces .card-carousel .card-carousel__arrow--next {
    right: 0;
}
.section-spaces .card-carousel .card-carousel__arrow {
    top: 30%;
    background: var(--color-white);
    box-shadow: 0 6px 22px rgba(92, 64, 51, 0.20);
    border-color: var(--color-border);
}

/* El track no es retalla per sota de les fletxes: comença després del marge.
   (el padding-inline del wrapper ja ho garanteix; el track ompla la resta) */
.section-spaces .card-carousel .card-carousel__track {
    padding-inline: 2px;
}

/* En pantalles estretes (<1024px) no hi ha espai per a fletxes fora:
   tornem a amagar-les i deixem el swipe com a interacció natural. */
@media (max-width: 1023px) {
    .section-spaces .card-carousel {
        padding-inline: 0;
    }
    .section-spaces .card-carousel .card-carousel__arrow {
        display: none;
    }
}

/* Amb autoplay (bucle infinit continu) el comptador "X/6" no aporta —
   parpellejaria amb el scroll continu. L'amaguem; les fletxes resten per a
   navegació manual (i, en clicar-les, l'autoplay s'atura i torna el snap). */
.section-spaces .card-carousel[data-carousel-autoplay] .card-carousel__count {
    display: none;
}

/* Targetes d'espais: el text s'agrupa a dalt (no space-between) per evitar
   el buit inferior amb descripcions curtes. Proporció imatge/text més neta. */
.section-spaces .space-card-content {
    justify-content: flex-start;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-sm) var(--space-md);
}
.section-spaces .space-card-title {
    margin-bottom: 0;
}
.section-spaces .space-card-content p {
    margin-bottom: 0;
}

/* CTA "Veure tots els espais": centrat i amb aire coherent. */
.section-spaces .spaces-cta {
    margin-top: var(--space-lg);
    text-align: center;
}

/* =================================================================
   4) CTA centrat (habitacions i genèric)
   .section-cta no tenia regla pròpia → els botons quedaven a
   l'esquerra. Els centrem de manera consistent a tota la home.
   ================================================================= */
.section-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
    margin-top: var(--space-lg);
}
.section-rooms .rooms-teaser-note {
    text-align: center;
    margin-top: var(--space-lg);
}

/* =================================================================
   5) TESTIMONIS — banda compacta (títol + 2 botons). El padding vertical
   el dóna ara el ritme uniforme (bloc 0); mantenim només els marges interns.
   ================================================================= */
.section-testimonials .section-header {
    margin-bottom: var(--space-md);
}
.section-testimonials .testimonials-links-block {
    margin-top: 0; /* el header ja aporta l'aire; evitem doble separació */
    text-align: center;
}

/* =================================================================
   6) POLISH TRANSVERSAL — gutters iguals i capçaleres de secció
   Ritme intern coherent capçalera → contingut a tota la portada.
   ================================================================= */
.section-spaces .section-header,
.section-rooms .section-header,
.section-seasons .section-header {
    margin-bottom: var(--space-lg);
}

/* El divisor + descripció de capçalera amb passos regulars. */
.section-header .section-divider {
    margin-block: var(--space-xs);
}
.section-header .section-desc {
    margin-top: var(--space-xs);
}

/* Vídeo tour: separació coherent respecte al carrusel d'espais (a sobre). */
.section-spaces .video-tour-section {
    margin-top: var(--space-xs); /* Passada 8: 16px — el player puja arran del CTA, sense franja beix */
}

/* Passada 6 (2026-06-19): els overrides per-transició de la Passada 5
   (.section-spaces padding-bottom, welcome/gallery, spaces+rooms,
   seasons/testimonials) queden substituïts pel ritme uniforme de 40px
   del bloc 0. Eliminats per garantir una cadència coherent a tota la home. */

/* Punt 1 (fix) — el botó "Descobrir l'entorn" (btn-outline) quedava enganxat (0px)
   a l'últim destacat "El Camí Groc". Li donem la separació coherent amb la resta
   de botons-enllaç de la home (Benvinguts ~35px, Espais 48px). */
.section-entorn .entorn-text .btn {
    margin-top: var(--space-md); /* 32px */
}

/* =================================================================
   PASSADA 6 (2026-06-19) — M1: indicador de focus UNIFICAT i visible
   Hi havia 3 colors de focus en conflicte (marró a style.css, verd sage a
   sprint55/56/59/61, verd bosc a media-sections); el verd sage fallava 3:1
   sobre crema. Unifiquem amb un ANELL DOBLE (outline marró + halo blanc),
   visible sobre QUALSEVOL fons (clar o fosc). Carrega l'últim → guanya.
   ================================================================= */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--color-primary) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.92) !important;
    border-radius: 4px;
}

/* =================================================================
   PASSADA 7 (2026-06-19) — Zona del VÍDEO TOUR compacta
   El .video-tour-section tenia padding propi 60px + margin-top 80px + un
   fons crema->blanc que creava un bloc beix sobre/sota el player. El
   compactem: el vídeo s'acosta al CTA "Veure tots els espais" (dalt) i a
   "Allotjament" (baix). Excepció deliberada al ritme uniforme: aquesta zona
   té contingut lleuger i l'espai s'hi percebia buit. */
.section-spaces {
    padding-bottom: var(--space-sm); /* 24px — tancament d'spaces sota el vídeo */
}
.section-spaces + .section-rooms {
    padding-top: var(--space-sm); /* 24px — Allotjament s'acosta al vídeo */
}

/* =================================================================
   PASSADA 8 (2026-06-19) — Eliminar les franges beix dels gradients
   El .video-tour-section (gradient crema->blanc) i la .section-gallery-strip
   (gradient blanc->crema) deixaven veure una franja crema pels paddings. La
   banda de la galeria s'enganxa a baix (padding-bottom 0) perquè el gradient
   quedi tapat i no es vegi la franja beix inferior. (El vídeo: padding-top 0
   a media-sections.css.) */
.section-gallery-strip {
    padding-bottom: 0;
}

/* =================================================================
   PASSADA 9 (2026-06-19) — Responsive home (mòbil + tablet)
   Overrides finals (sprint64 carrega l'ÚLTIM → última paraula).
   ================================================================= */
/* Tablet: les targetes dels carrusels tenien flex-basis 82% (pensat per a
   mòbil) aplicat fins a 768 → es veia ~1,3 targeta. En tauleta mostrem
   2 targetes senceres + peek del següent. */
@media (min-width: 600px) and (max-width: 768px) {
    .card-carousel__item { flex-basis: 46%; }
    .card-carousel--seasons .card-carousel__item { flex-basis: 46%; }
}
/* Respir galeria→espais: la Passada 8 va deixar .section-gallery-strip amb
   padding-bottom:0 (per amagar la franja beix del gradient) → la transició a
   "Espais" quedava massa tancada (40px vs ~80px de la resta). Recuperem ~24px
   amb un margin EXTERIOR (fora del gradient, no reintrodueix la franja). */
.section-gallery-strip {
    margin-bottom: var(--space-sm);
}
/* back-to-top: en mòbil/tauleta la barra de reserva fixa (.mobile-book-bar,
   ~69px d'alt, bottom 0) se solapava amb el botó "amunt". L'apugem perquè
   quedi just damunt la barra i sigui accessible. */
@media (max-width: 768px) {
    .back-to-top.is-visible {
        bottom: calc(90px + env(safe-area-inset-bottom, 0px)); /* U4 2026-06-24: +gap sobre book-bar (era 76px, gap 7px → ~21px) */
    }
}

/* ============ G4 acabats mòbil (auditoria 2026-06-20) ============ */
/* B2 — CTA primari del hero: més presència a mòbil (era ~0.8rem/12.8px), just per a
   un botó de conversió premium. Només el hero, només mòbil; no toca la resta de botons. */
@media (max-width: 600px) {
    .hero-section .hero-actions .btn {
        font-size: 0.9rem;
    }
}
/* B1 — target tàctil del logo ≥44px a mòbil (l'enllaç feia 40px d'alt). Amplia
   només l'àrea clicable; no canvia la mida visual del logotip. */
@media (max-width: 768px) {
    .site-logo > a,
    .site-logo .custom-logo-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}