/* ============================================================
   WILDBALL — Laptop / MacBook responsive tuning
   ------------------------------------------------------------
   Targets the laptop range 1025–1680px (with extra rules for
   short viewports ≤900px tall) — the gap between the existing
   tablet (≤1024) and ultrawide-desktop styles.
   Covers MacBook 13" (1280×800), MacBook Air/Pro 13/14"
   (1470/1512×956/982), and MacBook Pro 16" (1728×1117).
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. HERO — fits within laptop viewport without cropping
   The image is constrained by an explicit height + object-fit:
   contain so it scales DOWN to fit the cell instead of bleeding
   above the section (which `.hero { overflow: hidden }` clips).
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1680px) {
    .hero {
        padding-top: 110px;        /* clear fixed navbar only */
        min-height: 115vh;         /* taller hero so the figure has room */
    }
    .hero-inner {
        max-width: 1280px;
        min-height: calc(115vh - 110px);
        padding: 0 32px;
        align-items: end;          /* image hugs the bottom */
    }
    .hero-content-container {
        padding: 30px 0 60px;
        align-self: center;
    }
    .hero-image-container {
        align-items: flex-end;
        justify-content: flex-end;
        height: 100%;
        overflow: visible;
    }
    .hero-image {
        width: 110%;
        height: calc(115vh - 140px);
        max-height: calc(115vh - 140px);
        object-fit: contain;
        object-position: bottom right;
        margin-right: 0;
        margin-bottom: 0;
    }
    /* Decorative shapes — keep inside viewport */
    .shape-3 { right: 200px; }
}

/* Smaller laptops (MacBook Air/Pro 13", base scaling 1280–1366) */
@media (min-width: 1025px) and (max-width: 1366px) {
    .hero-inner {
        max-width: 1140px;
        padding: 0 28px;
    }
    .hero-text h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
    .hero-description { font-size: 1rem; line-height: 1.7; }
    .hero-image { width: 105%; }
    .shape-1 { width: 240px; height: 240px; }
    .shape-2 { width: 320px; height: 320px; bottom: -80px; right: -30px; }
    .shape-3 { width: 200px; height: 240px; right: 140px; }
    .shape-4 { width: 120px; height: 120px; }
}

/* Wider MacBooks (Pro 14"/16" "More Space" 1440–1680) */
@media (min-width: 1441px) and (max-width: 1680px) {
    .hero-inner { max-width: 1340px; }
    .hero-image { width: 115%; }
}

/* Short-viewport laptops (e.g. MacBook 13" at 800px tall) */
@media (min-width: 1025px) and (max-height: 900px) {
    .hero-content-container { padding: 20px 0 40px; }
    .hero-text h1 {
        font-size: clamp(2rem, 4vw, 3.2rem);
        margin-bottom: 1rem;
    }
    .hero-description {
        font-size: 0.95rem;
        line-height: 1.65;
        margin-bottom: 1rem;
    }
    .hero-buttons { margin-top: 1.2rem; }
}

/* ─────────────────────────────────────────────────────────────
   2. SECTIONS — tighten vertical rhythm on shorter laptop screens
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1366px) {
    .products-v2          { padding: 90px 0 75px; }
    .features             { padding: 90px 0 !important; }
    .testimonials         { padding: 85px 0 !important; }
    .about                { padding: 80px 0 !important; }
    .cta                  { padding: 80px 0 !important; }

    .pv2-header           { margin-bottom: 44px; }
    .features .section-title { margin-bottom: 2.5rem !important; }
    .testimonials-subtitle   { margin-bottom: 2.6rem !important; }

    /* Display headings scale down a touch */
    .pv2-title       { font-size: clamp(2rem, 3.4vw, 2.8rem); }
    .showcase-title  { font-size: clamp(2.2rem, 4.4vw, 3.6rem) !important; }
    .cta-content h2  { font-size: clamp(2rem, 3.6vw, 3rem) !important; }
}

/* Showcase — keep stat row balanced on 13" laptops */
@media (min-width: 1025px) and (max-width: 1366px) {
    .showcase                { min-height: 70vh; }
    .showcase-content        { padding: 50px 20px; }
    .showcase-stats          { gap: 1.6rem; margin-bottom: 2rem; }
    .showcase-stat h3        { font-size: 2.4rem !important; }
    .showcase-divider        { height: 42px; }
}

/* ─────────────────────────────────────────────────────────────
   3. CATEGORY CARDS / PRODUCTS GRID — gap & card sizing
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1366px) {
    .pv2-cat-slider-track    { gap: 20px; }
    .pv2-cat-slider-track .pv2-cat-card {
        flex: 0 0 calc(33.333% - 14px);
        min-width: calc(33.333% - 14px);
    }
    .pv2-cat-card-content    { padding: 1.4rem 1.4rem 1.6rem; }
    .pv2-cat-card-title      { font-size: 1.25rem; }
    .pv2-cat-card-desc       { font-size: 0.85rem; }

    .pv2-grid                { gap: 24px; }
}

/* ─────────────────────────────────────────────────────────────
   4. FEATURES SLIDER — slider cards comfortable on 13" screens
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1366px) {
    .feature-card-slide      { padding: 2.4rem 1.8rem 2rem !important; }
    .feature-card-slide h3   { font-size: 1.05rem !important; }
    .feature-card-slide p    { font-size: 0.86rem !important; line-height: 1.7 !important; }
    .feature-slide-icon      { width: 66px !important; height: 66px !important; margin: 0 auto 1.2rem !important; }
    .feature-slide-icon i    { font-size: 1.55rem !important; }
}

/* ─────────────────────────────────────────────────────────────
   5. TESTIMONIALS — keep cards readable, not oversized
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1366px) {
    .testimonial-card        { padding: 2rem 1.75rem 1.75rem !important; gap: 0.95rem !important; }
    .testimonial-text        { font-size: 0.92rem !important; line-height: 1.75 !important; }
    .testi-quote-mark        { font-size: 4rem; }
}

/* ─────────────────────────────────────────────────────────────
   6. ABOUT — square portrait fits laptop column without overflow
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1366px) {
    .about-content           { gap: 3rem; }
    .about-image-placeholder { width: 100%; max-width: 440px; height: 440px; margin: 0 auto; }
    .about-text p            { font-size: 1rem !important; line-height: 1.8 !important; }
    .stats                   { gap: 1.2rem; margin-top: 2rem; }
    .stat                    { padding: 1rem 1.1rem; }
    .stat h4                 { font-size: 1.7rem !important; }
}

/* Wider laptop (1367–1680) — slight grow for image */
@media (min-width: 1367px) and (max-width: 1680px) {
    .about-image-placeholder { max-width: 500px; height: 500px; }
}

/* ─────────────────────────────────────────────────────────────
   7. CONTAINER — generous side padding so content isn't edge-glued
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1366px) {
    .products-v2 .container,
    .features .container,
    .testimonials .container,
    .about .container { padding-left: 28px; padding-right: 28px; }
}

/* ─────────────────────────────────────────────────────────────
   8. MARQUEE BAND — slightly tighter at laptop sizes
   ───────────────────────────────────────────────────────────── */
@media (min-width: 1025px) and (max-width: 1366px) {
    .marquee-band  { padding: 14px 0; }
    .marquee-item  { font-size: 0.88rem; }
}