/**
 * Mas Vilarmau — mobile UX fixes
 *
 * Targets specific responsive issues found at viewports ≤ 480px:
 *  - Hero scroll indicator overlapping the price text on the homepage.
 *  - Page-subtitle text clipped on internal page hero (Preus, Allotjament, etc.).
 *  - Hamburger menu missing language switcher + "Reservar" CTA.
 */

/* ============================
   INNER PAGES — .page-subtitle
   ============================ */

.page-header-hero {
    padding-inline: 20px;
}

@media (max-width: 480px) {
    .page-subtitle {
        font-size: clamp(0.78rem, 2.5vw, 0.9rem);
        letter-spacing: 0.12em; /* down from 0.15em */
        line-height: 1.45;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
    .page-header-hero {
        padding-inline: 24px;
    }
}

/* ============================
   MOBILE MENU EXTRAS
   ============================ */

.mobile-menu-extras {
    display: none;
}

@media (max-width: 1099px) { /* 2026-10-21: abans 768, el mateix punt de tall que el menú hamburguesa (style.css) */
    /* Show language switcher + Reservar inside the open mobile menu */
    .main-navigation.active .mobile-menu-extras {
        display: flex;
        flex-direction: column;
        gap: 18px;
        align-items: center;
        margin-top: 32px;
        padding-top: 24px;
        border-top: 1px solid rgba(92, 64, 51, 0.15);
        width: 80%;
        max-width: 280px;
        margin-inline: auto;
    }

    /* Language switcher inside the mobile menu — slightly larger tap area */
    .mobile-menu-extras .wpml-ls-statics-shortcode_actions,
    .mobile-menu-extras .language-switcher {
        display: flex;
        gap: 16px;
        font-size: 1rem;
    }
    .mobile-menu-extras .language-switcher a,
    .mobile-menu-extras .language-switcher .current {
        padding: 8px 14px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 0.06em;
        font-size: 0.85rem;
    }

    /* "Reservar" CTA — proporcionat, NO estirat a tot l'ample (es veia com
       una barra marró massa ampla, ~201px, amb el text nedant-hi al mig).
       Amplada natural + padding generós, centrat pel flex del contenidor. */
    .mobile-menu-extras .nav-cta {
        width: auto;
    }
    .mobile-menu-extras .nav-cta a {
        display: inline-block;
        text-align: center;
        padding: 14px 36px;
        background: var(--color-primary);
        color: var(--color-white);
        border-radius: 6px;
        font-weight: 600;
        text-decoration: none;
        letter-spacing: 0.08em;
    }

    /* Visually hide the duplicate language switcher / CTA that sit in the
       outer .header-actions on mobile (they are not reachable when the menu
       is open and would duplicate the ones inside). The hamburger stays. */
    .main-navigation.active ~ .header-actions .language-switcher,
    .main-navigation.active ~ .header-actions .nav-cta {
        visibility: hidden;
    }
}

/* ============================
   TESTIMONIALS · external review CTAs
   ============================ */

.testimonials-cta {
    margin-top: 48px;
    text-align: center;
}
.testimonials-cta-text {
    font-size: 0.9rem;
    color: var(--color-text-light, #6b5d52);
    letter-spacing: 0.04em;
    margin-bottom: 18px;
}
.testimonials-cta-links {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.testimonials-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid rgba(92, 64, 51, 0.25);
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-primary, #5C4033);
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.testimonials-cta-link:hover,
.testimonials-cta-link:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(92, 64, 51, 0.12);
    border-color: var(--color-primary, #5C4033);
}
.testimonials-cta-link svg {
    color: #d4a017; /* warm gold star */
    fill: #d4a017;
    stroke: #d4a017;
}
@media (max-width: 480px) {
    .testimonials-cta-link {
        width: 100%;
        justify-content: center;
    }
    .testimonials-cta-links {
        flex-direction: column;
        width: 100%;
    }
}

/* ============================
   HEADER LOGO — slightly tighter
   on very narrow phones, keep the
   header at ≤ 64px tall.
   ============================ */
@media (max-width: 480px) {
    .site-header .header-inner {
        padding-block: 8px;
    }
    .site-logo img,
    .site-logo .custom-logo-link img {
        max-height: 48px;
        width: auto;
    }
}

/* =================================================================
   SPRINT 4.0 — HOTFIX (2026-05-13)
   1) Hero slideshow CSS-only (Ken Burns + crossfade) — substitueix el vídeo
   2) Touch targets mòbil ≥44px (Apple HIG / WCAG)
   3) Gallery strip arrows fix — fora del flux del gradient lateral
   ================================================================= */

/* ----- 1) Hero slideshow Ken Burns ----- */
.hero-section--slideshow { position: relative; overflow: hidden; }
.hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    will-change: opacity, transform;
    animation: mv-hero-fade 32s infinite cubic-bezier(.45,.05,.55,.95);
}
/* 4 slides, 8s cadascuna en cicle de 32s, sense flash inicial.
   CWV-01 (2026-10-21): la slide 1 es pinta VISIBLE I QUIETA al primer frame (opacitat 1 de base, cap animació
   fins als 2 s) i tot el cicle es desplaça 2 s. Les slides 2 i 3 conserven el seu lloc al cicle (delays negatius:
   a t=0 són a opacitat 0). La 4 no pot: amb el cicle desplaçat, a t=0 encara seria al final del seu torn (visible
   per sobre de la 1). Per això fa servir mv-hero-fade-4, el mateix cicle girat un quart: comença amagada.
   Mateixa seqüència i mateixos fosos que abans; la 1a slide simplement dura 2 s més la primera vegada. */
.hero-slide--1 { opacity: 1; animation-delay: 2s; }
.hero-slide--2 { animation-delay: -22s; }  /* visible cap a t=10s */
.hero-slide--3 { animation-delay: -14s; }  /* visible cap a t=18s */
.hero-slide--4 { animation-name: mv-hero-fade-4; animation-delay: 2s; }  /* visible cap a t=26s */
.hero-slide picture,
.hero-slide picture.hero-slide-img,
.hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    will-change: transform;
}
/* L'img dins del <picture> SEMPRE omple tot el contenidor */
.hero-slide picture > img,
.hero-slide picture.hero-slide-img > img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    max-width: none;
    will-change: transform;
}
.hero-slide picture img {
    animation: mv-hero-kenburns 32s infinite ease-in-out;
    /* = 1r fotograma del Ken Burns: la slide 1 hi és quieta fins als 2 s, i en arrencar no salta (CWV-01) */
    transform: scale(1.04) translate3d(-0.5%, -0.3%, 0);
}
.hero-slide--1 picture img,
.hero-slide--1 img.hero-slide-img { animation-delay:   2s; }
.hero-slide--2 picture img,
.hero-slide--2 img.hero-slide-img { animation-delay: -22s; }
.hero-slide--3 picture img,
.hero-slide--3 img.hero-slide-img { animation-delay: -14s; }
.hero-slide--4 picture img,
.hero-slide--4 img.hero-slide-img { animation-delay:  -6s; }
/* CWV-06 (2026-10-22): les slides 2-4 no es baixen fins després de l'event load (front-page.php + main.js). Mentre
   el contenidor porta [data-mv-espera], TOT el cicle (fosos i Ken Burns) és aturat al temps 0, que és exactament el
   que es pinta en carregar: la slide 1 visible i quieta, la resta a opacitat 0. main.js treu l'atribut quan les tres
   imatges són descodificades, i el cicle arrenca des del principi (els 2 s de la slide 1 compten des d'aquí). Sense JS,
   o si alguna imatge falla, el hero es queda a la slide 1: mai no es destapa una slide buida. */
.hero-slideshow[data-mv-espera] .hero-slide,
.hero-slideshow[data-mv-espera] .hero-slide picture img { animation-play-state: paused; }

@keyframes mv-hero-fade {
    /* 4 slides amb solapament: cada slide visible ~22% del cicle (~7s) de 32s */
    0%, 22%   { opacity: 1; }     /* visible el seu torn */
    25%, 96%  { opacity: 0; }     /* invisible la resta */
    100%      { opacity: 1; }     /* loop/crossfade suau (== 0%) */
}
/* mv-hero-fade girat un quart de cicle (8 s): fotograma p = fotograma p+25 % de l'original. Només la slide 4. */
@keyframes mv-hero-fade-4 {
    0%, 71%   { opacity: 0; }
    75%, 97%  { opacity: 1; }
    100%      { opacity: 0; }
}
@keyframes mv-hero-kenburns {
    0%      { transform: scale(1.04) translate3d(-0.5%, -0.3%, 0); }
    25%     { transform: scale(1.12) translate3d( 0.5%,  0.3%, 0); }
    96%     { transform: scale(1.12) translate3d( 0.5%,  0.3%, 0); }
    100%    { transform: scale(1.04) translate3d(-0.5%, -0.3%, 0); }
}

/* Respect reduced motion: freeze on first frame, no kenburns, no crossfade */
@media (prefers-reduced-motion: reduce) {
    .hero-slide { animation: none; }
    .hero-slide--1 { opacity: 1; }
    .hero-slide--2, .hero-slide--3, .hero-slide--4 { opacity: 0; }
    .hero-slide picture img,
    .hero-slide img.hero-slide-img { animation: none; transform: none; }
}

/* ----- 2) Touch targets mòbil ≥ 44px ----- */
@media (max-width: 1099px) { /* 2026-10-21: el menú hamburguesa fins a 1099px (style.css) */
    /* Hamburguesa */
    .menu-toggle {
        min-height: 48px;
        min-width: 48px;
        padding: 10px;
    }
    /* Links del menú principal mòbil */
    .main-navigation ul li a {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding-block: 12px;
    }
}
@media (max-width: 768px) {
    /* CTA "Reservar" del header: OCULTAT en responsive (Passada 9.1) — és
       redundant (ja hi és al hero "RESERVAR LA MASIA", al menú hamburguesa
       desplegat i a la mobile-book-bar que apareix amb l'scroll) i carregava
       la barra del costat del logo amb un bloc sòlid desproporcionat. */
    .header-actions .nav-cta { display: none; }
    /* Selector d'idiomes */
    .header-actions .language-switcher a,
    .header-actions .language-switcher .current,
    .header-actions .language-switcher span {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
    }
    /* Footer links */
    .site-footer a,
    .footer-nav a,
    .footer-info a,
    .footer-contact a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding-block: 6px;
    }
    /* Mantenir l'aparença visual del footer sense doblar separacions */
    .site-footer ul li { margin-block: 0; }
}

/* ----- 3) Gallery strip arrows: situar-les SOBRE el gradient lateral ----- */
.gallery-strip-arrow {
    z-index: 6 !important; /* sobre els ::before/::after de la section-gallery-strip (z=4) */
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(92, 64, 51, 0.08);
}
.gallery-strip-arrow:focus-visible {
    outline: 2px solid var(--color-primary, #5C4033);
    outline-offset: 3px;
}
/* En desktop ample, allunyar-les del límit per evitar la sensació de "tallat" */
@media (min-width: 1024px) {
    .gallery-strip-arrow--prev { left: 24px; }
    .gallery-strip-arrow--next { right: 24px; }
}
/* En mòbil <481px, amagar les fletxes (l'usuari ja arrossega amb el dit) */
@media (max-width: 480px) {
    .gallery-strip-arrow { display: none; }
    /* Reduir el gradient lateral perquè no tapi les fotos */
    .section-gallery-strip::before,
    .section-gallery-strip::after { width: 24px; }
}

/* =================================================================
   PASSADA 9 (2026-06-19) — Enquadrament HERO per-slide en responsive
   Els slides de dron són panoràmics 16:9; en vertical (mòbil/tablet) el
   cover amb object-position 50% 50% perdia la masia (slide 2 = només bosc)
   o mostrava massa cel/bosc a dalt (slides 1/4). Enquadrament per-slide
   perquè la masia sigui protagonista. Valors verificats amb captures a 390px.
   ================================================================= */
@media (max-width: 768px) {
    .hero-slide--1 picture > img,
    .hero-slide--1 img.hero-slide-img { object-position: 50% 68% !important; }
    .hero-slide--2 picture > img,
    .hero-slide--2 img.hero-slide-img { object-position: 20% 60% !important; }
    .hero-slide--3 picture > img,
    .hero-slide--3 img.hero-slide-img { object-position: 50% 48% !important; }
    .hero-slide--4 picture > img,
    .hero-slide--4 img.hero-slide-img { object-position: 50% 60% !important; }
}