/* ==========================================================================
   BISWAJIT MAZUMDAR — RESPONSIVE & MULTI-VIEWPORT ENGINE
   Source of Truth: Biswajit_Mazumdar_Global_Design_Brand_Kit_v1.md (Section 12)
   Breakpoints:
     - Wide Desktop: >= 1440px (90rem)
     - Desktop: 1024px – 1439px
     - Tablet: 768px – 1023px
     - Large Mobile: 480px – 767px
     - Small Mobile: <= 479px (tested at 320px, 360px, 375px, 390px, 430px)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TABLET VIEWPORT ENGINE (769px – 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
    .footer-top {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-6) !important;
    }

    .process-steps-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-5) !important;
    }

    .hero-split-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
    }
}

/* --------------------------------------------------------------------------
   1. TABLET & MOBILE VIEWPORT ENGINE (<= 768px)
   STRICT MOBILE RESPONSIVE SHIELD
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* 1.1 VIEWPORT, BODY & OVERFLOW SHIELD (Zero Horizontal Overflow) */
    html, body {
        overflow-x: clip !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    body {
        padding-top: 64px !important;
    }

    *, *::before, *::after {
        box-sizing: border-box !important;
    }

    /* Container & Header Gutters: Locked strictly to clamp(14px, 4vw, 18px) */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: clamp(14px, 4vw, 18px) !important;
        box-sizing: border-box !important;
    }

    .header-inner {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .header-right-actions {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* Zero flex & card blowout: allow children to shrink properly */
    .hero-left,
    .hero-right,
    .hero-card,
    .about-left-col,
    .about-right-col,
    .lead-pitch,
    .lead-grid,
    .form-card,
    .timeline-content,
    .timeline-card,
    .cred-metric-card,
    .cred-item,
    .feature-box,
    .feature-card,
    .step-card,
    .tech-cat-card,
    .project-case-card,
    .bento-card,
    .card-dark,
    .guarantee-box,
    .saas-teaser-box {
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 1.2 BULLETPROOF FIXED HEADER (Mobile <= 768px) */
    header.site-header,
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 64px !important;
        max-height: 64px !important;
        z-index: 99999 !important;
        background: rgba(8, 8, 13, 0.94) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-bottom: 1px solid var(--color-border) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 clamp(14px, 4vw, 18px) !important;
        box-sizing: border-box !important;
    }

    .navbar {
        gap: var(--space-2);
        height: 64px;
    }

    .brand-avatar {
        width: 36px;
        height: 36px;
    }

    .nav-desktop-links,
    .nav-actions {
        display: none !important;
    }

    .nav-toggle {
        display: flex !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }

    .mobile-nav-overlay {
        top: 64px;
        height: calc(100vh - 64px);
    }

    .mobile-nav-overlay.open {
        display: block !important;
    }

    .brand-name {
        font-size: 0.9rem;
    }

    .brand-sub {
        font-size: 0.65rem;
    }

    /* 1.3 CLEAN 1-COLUMN COLLAPSE (Zero Squished Boxes) */
    .bento-grid,
    .bento-2x2-grid,
    .hospitality-grid,
    .showcase-split,
    .bento-split,
    .grid-2,
    .grid-3,
    .grid-4,
    .hero-split,
    .hero-split-grid,
    .hero-grid,
    .cards-grid,
    .cred-metrics-grid,
    .cred-metrics-row,
    .cred-strip-grid,
    .about-split-grid,
    .lead-grid,
    .languages-grid,
    .steps-grid,
    .process-steps-grid,
    .tech-cat-grid,
    .footer-top {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: var(--space-4) !important;
    }

    .bento-col-8,
    .bento-col-4,
    .bento-col-6,
    .bento-col-12 {
        grid-column: span 1 !important;
        width: 100% !important;
    }

    /* 1.4 CARD PADDING LOCK (Zero Nested Margin Bloat) */
    .card-dark,
    .bento-card,
    .feature-card,
    .feature-box,
    .tech-cat-card,
    .cred-metric-card,
    .hero-card,
    .form-card,
    .timeline-card,
    .project-case-card,
    .step-card,
    .lang-card,
    .guarantee-box,
    .saas-teaser-box {
        padding: clamp(14px, 4vw, 18px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 1.5 ANTI-WRAP PROTECTION ON BUTTONS & PILLS */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-quick-call,
    .btn-nav-cta,
    .badge-status,
    .badge-pill,
    .badge-tag-sm,
    .credential-pill {
        white-space: nowrap !important;
    }

    .credential-pill {
        max-width: 100% !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero-credential-grid {
        gap: 6px;
    }

    /* Full-width stretch on buttons when space is tight */
    .hero-cta-group,
    .hero-actions-wrap,
    .about-cta-wrap,
    .mobile-nav-action {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .hero-cta-group .btn,
    .hero-actions-wrap .btn,
    .about-cta-wrap .btn,
    .mobile-nav-action .btn,
    .btn-block {
        width: 100% !important;
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 46px !important;
        white-space: nowrap !important;
    }

    .hero-social-strip {
        justify-content: flex-start;
        gap: 10px;
        margin-top: 4px;
    }

    /* 1.6 ACCESSIBLE TOUCH TARGETS (48px WCAG Compliance) */
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-block,
    .btn-quick-call,
    .btn-nav-cta,
    .nav-toggle,
    .mobile-nav-item,
    .form-control,
    .social-link-btn,
    .faq-question,
    #mobileNavCta {
        min-height: 48px !important;
    }

    .mobile-nav-item {
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
        font-size: 1.02rem;
        font-weight: 600;
        padding: 12px 16px;
    }

    .footer-links a {
        display: inline-block !important;
        padding: 8px 0 !important;
        min-height: 44px !important;
        line-height: 28px !important;
    }

    .social-link-btn {
        width: 44px !important;
        height: 44px !important;
    }

    .social-link-btn.hero-social-btn {
        width: 36px !important;
        height: 36px !important;
    }

    /* Typography Scaling */
    h1, .hero-title {
        font-size: clamp(2.1rem, 7vw, 2.75rem);
        line-height: 1.08;
        letter-spacing: -0.03em;
        margin-bottom: var(--space-3);
    }

    h2, .section-head h2 {
        font-size: clamp(1.65rem, 5.5vw, 2.1rem);
        line-height: 1.14;
        letter-spacing: -0.02em;
        margin-bottom: var(--space-2);
    }

    h3, .bento-card h3 {
        font-size: clamp(1.15rem, 4vw, 1.3rem);
        line-height: 1.25;
    }

    .hero-desc {
        font-size: 0.95rem;
        margin-bottom: var(--space-4);
    }

    .hero-section {
        padding: clamp(2rem, 5vw, 3rem) 0 clamp(1.75rem, 4vw, 2.5rem);
    }

    /* Section Spacing */
    .section,
    .lead-hub-section {
        padding: clamp(2.5rem, 5vw, 3.75rem) 0;
    }

    .section-head {
        margin-bottom: var(--space-5);
    }

    .about-left-col {
        justify-content: flex-start !important;
        gap: var(--space-4) !important;
    }

    .timeline-card {
        flex-direction: column !important;
        gap: var(--space-3);
    }

    .cred-strip-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: var(--space-2);
    }
}

/* --------------------------------------------------------------------------
   2. SMALL MOBILE VIEWPORT ENGINE (<= 479px)
   Tested at 320px, 360px, 375px, 390px, 430px
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
    .brand-monogram-wrap {
        gap: var(--space-2);
    }

    .brand-avatar {
        width: 32px;
        height: 32px;
    }

    .brand-name {
        font-size: 0.82rem;
    }

    .brand-sub {
        font-size: 0.6rem;
    }

    h1, .hero-title {
        font-size: clamp(1.85rem, 8.5vw, 2.25rem);
        line-height: 1.1;
    }

    .hero-credential-grid {
        gap: 5px;
    }

    .credential-pill {
        font-size: 0.74rem !important;
        padding: 5px 10px !important;
    }

    .card-badge-row {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .card-ui-preview {
        padding: 10px;
    }

    .ui-preview-row {
        font-size: 0.75rem;
    }

    .cred-item {
        padding: 8px 10px !important;
        gap: 10px !important;
    }

    .cred-info strong {
        font-size: 0.82rem !important;
    }

    .cred-info span {
        font-size: 0.72rem !important;
    }
}

/* --------------------------------------------------------------------------
   3. TABLET LANDSCAPE & SMALL DESKTOP (769px – 1023px)
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1023px) {
    header.site-header,
    .site-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: 72px !important;
        z-index: 99999 !important;
        background: rgba(8, 8, 13, 0.94) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        border-bottom: 1px solid var(--color-border) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 clamp(1.25rem, 3vw, 2rem) !important;
        box-sizing: border-box !important;
    }

    .header-inner {
        width: 100% !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .container {
        padding-inline: clamp(1.25rem, 3vw, 2rem);
    }

    .nav-desktop-links {
        gap: 16px;
    }

    .nav-link-item {
        font-size: 0.82rem;
    }

    .btn-nav-cta {
        min-height: 38px;
        padding: 8px 14px;
        font-size: 0.82rem;
    }

    .hero-grid {
        grid-template-columns: 1.15fr 0.85fr;
        gap: var(--space-6);
    }

    .cred-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .cred-strip-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-split-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }

    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-5);
    }

    .bento-col-8,
    .bento-col-4,
    .bento-col-6,
    .bento-col-12 {
        grid-column: span 1;
    }

    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lead-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-6);
    }
}

/* --------------------------------------------------------------------------
   4. TABLET BREAKPOINT (<= 992px) — SQUISHED SECTION & HOSPITALITY FIX
   -------------------------------------------------------------------------- */
@media (max-width: 992px) {
    .hospitality-grid, 
    .showcase-split, 
    .bento-split {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    /* Core Page Differentiation Responsive Stacking (<= 992px) */
    .cv-layout-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-8) !important;
    }

    .editorial-hero {
        grid-template-columns: 1fr !important;
        gap: var(--space-6) !important;
    }

    .editorial-portrait-frame {
        max-width: 280px;
        margin: 0 auto;
    }

    .mockup-app-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .financial-matrix {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .tech-pipeline {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .pipeline-arrow {
        transform: rotate(90deg) !important;
        margin: 4px auto !important;
        padding: 4px 0 !important;
    }

    .blog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* --------------------------------------------------------------------------
   5. MOBILE SAFEGUARDS FOR DIFFERENTIATED CORE PAGES (<= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .dossier-action-bar {
        position: relative !important;
        top: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        padding: 16px !important;
        text-align: center;
    }

    .dossier-id {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
        gap: 6px !important;
    }

    .dossier-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .dossier-actions .btn {
        width: 100% !important;
        justify-content: center;
    }

    .cv-timeline-stream {
        padding-left: 20px !important;
        margin-left: 6px !important;
        gap: 28px !important;
    }

    .cv-timeline-tick {
        left: -26px !important;
        width: 10px !important;
        height: 10px !important;
    }

    .cv-role-title {
        font-size: 1.15rem !important;
    }

    .mockup-chrome {
        padding: 10px 14px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .mockup-address-bar {
        max-width: 100% !important;
        width: 100% !important;
        order: 3;
    }

    .mockup-viewport {
        padding: 16px !important;
    }

    .mockup-app-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .mockup-tabs {
        width: 100% !important;
        justify-content: space-between !important;
        overflow-x: auto;
    }

    .manifesto-item {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        padding: 20px !important;
    }

    .matrix-title {
        font-size: 1.25rem !important;
    }

    .matrix-loss-stat,
    .matrix-gain-stat {
        font-size: 1.85rem !important;
    }

    .editorial-salutation {
        font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    }

    .editorial-pullquote {
        padding: 16px 18px !important;
        font-size: 1.02rem !important;
    }

    /* 5.5 Blog Engine Mobile Responsive Safeguards (<= 768px) */
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .blog-card-body {
        padding: 18px !important;
    }

    .blog-card-title {
        font-size: 1.2rem !important;
    }

    .post-author-box {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }

    .post-content {
        font-size: 1.02rem !important;
        line-height: 1.75 !important;
    }

    .post-content h2 {
        font-size: 1.5rem !important;
    }

    .post-content h3 {
        font-size: 1.25rem !important;
    }

    .post-content blockquote {
        padding: 16px 18px !important;
        font-size: 1.02rem !important;
    }

    .post-cta-box {
        padding: 20px !important;
        text-align: center;
    }

    .article-intro {
        font-size: 1.1rem !important;
        padding-left: 14px !important;
        line-height: 1.7 !important;
    }

    .faq-item {
        padding: 18px 20px !important;
    }

    .article-conclusion {
        padding: 22px 20px !important;
    }
}