/* ============================================================
   PANDAVAZ — MOBILE-FIRST CSS (CONSOLIDATED)
   Merged from mobile.css + mobile-fixes-v3.css
   ============================================================ */

/* BASE — all viewports */
/* body overflow/min-height moved to @media below */
img { max-width: 100%; height: auto; display: block; }
a, button, input, select, textarea { min-height: 44px; }

/* WOW / Animated — always force visible */
.wow { visibility: visible !important; opacity: 1 !important; animation: none !important; }
.animated { visibility: visible !important; opacity: 1 !important; }

/* SSC performance hints */
/* .ssc-sticky backface-visibility moved to @media below */

/* Testimonials section */
.testimonals-section { position: relative; z-index: 1; }
.testimonial-card,
.home-refresh .testimonial-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 16px !important;
    transition: none !important;
}

/* MPG carousel — ensure card content always visible */
.mpg-card__content { opacity: 1 !important; transform: none !important; }
.mpg-card__badge   { opacity: 1 !important; transform: none !important; }
.mpg-card__title   { opacity: 1 !important; transform: none !important; }

/* ============================================================
   MOBILE — max-width: 767px
   ============================================================ */
@media (max-width: 767px) {
    .ssc-sticky { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; }


    /* Fix: style.css sets .content { width:calc(100%-30px); margin:0 15px }
       on mobile — this shifts .content.home-studio-flow right by 15px.
       Reset to full-width, no margin. */
    .content {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .content.home-studio-flow {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
    }

    /* Hamburger menu */
    .hamburger { top: 16px !important; right: 16px !important; width: 44px !important; height: 44px !important; }
    .hamburger-navigation { width: 100vw !important; max-width: 100vw !important; }
    .menu-cancel-button { top: 20px !important; right: 20px !important; width: 44px !important; height: 44px !important; }
    .hamburger-navigation > li > a { padding: 16px 20px !important; font-size: 20px !important; }
    .nav-panel-header { padding: 20px !important; }
    .nav-panel-footer { padding: 16px 20px !important; }

    /* Sections */
    section { padding: 60px 0 70px !important; }
    .content { padding: 60px 20px !important; }
    .content.home-studio-flow { padding: 60px 16px !important; }
    .split .inner { padding: 0 20px !important; }
    .split .inner p { width: 100% !important; font-size: 15px !important; }
    .split .inner h1 { font-size: clamp(32px, 12vw, 64px) !important; }

    /* Selected Projects */
    .content.home-studio-flow .home-projects-ultra,
    .home-refresh .content.home-studio-flow .home-projects-ultra {
        overflow: clip !important;
        padding: 80px 20px 70px !important;
    }
    .content.home-studio-flow .home-projects-heading,
    .home-refresh .content.home-studio-flow .home-projects-heading {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 0 !important;
        margin-bottom: 32px !important;
        width: 100% !important;
    }
    .content.home-studio-flow .home-projects-grid,
    .home-refresh .content.home-studio-flow .home-projects-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-auto-rows: 400px !important;
        gap: 24px !important;
        padding: 0 !important;
    }
    .home-project-card,
    .home-project-card--feature,
    .home-project-card--tall {
        position: relative !important;
        grid-column: 1 / -1 !important;
        grid-row: span 1 !important;
        /* no display:block — keep as grid item */
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: hidden !important;
    }
    .home-project-card--feature { grid-row: span 1 !important; }
    .home-project-card__link {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        height: 400px !important;
    }
    .home-project-card__image {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .home-project-card__content {
        position: absolute !important;
        inset: auto 16px 16px 16px !important;
    }
    .home-project-card__wash { opacity: 0.55 !important; }
    .home-project-card__cta { opacity: 1 !important; transform: none !important; }
    .home-section-title { font-size: 1.8rem !important; }
    .home-section-copy { font-size: 14px !important; }

    /* Media Promotions carousel */
    .media-promo-gallery {
        display: block !important;
        background: #f7f6f4 !important;
        padding: 60px 0 72px !important;
        overflow: visible !important;
        width: 100% !important;
        float: none !important;
    }
    .media-promo-gallery::before { display: none !important; }
    .mpg-carousel {
        overflow: visible !important;
        padding-left: 0 !important;
    }
    .mpg-carousel .swiper-wrapper { overflow: visible !important; }
    .mpg-carousel .swiper-slide { width: 92vw !important; max-width: 340px !important; }
    .mpg-card__bg { aspect-ratio: 2/3 !important; }
    .mpg-header {
        text-align: left !important;
        padding: 0 16px 32px !important;
        margin-bottom: 0 !important;
    }
    .mpg-header__label { justify-content: flex-start !important; }
    .mpg-header__title { font-size: 1.75rem !important; color: #111 !important; }
    .mpg-carousel__nav {
        display: flex !important;
        gap: 12px !important;
        padding: 16px 16px 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    .mpg-carousel__prev,
    .mpg-carousel__next {
        pointer-events: auto !important;
        z-index: 10 !important;
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        cursor: pointer !important;
    }

    /* Video Testimonials */
    .vt-section { padding: 60px 0 100px !important; overflow: visible !important; }
    .vt-header { padding: 0 20px !important; margin-bottom: 32px !important; }
    .vt-heading { font-size: clamp(24px, 6vw, 36px) !important; }
    .vt-carousel-wrap { position: relative !important; padding-bottom: 60px !important; }
    .vt-track { padding: 8px 20px 24px !important; gap: 14px !important; overflow-x: auto !important; overflow-y: visible !important; }
    .vt-card { flex: 0 0 75vw !important; max-width: 280px !important; }
    /* VT nav buttons — pull them inside visible area */
    .vt-nav {
        position: absolute !important;
        bottom: 0 !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    .vt-nav--prev { right: 80px !important; }
    .vt-nav--next { right: 20px !important; }

    /* Meet the Minds / SSC */
    .ssc-intro {
        height: auto !important;
        min-height: 50svh !important;
        padding: 80px 20px !important;
    }
    .ssc-intro h1 {
        font-size: clamp(1.8rem, 8vw, 3rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em !important;
    }
    
    .ssc-stage {
        flex-direction: column !important;
        height: auto !important;
        aspect-ratio: 9 / 16 !important;
        max-width: 90vw !important;
        padding: 0 !important;
        gap: 0 !important;
        /* preserve-3d required for JS flip animation — do NOT override */
    }
    .ssc-panel { width: 100% !important; flex: 1 !important; height: auto !important; /* transform-style: preserve-3d in scroll-split-card.css */ }
    .ssc-sticky { overflow: clip !important; }
    .ssc-back { padding: 1rem !important; }
    .ssc-title { font-size: 1.125rem !important; }
    .ssc-desc  { font-size: 0.75rem !important; }
    .ssc-end-label p { font-size: 1.25rem !important; }

    /* PV Written Testimonials */
    .pv-testimonials { overflow: visible !important; padding: 70px 0 80px !important; }
    .pv-testimonials__inner { padding: 0 !important; overflow: visible !important; }
    .pv-testimonials__header { padding: 0 20px !important; margin-bottom: 40px !important; }
    .pv-testimonials__stage { overflow: clip !important; }
    .pv-testimonials__track { padding: 0 20px !important; }
    .pvt-card { flex: 0 0 calc(85vw) !important; padding: 28px 24px !important; }
    .pvt-controls {
        margin-top: 32px !important;
        justify-content: center !important;
        padding: 0 20px !important;
        position: relative !important;
        z-index: 10 !important;
    }
    .pvt-btn { pointer-events: auto !important; z-index: 10 !important; }
    .pvt-progress { max-width: 120px !important; }
    .client-scroll-section { padding: 60px 0 !important; }
    .client-scroll-section .main-title { font-size: clamp(24px, 6vw, 36px) !important; padding: 0 20px !important; }
    .client-scroll-section .sub-title { font-size: clamp(12px, 3vw, 14px) !important; padding: 0 20px !important; }
    .client-logo-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
        padding: 0 20px !important;
    }
    /* Freeze drift animation on mobile — no per-frame transform updates */
    .client-scroll-section { --client-drift: 0px !important; }

    /* Misc */
    .section-eyebrow { font-size: 10px !important; }
    .section-title { font-size: clamp(24px, 6vw, 32px) !important; }
    .section-copy { font-size: 14px !important; line-height: 1.6 !important; }
    .social-bar { display: none !important; }
    .footer { padding: 40px 20px !important; }
    .footer .footer-content { flex-direction: column !important; gap: 24px !important; }
    .ssc-section { min-height: auto !important; padding: 60px 20px !important; }
    .ssc-card { width: 100% !important; padding: 24px !important; }
    .pg-hero { min-height: 60svh !important; padding: 0 20px !important; }
    .pg-hero h1 { font-size: clamp(28px, 8vw, 48px) !important; }
}

@supports (padding: env(safe-area-inset-bottom)) {
    .vt-section, .client-scroll-section, .media-promo-gallery {
        padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .slider { height: 100svh !important; }
    .vt-section { padding: 40px 0 50px !important; }
    .vt-card { flex: 0 0 240px !important; }
}

/* ============================================================
   TABLET — 768px – 1024px
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    .home-projects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        padding: 0 24px !important;
    }
    .media-promo-gallery {
        display: block !important;
        background: #f7f6f4 !important;
    }
    .mpg-carousel .swiper-slide { width: 45% !important; }
    .vt-card { flex: 0 0 280px !important; }
    .client-logo-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 20px !important;
    }
}

/* ============================================================
   ACCESSIBILITY — reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .wow { animation: none !important; opacity: 1 !important; }
}