/* ========================================
   VEDAM VISION — RESPONSIVE CSS v2
   Comprehensive device support
   ======================================== */

/* ---------- Global Overflow Protection ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }
img, video, iframe, embed, object { max-width: 100%; height: auto; }
p, h1, h2, h3, h4, h5, h6, li, td, th, span, a, label {
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.container { max-width: 100%; overflow-x: hidden; }

/* ---------- Utility Grid Classes ---------- */
.grid-2-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }

/* ---------- Large Desktop (1200px+) ---------- */
@media (min-width: 1200px) {
    .container { max-width: 1200px; margin: 0 auto; }
}

/* ---------- Tablet Landscape (1024px - 1199px) ---------- */
@media (max-width: 1199px) {
    .grid-4, .grid-4-col { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Tablet Portrait (768px - 1023px) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
    .grid-4, .grid-4-col { grid-template-columns: repeat(2, 1fr) !important; }
    .grid-3, .grid-3-col { grid-template-columns: repeat(2, 1fr) !important; }
    .portfolio-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .footer-grid { grid-template-columns: 1fr !important; }
    .footer-links-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .section { padding: 4rem 0; }
    .hero-section, .hero { padding-top: 7rem !important; }
}

/* ---------- Desktop nav / mobile toggle ---------- */
@media (min-width: 768px) {
    .desktop-nav { display: flex !important; }
    .mobile-toggle { display: none !important; }
    .mobile-bottom-nav { display: none !important; }
}

/* ---------- Mobile (max-width: 767px) ---------- */
@media (max-width: 767px) {
    /* Grids → single column */
    .grid-2, .grid-3, .grid-4,
    .grid-2-col, .grid-3-col, .grid-4-col,
    .results-grid, .process-grid, .about-grid,
    .results-stats-grid, .results-industry-card,
    .audit-hero-grid, .resource-grid, .cs-grid,
    .svc-detail-grid, .other-svc-grid, .pricing-grid,
    .team-grid, .contact-grid, .state-grid,
    .footer-grid,
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns: auto 1fr auto"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns: 1.4fr 3fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }

    /* Footer links: 2 columns on mobile */
    .footer-links-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    /* Sections */
    .section { padding: 3.5rem 0; }
    .section-compact { padding: 2rem 0; }
    .section-header { margin-bottom: 2rem; }

    /* Hero */
    .hero-section, .hero { min-height: auto !important; padding: 6rem 1.25rem 2.5rem !important; }
    .hero-section h1, .hero h1, .hero-title, [data-hero-title] {
        font-size: clamp(1.8rem, 8vw, 2.5rem) !important;
    }
    .hero-subtitle { font-size: 0.85rem !important; }

    /* Container */
    .container { padding: 0 1rem !important; }

    /* Cards */
    .card { padding: 1.25rem !important; }
    .card-title { font-size: 0.75rem !important; }

    /* Buttons — accessible tap targets */
    .btn-primary, .btn-ghost, .btn-outline, .nav-cta {
        padding: 12px 24px !important;
        font-size: 0.7rem !important;
        min-height: 44px;
    }

    /* Stats — 2 columns on mobile */
    .results-grid, .grid-4.results-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Process line hide */
    .process-line { display: none !important; }

    /* Mobile bottom nav */
    .mobile-bottom-nav { display: flex !important; }
    #wa-float { bottom: 75px !important; }
    footer { padding-bottom: 5rem !important; }

    /* Portfolio */
    .portfolio-grid { grid-template-columns: 1fr !important; }
    .portfolio-grid > div { height: 280px !important; }

    /* Scrollbar cards */
    .scrollbar-hide [style*="width: 350px"] { width: 280px !important; }

    /* Blog grid */
    .blog-grid-page { grid-template-columns: 1fr !important; }

    /* Pricing cards — CRITICAL FIX */
    #plans .grid-3,
    .grid-3[style*="repeat(3"] {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* Fix inline grid-template-columns with !important */
    [style*="grid-template-columns"][style*="!important"] {
        grid-template-columns: 1fr !important;
    }

    /* Section titles */
    .section-title {
        font-size: clamp(1.2rem, 5vw, 1.6rem) !important;
    }
    .section-desc {
        font-size: 0.8rem !important;
    }

    /* Table responsiveness */
    table { display: block; overflow-x: auto; white-space: nowrap; }

    /* Text overflow prevention */
    .card-text, .hero-subtitle, .section-desc, p {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Hide desktop cursor */
    .cursor-dot, .cursor-ring, #vv-cursor { display: none !important; }
}

/* ---------- Small Mobile (max-width: 480px) ---------- */
@media (max-width: 480px) {
    .hero-section h1, .hero h1, .hero-title {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
    }
    .container { padding: 0 0.75rem !important; }
    .section { padding: 2.5rem 0; }
    .card { padding: 1rem !important; }
    .stat-number { font-size: 1.4rem !important; }
    .footer-links-grid {
        grid-template-columns: 1fr !important;
    }

    /* Badge / label */
    .badge { font-size: 0.55rem !important; }
}

/* ---------- Very Small (max-width: 380px) ---------- */
@media (max-width: 380px) {
    .hero-title { font-size: 1.4rem !important; }
    .btn-primary, .btn-ghost, .btn-outline {
        padding: 10px 16px !important;
        font-size: 0.65rem !important;
    }
    .results-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- Print ---------- */
@media print {
    .mobile-bottom-nav, .fluid-bg, nav, #wa-float, .cursor-dot, .cursor-ring { display: none !important; }
    body { background: #fff; color: #000; }
}


/* ---------- Hero Text Overflow Fix ---------- */
@media (max-width: 767px) {
    .hero h1, .hero-title, [class*="hero"] h1,
    .hero-section h1, section[class*="hero"] h1 {
        font-size: clamp(1.4rem, 6.5vw, 2rem) !important;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
        padding: 0 0.25rem;
        max-width: 100%;
    }
    /* Hero subtitle */
    .hero-subtitle, .hero p, [class*="hero"] p {
        font-size: 0.85rem !important;
        padding: 0 0.5rem;
        max-width: 100%;
    }
}

/* ---------- Blog Page Overflow Fix ---------- */
@media (max-width: 767px) {
    .blog-grid-page, .blog-grid, [class*="blog-grid"] {
        overflow: hidden;
        max-width: 100%;
    }
    main { overflow-x: hidden; }
    .pagination, nav[aria-label*="pagination"], .flex.justify-between {
        flex-wrap: wrap;
        justify-content: center;
        overflow: hidden;
        max-width: 100%;
        gap: 0.25rem;
    }
    .pagination a, .pagination span {
        min-width: 32px;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* ---------- SEO Description Section Fix ---------- */
section p, section li, .card-text, .section-desc,
.seo-content p, [class*="seo"] p {
    font-family: var(--font-body);
    line-height: 1.8;
}

/* ---------- Service Detail Hero ---------- */
@media (max-width: 1023px) {
    .hero h1, .hero-title {
        font-size: clamp(1.6rem, 4vw, 2.5rem) !important;
    }
}

/* ---------- Contact Page Grid ---------- */
@media (max-width: 767px) {
    .contact-grid, .contact-split-grid,
    [class*="contact"] [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
}

/* ---------- Footer Mobile Fixes ---------- */
@media (max-width: 767px) {
    footer .container > div > div[style*="grid-template-columns: 1.4fr"] {
        grid-template-columns: 1fr !important;
    }
    footer .footer-links-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    footer p, footer a, footer span {
        font-size: 0.8rem !important;
    }
}

/* ---------- Prevent ANY horizontal scroll ---------- */
@media (max-width: 767px) {
    *, *::before, *::after {
        max-width: 100vw;
    }
    section, .section, .section-alt, .section-compact {
        overflow-x: hidden;
        max-width: 100vw;
    }
    /* Force body text readability */
    section p:not(.stat-number):not(.card-title),
    section li, .card-text {
        font-family: 'Space Grotesk', sans-serif !important;
        text-transform: none !important;
        letter-spacing: normal !important;
    }
}

/* ---------- Global Section Header Center Alignment ---------- */
.section-header,
.section-header .section-label,
.section-header .section-title,
.section-header .section-desc {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------- Ensure hero sections are always centered ---------- */
.hero, section.hero, [class*="hero"] {
    text-align: center;
}
.hero h1, .hero-title, .hero-subtitle, .hero p, .hero .badge {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ---------- CTA sections always centered ---------- */
section[style*="text-align: center"] h1,
section[style*="text-align: center"] h2,
section[style*="text-align: center"] p {
    text-align: center !important;
}

/* ---------- Fix font consistency ---------- */
p, li, td, th, .card-text, blockquote, .form-input, textarea, input, select, label {
    font-family: var(--font-body);
}

/* ========================================================================
   POLISH PASS 2026-06-21 — Mobile 100% + Button Stacking
   Customer-perspective polish. ADD-ONLY.
   ======================================================================== */

/* ---------- Button row stacks on mobile ---------- */
@media (max-width: 640px) {
    .btn-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .btn-row .btn {
        width: 100%;
    }
}

/* ---------- Premium section mobile sizing ---------- */
@media (max-width: 640px) {
    .container {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
    .section-title-premium {
        font-size: clamp(1.6rem, 7vw, 2.2rem) !important;
        line-height: 1.2 !important;
    }
    .section-subtitle-premium {
        font-size: 0.95rem !important;
        padding: 0 0.25rem;
    }
    .section-header-premium {
        margin-bottom: 2rem !important;
        padding: 0 0.25rem;
    }
    .section-label-premium {
        font-size: 0.7rem !important;
        padding: 0.35rem 0.85rem !important;
    }
    .services-grid-premium {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    .section-premium {
        padding: clamp(2.5rem, 8vw, 4rem) 0 !important;
    }
    /* Form inputs — prevent iOS zoom */
    input, select, textarea {
        font-size: 16px !important;
    }
    /* Glass card padding */
    .glass-card {
        padding: 1.25rem !important;
    }
}

/* ---------- Tablet portrait: 2-col services grid ---------- */
@media (max-width: 1023px) and (min-width: 641px) {
    .services-grid-premium {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ---------- Heading scaling ---------- */
@media (max-width: 640px) {
    h1 { font-size: clamp(1.75rem, 8vw, 2.8rem) !important; }
    h2 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
    h3 { font-size: 1.15rem !important; }
}

/* ---------- Sticky banner safety: don't break layout when region banner is sticky ---------- */
#vv-region-banner, #vv-region-banner-js {
    width: 100%;
}
@media (max-width: 640px) {
    #vv-region-banner, #vv-region-banner-js {
        flex-direction: column !important;
        text-align: center;
        padding: 0.75rem 0.85rem !important;
        font-size: 0.85rem !important;
    }
    #vv-region-banner > div, #vv-region-banner-js > div {
        width: 100%;
        justify-content: center !important;
    }
}

/* ---------- Tables overflow guard (already partial above, reinforce) ---------- */
@media (max-width: 640px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}


/* ============================================================
   UX FIX 2026-06-22 — RESPONSIVE NAV CLEARANCE + FONT SCALE
   Subagent: VV Spacing+Video+Fonts. Additive rules.
   ============================================================ */

/* Smaller nav height on phones (header-shell collapses to ~60px on
   mobile because the inner nav uses height:68px but real measured
   nav on narrow viewports is closer to 60px after toggle sizing). */
@media (max-width: 767px) {
    :root {
        --nav-height: var(--nav-height-mobile, 60px);
    }
    main {
        padding-top: var(--nav-height-mobile, 60px);
    }
    /* Hero blocks on mobile need a small extra cushion */
    main > section:first-child:not(.hero-cinematic) {
        padding-top: 1.25rem;
    }
}

/* Mobile readability — never go below 16px for primary body copy. */
@media (max-width: 767px) {
    body, p, li, .card-text, .section-desc, .lead {
        font-size: max(16px, var(--fs-body-std, 1rem)) !important;
        line-height: 1.65 !important;
    }
    h1, .hero-title { line-height: 1.15; }
    h2, .section-title { line-height: 1.2; }
    h3, .card-title { line-height: 1.3; }
}

/* Very wide screens — cap the body so paragraphs don't balloon */
@media (min-width: 1600px) {
    :root { --fs-body-std: 1.125rem; }
}