/* ==============================
   RESPONSIVE OVERRIDES
   Applies to all pages
   ============================== */

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Footer link hover — consistent across all pages */
footer a {
    transition: color 0.28s ease;
}
footer a:hover {
    color: #ffdcc1 !important;
}

/* ── TABLET  641px – 1024px ── */
@media (min-width: 641px) and (max-width: 1024px) {
    .px-margin-page {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .py-section-gap {
        padding-top: 96px !important;
        padding-bottom: 96px !important;
    }
    .mt-section-gap { margin-top: 96px !important; }
    .pb-section-gap { padding-bottom: 96px !important; }
    .pt-section-gap { padding-top: 96px !important; }
    .gap-section-gap { gap: 64px !important; }
    .gap-\[200px\] { gap: 96px !important; }

    footer > div {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* ── MOBILE  ≤ 640px ── */
@media (max-width: 640px) {
    /* Spacing */
    .px-margin-page {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .py-section-gap {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
    .mt-section-gap { margin-top: 56px !important; }
    .pb-section-gap { padding-bottom: 56px !important; }
    .pt-section-gap { padding-top: 56px !important; }
    .gap-section-gap { gap: 48px !important; }

    /* Arbitrary value classes */
    .pt-\[120px\] { padding-top: 56px !important; }
    .pb-\[80px\]  { padding-bottom: 40px !important; }
    .gap-\[200px\] { gap: 72px !important; }
    .min-h-\[70vh\] { min-height: 50vh !important; }

    /* Typography */
    .text-headline-display {
        font-size: clamp(40px, 11vw, 68px) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.03em !important;
    }
    .text-headline-lg {
        font-size: clamp(28px, 7.5vw, 42px) !important;
        line-height: 1.15 !important;
    }
    .text-headline-md {
        font-size: clamp(17px, 4.5vw, 24px) !important;
        line-height: 1.2 !important;
    }
    .text-body-lg {
        font-size: 16px !important;
        line-height: 1.65 !important;
    }
    .text-accent-script {
        font-size: 22px !important;
    }

    /* Max-width overrides so text doesn't overflow */
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl,
    .max-w-2xl,
    .max-w-xl,
    .max-w-lg,
    .max-w-md {
        max-width: 100% !important;
    }

    /* Footer padding (inline style) */
    footer > div {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        gap: 32px !important;
    }

    /* Hero CTA buttons stack vertically */
    .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
    }
    .flex.flex-col.md\:flex-row > button,
    .flex.flex-col.md\:flex-row > a {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Service tags */
    .flex.flex-wrap { gap: 10px !important; }
    span.px-5 {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Index.html service cards: reduce inner padding */
    .p-12 {
        padding: 20px !important;
    }
    /* gap-gutter (32px) inside narrow cards → tighter */
    .grid.grid-cols-12.gap-gutter {
        gap: 16px !important;
    }
    /* Inner 12-col grid: collapse to single column */
    .grid.grid-cols-12 {
        grid-template-columns: 1fr !important;
    }
    /* Reset col-span inside collapsed grid */
    [class*="col-span-"] {
        grid-column: span 1 !important;
    }
    /* Restore pl/pr order helpers */
    .order-2 { order: 2 !important; }
    .order-1 { order: 1 !important; }
    /* Override md:order on mobile */
    .md\:order-1, .md\:order-2 { order: unset; }

    /* People / work grid: single column */
    .grid.md\:grid-cols-3,
    .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Footer grid: single column */
    footer .grid,
    footer .grid.md\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Marquee text size */
    .marquee-container .text-headline-md {
        font-size: 18px !important;
    }

    /* Nav overlay bottom bar: stack */
    #navMenu > div:last-child {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* People card image height */
    .h-80 { height: 240px !important; }

    /* Tall arbitrary heights */
    .h-\[500px\] { height: 280px !important; }

    /* CTA buttons */
    button.px-10.py-4.rounded-full,
    button.px-12.py-5 {
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
        width: 100% !important;
        justify-content: center !important;
    }

    /* Jobs listing items padding */
    .px-8 { padding-left: 16px !important; padding-right: 16px !important; }
    .py-8 { padding-top: 20px !important; padding-bottom: 20px !important; }

    /* Prevent any element from causing horizontal scroll */
    * { max-width: 100%; }
    img { height: auto; }

    /* Fix sub-12px label text (process steps, footer headings) */
    span[style*="font-size:11px"],
    footer h4[style*="font-size:11px"] {
        font-size: 12px !important;
    }

    /* People: About Us 2-col grid → single column */
    #about-grid {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }

    /* People: About Us section reduced padding */
    #about-section {
        padding: 64px 20px !important;
    }

    /* People: inline-flex CTA button full width */
    #about-section a[style*="inline-flex"] {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Work: hero section inline padding override */
    #workHero {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Work CTA dark section with inline padding */
    section[style*="padding:140px 64px"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    /* Case pages (karbanx, idyll, dotko): hero section with 120px 64px 80px inline padding */
    section[style*="padding:120px 64px 80px"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-top: 64px !important;
        padding-bottom: 48px !important;
    }

    /* All inline 2-col grids → single column on mobile */
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }

    /* Inline-flex buttons inside narrow sections */
    #about-section a[style*="inline-flex"],
    section[style*="padding:120px 64px 80px"] a[style*="inline-flex"] {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* ── TABLET  641px – 1024px (additional) ── */
@media (min-width: 641px) and (max-width: 1024px) {
    .p-12 { padding: 28px !important; }
    .grid.grid-cols-12.gap-gutter { gap: 20px !important; }

    /* People: About Us section reduced padding on tablet */
    #about-section {
        padding: 80px 40px !important;
    }
    #about-grid {
        gap: 48px !important;
    }

    /* Work: hero inline padding on tablet */
    #workHero {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    /* Work CTA dark section with inline padding on tablet */
    section[style*="padding:140px 64px"] {
        padding-left: 40px !important;
        padding-right: 40px !important;
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }

    /* Case pages: hero section padding on tablet */
    section[style*="padding:120px 64px 80px"] {
        padding-left: 40px !important;
        padding-right: 40px !important;
        padding-top: 80px !important;
        padding-bottom: 56px !important;
    }

    /* Reduce inner text-col padding in service cards */
    .md\:pl-12 { padding-left: 24px !important; }
    .md\:pr-12 { padding-right: 24px !important; }

    .text-headline-display {
        font-size: clamp(56px, 8vw, 96px) !important;
        line-height: 1.08 !important;
    }
    .text-headline-lg {
        font-size: clamp(36px, 5vw, 52px) !important;
    }
    .text-headline-md {
        font-size: clamp(20px, 3vw, 28px) !important;
    }
    .text-body-lg {
        font-size: 17px !important;
    }

    /* Max-width overrides */
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl { max-width: 100% !important; }

    /* People grid: 2-col on tablet (vs 3-col on desktop) */
    .grid.md\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}