/* ============================================================
   WEBNOVA — Responsive
   Mobile-first. Base style.css covers desktop; here we scale
   DOWN for tablet and mobile where grids collapse and type
   relaxes. (Fluid clamp() already handles most sizing.)
   ============================================================ */

/* ═══ Tablet and below (≤ 1024px) ═══════════════════════ */
@media (max-width: 1024px) {

    /* Hero */
    .wn-hero { min-height: 640px; }
    .wn-hero-container { padding-bottom: 4rem; }
    .wn-hero-meta { gap: 1.6rem; }
    .wn-hero-scroll { bottom: 1.4rem; gap: 0.7rem; }

    /* Intro */
    .wn-intro { padding: 5rem 0 4rem; }
    .wn-intro-head { grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 2.4rem; }
    .wn-intro-body { grid-template-columns: 1fr; gap: 1.6rem; }

    /* Services */
    .wn-services { padding: 5rem 0; }
    .wn-services-head { grid-template-columns: 1fr; gap: 1.6rem; margin-bottom: 3rem; }
    .wn-service-inner { grid-template-columns: 1fr; gap: 1rem; }
    .wn-service-toggle { padding: 1.4rem 0; }

    /* Stats */
    .wn-stats { padding: 5rem 0; }
    .wn-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .wn-stats-head { margin-bottom: 2.6rem; }

    /* Portfolio */
    .wn-portfolio { padding: 5rem 0; }
    .wn-portfolio-head { grid-template-columns: 1fr; align-items: start; gap: 1.2rem; margin-bottom: 2.6rem; }
    .wn-portfolio-link { justify-self: start; }
    .wn-portfolio-grid { grid-template-columns: repeat(6, 1fr); gap: 0.9rem; }
    .wn-card.is-wide,
    .wn-card.is-tall,
    .wn-card.is-third,
    .wn-card.is-half { grid-column: span 6; }

    /* Clients — 8 -> 4 on tablet (kept for when section is used elsewhere) */
    .wn-clients { padding: 3rem 0; }
    .wn-clients-grid { grid-template-columns: repeat(4, 1fr); gap: 1.4rem 1.2rem; }
    .wn-clients-item { min-height: 64px; }

    /* Solutions — 3 cards stack on tablet */
    .wn-solutions { padding: 5rem 0; }
    .wn-solutions-grid { grid-template-columns: 1fr; gap: 1rem; }
    .wn-solution-card { padding: 2rem 1.6rem; }

    /* Differentiators — collapse 4-up to 2x2 on tablet */
    .wn-differ { padding: 5rem 0; }
    .wn-differ-head { grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 2.8rem; }
    .wn-differ-grid { grid-template-columns: repeat(2, 1fr); }
    .wn-differ-item { padding: 2.4rem 1.4rem !important; }
    .wn-differ-item:nth-child(odd)  { padding-left: 0 !important; }
    .wn-differ-item:nth-child(even) { padding-right: 0 !important; }

    /* Quotes — section padding */
    .wn-quotes { padding: 5rem 0; }

    /* CTA */
    .wn-cta { padding: 5rem 0; }
    .wn-cta-inner { grid-template-columns: 1fr; gap: 2.6rem; }
    .wn-cta-card { padding: 1.8rem; }

    /* Footer */
    .wn-footer-top { grid-template-columns: 1fr; gap: 2rem; }
    .wn-footer-links { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
}

/* ═══ Mobile (≤ 720px) ═══════════════════════════════════ */
@media (max-width: 720px) {

    /* Header — let pill collapse a little */
    .wn-header { top: 0.7rem; }
    .wn-header-inner { padding: 0.45rem 0.5rem 0.45rem 1.1rem; }
    .wn-nav { display: none; }
    .wn-menu-toggle { display: inline-flex; }

    /* Hero */
    .wn-hero { min-height: 560px; }
    .wn-hero-container { padding-top: 7rem; padding-bottom: 3rem; }
    .wn-hero-breadcrumb { margin-bottom: 1.4rem; }
    .wn-hero-title { margin-bottom: 2rem; }
    .wn-hero-meta { flex-direction: column; align-items: flex-start; gap: 1.4rem; }

    /* Hero video — fullscreen cover-crop zoomed the 16:9 reel so far that
       only a sliver of the middle showed. On mobile, crop it into a band
       across the top 60% of the screen: the video fills the band (centre
       crop keeps the text), the hero auto-sizes, and the CTAs sit beneath. */
    .wn-hero { height: auto; min-height: 0; }
    .wn-hero-video-wrap {
        position: relative;     /* take real space in flow, not full-bleed */
        height: 60svh;          /* video band = top 60% of the screen */
        bottom: auto;
    }
    .wn-hero-video-iframe {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100vw;
        height: 56.25vw;                   /* 16:9, oversized to COVER the band */
        min-width: calc(60svh * 16 / 9);   /* fills width when band is taller */
        min-height: 60svh;                 /* fills the 60% height (centre crop) */
    }
    .wn-hero-container {
        height: auto;
        justify-content: flex-start;
        padding-top: 2rem;
    }
    .wn-hero-scroll { display: none; }   /* no fixed-height hero to anchor to */

    /* Intro */
    .wn-intro { padding: 4rem 0 3rem; }

    /* Services */
    .wn-services-copy { padding-top: 0; }
    .wn-service-toggle { font-size: 0.9rem; letter-spacing: 0.1em; padding: 1.2rem 0; }
    .wn-service-icon { width: 36px; height: 36px; }

    /* Stats */
    .wn-stats-grid { grid-template-columns: 1fr; gap: 0.9rem; }
    .wn-stat { padding: 1.8rem 1.4rem; }

    /* Portfolio — stack fully */
    .wn-portfolio-grid { grid-template-columns: 1fr; }
    .wn-card.is-wide,
    .wn-card.is-tall,
    .wn-card.is-third,
    .wn-card.is-half { grid-column: span 1; aspect-ratio: 4 / 3; }
    .wn-card-overlay { left: 0.7rem; right: 0.7rem; bottom: 0.7rem; padding: 0.85rem 1rem; transform: translateY(0); opacity: 1; }

    /* Clients — 4 -> 2 on mobile */
    .wn-clients-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
    .wn-client-logo { height: 32px; max-width: 140px; }

    /* Solutions — slightly tighter cards on mobile */
    .wn-solutions { padding: 4rem 0; }
    .wn-solution-card { padding: 1.8rem 1.4rem; }
    .wn-solution-list li { font-size: 0.78rem; letter-spacing: 0.12em; }

    /* Differentiators — stack fully on mobile */
    .wn-differ-grid { grid-template-columns: 1fr; background: transparent; border: 0; gap: 0; }
    .wn-differ-item,
    .wn-differ-item:nth-child(odd),
    .wn-differ-item:nth-child(even) { padding: 2.4rem 0 !important; border-bottom: 1px solid var(--wn-line); }
    .wn-differ-item:last-child { border-bottom: 0; }

    /* CTA */
    .wn-cta-card { padding: 1.5rem; }
    .wn-cta-actions .wn-btn { width: 100%; justify-content: center; }

    /* Footer */
    .wn-footer-links { grid-template-columns: 1fr 1fr; }
    .wn-footer-bottom { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
}

/* ═══ Small mobile (≤ 420px) ═════════════════════════════ */
@media (max-width: 420px) {
    .wn-hero-actions { flex-direction: column; align-items: stretch; }
    .wn-hero-actions .wn-btn { width: 100%; justify-content: center; }
    .wn-footer-links { grid-template-columns: 1fr; }
}

/* ═══ Honor reduced transparency / low-end GPUs ══════════ */
@media (prefers-reduced-transparency: reduce) {
    .wn-glass,
    .wn-glass-dark,
    .wn-header-inner,
    .wn-btn-glass,
    .wn-btn-glass-inv,
    .wn-stat,
    .wn-card-overlay,
    .wn-cta-card,
    .wn-cursor-ring {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    .wn-glass, .wn-header-inner, .wn-stat, .wn-btn-glass { background: rgba(255, 255, 255, 0.92); }
    .wn-glass-dark, .wn-cta-card, .wn-btn-glass-inv { background: rgba(20, 25, 34, 0.92); }
}