/* ============================================================
   CITELANE - GLOBAL RESPONSIVE OVERRIDES
   Loaded LAST so it wins specificity ties.
   Covers desktop (≥1280), laptop/tablet-landscape (1024–1279),
   tablet (768–1023), large mobile (640–767), small mobile (<640).
   No content changes - purely layout adaptations.
   ============================================================ */

/* ---------- ROOT-LEVEL OVERFLOW GUARDS ---------- */
/* Use overflow-x:clip instead of hidden - `clip` doesn't create a scroll
   container, so position:sticky inside the document still works. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, iframe, canvas, picture, embed, object {
    max-width: 100%;
    height: auto;
}
iframe { width: 100%; }
table { max-width: 100%; }

/* Allow long words / URLs to wrap */
h1, h2, h3, h4, h5, h6, p, li, a, span, blockquote, code, pre {
    overflow-wrap: anywhere;
    word-break: break-word;
}
pre { overflow-x: auto; }

/* Ensure section containers never push the viewport horizontally */
section, header, footer, main, article, aside { max-width: 100%; }

/* ============================================================
   ≤ 1279px  (small laptops & tablet landscape)
   ============================================================ */
@media (max-width: 1279px) {
    /* Tame oversized display headings */
    h1.heading-display,
    .heading-display.text-6xl,
    .heading-display.text-7xl { font-size: clamp(2rem, 4.5vw, 3.5rem) !important; line-height: 1.1; }
}

/* ============================================================
   ≤ 1023px  (tablet & below - mobile menu activates here)
   ============================================================ */
@media (max-width: 1023px) {

    /* Custom non-Tailwind grids that lack their own breakpoints */
    .agent-hero-grid,
    .two-col,
    .grid-2 {
        grid-template-columns: 1fr !important;
    }

    /* Tailwind grids that go to 4–5 cols on desktop come down to 2 on tablet,
       BUT only if they don't already define a mobile-first 1-col base.
       (Grids with `grid-cols-1 md:grid-cols-2 lg:grid-cols-3` already work right.) */
    [class*="lg:grid-cols-4"]:not([class*="md:grid-cols-2"]):not([class*="grid-cols-1"]),
    [class*="lg:grid-cols-5"]:not([class*="md:grid-cols-2"]):not([class*="grid-cols-1"]),
    [class*="md:grid-cols-4"]:not([class*="grid-cols-1"]),
    [class*="md:grid-cols-3"]:not([class*="grid-cols-1"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    /* Section padding tighter on tablet */
    .section,
    section[class*="py-16"],
    section[class*="py-20"],
    section[class*="py-24"],
    section[class*="py-28"],
    section[class*="py-32"] {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Headlines */
    h1, .text-6xl, .text-7xl { font-size: clamp(1.85rem, 5.5vw, 3rem) !important; line-height: 1.15; }
    h2, .text-5xl           { font-size: clamp(1.5rem, 4.5vw, 2.4rem)  !important; line-height: 1.2;  }
    h3, .text-4xl           { font-size: clamp(1.25rem, 3.5vw, 1.875rem) !important; }

    /* Footer columns */
    #site-footer .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-5,
    #site-footer .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #site-footer .lg\:col-span-2 { grid-column: 1 / -1 !important; }

    /* Inline fixed width hero images / cards */
    [style*="width:600px"],
    [style*="width: 600px"],
    [style*="width:500px"],
    [style*="width: 500px"] { max-width: 100% !important; }
}

/* ============================================================
   ≤ 767px  (large mobile / small tablet portrait)
   ============================================================ */
@media (max-width: 767px) {

    /* Container padding */
    .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl,
    [class*="px-4"], [class*="px-6"], [class*="px-8"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Force 1-column ONLY for grids that don't already start with grid-cols-1 */
    .agent-hero-grid,
    .two-col,
    .grid-2, .grid-3, .grid-4, .grid-5,
    .footer-grid,
    .services-grid,
    .pain-points-grid,
    .pricing-grid,
    .stats-grid,
    .integrations-grid,
    .form-grid-2 {
        grid-template-columns: 1fr !important;
    }
    /* Tailwind: anything with .grid-cols-2/3/4/5 directly (no -1 fallback) → 1col on phone */
    .grid.grid-cols-3:not([class*="grid-cols-1"]),
    .grid.grid-cols-4:not([class*="grid-cols-1"]),
    .grid.grid-cols-5:not([class*="grid-cols-1"]) {
        grid-template-columns: 1fr !important;
    }
    /* Stat strips (grid-cols-2 lg:grid-cols-4) stay 2-up - already 2col on mobile by design */

    /* Footer back to 1-col */
    #site-footer .grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
    #site-footer .lg\:col-span-2 { grid-column: 1 / -1 !important; }
    #site-footer .py-16 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

    /* Headline scale */
    h1, .text-7xl, .text-6xl, .text-5xl { font-size: clamp(1.6rem, 7.5vw, 2.25rem) !important; line-height: 1.18; letter-spacing: -0.01em; }
    h2, .text-4xl                       { font-size: clamp(1.35rem, 6vw, 1.85rem)  !important; line-height: 1.22; }
    h3, .text-3xl                       { font-size: 1.25rem !important; }
    h4, .text-2xl                       { font-size: 1.125rem !important; }
    p.text-lg, p.text-xl                { font-size: 1rem !important; line-height: 1.6; }

    /* Section padding */
    section[class*="py-12"]  { padding-top: 2rem  !important; padding-bottom: 2rem  !important; }
    section[class*="py-16"]  { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    section[class*="py-20"]  { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
    section[class*="py-24"]  { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    section[class*="py-28"]  { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    section[class*="py-32"]  { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }

    /* Stack hero CTA buttons full-width */
    .flex.flex-col.sm\:flex-row,
    .sm\:flex-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .flex.flex-col.sm\:flex-row > a,
    .flex.flex-col.sm\:flex-row > button { width: 100%; text-align: center; justify-content: center; }

    /* Long inline meta rows wrap */
    .flex.items-center.gap-6,
    .flex.items-center.gap-8 { flex-wrap: wrap !important; gap: 0.75rem 1.25rem !important; }

    /* Pricing / card features lists keep readable */
    .pricing-card, .price-card { padding: 1.5rem !important; }

    /* Tables - make horizontally scrollable on mobile */
    .post-content table,
    .prose-blog table,
    table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Pull quote / large quotes */
    .wp-block-pullquote { padding: 2rem 1rem !important; }
    .wp-block-pullquote p { font-size: 1.125rem !important; }

    /* Fixed-pixel inline widths bow to viewport */
    [style*="width:600px"],
    [style*="width: 600px"],
    [style*="width:500px"],
    [style*="width: 500px"],
    [style*="width:480px"],
    [style*="width: 480px"],
    [style*="width:420px"],
    [style*="width: 420px"],
    [style*="max-width:600px"],
    [style*="max-width: 600px"] { width: 100% !important; max-width: 100% !important; }

    /* Newsletter / inline forms stack */
    .newsletter-inline .newsletter-form,
    .newsletter-form,
    form .flex { flex-direction: column !important; gap: 0.75rem !important; }
    .newsletter-inline .newsletter-form input,
    .newsletter-form input { width: 100% !important; }

    /* Cookie consent - stack */
    #cookie-consent { flex-direction: column; align-items: stretch; text-align: center; gap: 0.75rem; padding: 1rem; }
    #cookie-consent-accept { width: 100%; }

    /* Footer bottom row stacks */
    #site-footer .flex.flex-col.sm\:flex-row { gap: 1rem !important; text-align: center; }

    /* Logo size on header */
    #site-header img { height: 56px !important; }
    #site-header .h-16 { height: 3.5rem !important; }

    /* Mobile menu inner padding */
    #mobile-menu nav { padding: 1rem !important; }
}

/* ============================================================
   ≤ 480px  (small phones)
   ============================================================ */
@media (max-width: 480px) {
    h1, .text-7xl, .text-6xl, .text-5xl { font-size: clamp(1.5rem, 8vw, 2rem) !important; }

    /* Even the 2-up stat grid collapses on tiny screens */
    section .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
    .grid-cols-2.lg\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* Slightly tighter container */
    .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
        padding-left: 0.875rem !important;
        padding-right: 0.875rem !important;
    }

    /* Header logo */
    #site-header img { height: 48px !important; }

    /* Buttons */
    .px-7, .px-8 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .py-4         { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; }

    /* Footer keyword chips wrap nicely */
    #site-footer .flex.flex-wrap.gap-2 { gap: 0.375rem !important; }
}

/* ============================================================
   INLINE GRID OVERRIDES
   Some templates use style="display:grid; grid-template-columns:..."
   directly. Inline styles win specificity, so we override with
   attribute selectors + !important.
   ============================================================ */
@media (max-width: 1023px) {
    /* Sidebar layouts like 1fr 340px collapse */
    [style*="grid-template-columns:1fr 340px"],
    [style*="grid-template-columns: 1fr 340px"],
    [style*="grid-template-columns:1fr 320px"],
    [style*="grid-template-columns: 1fr 320px"],
    [style*="grid-template-columns:240px 1fr"],
    [style*="grid-template-columns: 240px 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    /* Sticky sidebar inside a collapsed grid stops being sticky */
    [style*="position:sticky"],
    [style*="position: sticky"] { position: static !important; top: auto !important; }
}
@media (max-width: 767px) {
    /* Two-equal-column inline grids → 1 col on phone */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:repeat(2,1fr)"],
    [style*="grid-template-columns: repeat(2, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
    /* Inline padding/gap on outer grids gets some breathing room */
    [style*="gap:3rem"],
    [style*="gap: 3rem"],
    [style*="gap:4rem"],
    [style*="gap: 4rem"] { gap: 1.5rem !important; }
}

/* ============================================================
   AI AGENTS DIAGRAM - show on every viewport, scaled to fit
   Uses layout-collapse trick: scale from top-left, then add
   negative margin on BOTH axes so the layout footprint shrinks
   to match the visual size. Without this the 600px-wide canvas
   pushes the column past the viewport, cutting off buttons.
   ============================================================ */
@media (max-width: 1023px) {
    .agent-hero-grid { grid-template-columns: 1fr !important; gap: 1.25rem !important; min-width: 0; }
    .agent-hero-grid > * { min-width: 0; }

    /* Kill the inline padding-top:2rem that was added to align text with the diagram */
    .agent-hero-grid > [style*="padding-top:2rem"],
    .agent-hero-grid > [style*="padding-top: 2rem"] { padding-top: 0 !important; }

    /* Show diagram below the text, centered, clipped to wrap width */
    .agent-hero-grid .agent-diagram-wrap {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        margin-top: 1.5rem;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .agent-hero-grid .agent-diagram-wrap .ag-canvas {
        transform-origin: top left !important;
    }
}

/* Tablet portrait/landscape - scale 0.7 */
@media (min-width: 481px) and (max-width: 1023px) {
    .agent-hero-grid .agent-diagram-wrap .ag-canvas {
        transform: scale(0.7) !important;
        margin-bottom: calc((0.7 - 1) * 665px) !important;  /* −199.5px */
        margin-right:  calc((0.7 - 1) * 600px) !important;  /* −180px   */
    }
}

/* Large phone - scale 0.55 */
@media (min-width: 381px) and (max-width: 480px) {
    .agent-hero-grid .agent-diagram-wrap .ag-canvas {
        transform: scale(0.55) !important;
        margin-bottom: calc((0.55 - 1) * 665px) !important; /* −299.25px */
        margin-right:  calc((0.55 - 1) * 600px) !important; /* −270px    */
    }
}

/* Small phone - scale 0.45 */
@media (max-width: 380px) {
    .agent-hero-grid .agent-diagram-wrap .ag-canvas {
        transform: scale(0.45) !important;
        margin-bottom: calc((0.45 - 1) * 665px) !important;
        margin-right:  calc((0.45 - 1) * 600px) !important;
    }
}

/* ============================================================
   TAILWIND PT-* / PB-* MOBILE TIGHTENING
   The catch-all earlier targeted py-* - pt-* / pb-* are separate.
   ============================================================ */
@media (max-width: 767px) {
    section[class*="pt-20"], section[class*="pt-24"],
    section[class*="pt-28"], section[class*="pt-32"] {
        padding-top: 1.75rem !important;
    }
    section[class*="pb-12"], section[class*="pb-14"],
    section[class*="pb-16"], section[class*="pb-20"],
    section[class*="pb-24"], section[class*="pb-28"] {
        padding-bottom: 2rem !important;
    }
    /* sm: variants resolve at ≥640 - at <640 keep the base small */
    section[class*="sm:pt-24"], section[class*="sm:pt-28"], section[class*="sm:pt-32"] {
        padding-top: 1.75rem !important;
    }
    section[class*="sm:pb-14"], section[class*="sm:pb-16"], section[class*="sm:pb-20"] {
        padding-bottom: 2rem !important;
    }
}

/* ============================================================
   HOME PAGE HERO - 3D ORBIT ANIMATION ON MOBILE/TABLET
   The .hero-3d-scene is 560×450, hidden below 1024 by default.
   We unhide it, then size the wrapper exactly to match the
   scaled visual so there is NO empty gap below the animation.
   ============================================================ */
@media (max-width: 1023px) {
    .hero-3d-wrapper {
        --scene-scale: 0.85;
        display: block !important;
        overflow: hidden !important;
        position: relative !important;
        z-index: 1 !important;
        isolation: isolate !important;
        left: auto !important;
        margin: 1rem auto 0 !important;
        /* Wrapper crops to the orbit's content extent (320px of the 450px
           canvas) so there's no empty space, but slightly taller than before
           to accommodate the larger scale + pulse rings + labels. */
        width:  calc(560px * var(--scene-scale)) !important;
        height: calc(320px * var(--scene-scale)) !important;
        min-height: 0 !important;
        max-width: 100% !important;
    }
    .hero-3d-scene {
        transform: scale(var(--scene-scale)) !important;
        transform-origin: top left !important;
        position: absolute !important;
        /* Center orbit (scene y=225) in wrapper: (320/2 - 225) * scale = -65 * scale */
        top:  calc(-65px * var(--scene-scale)) !important;
        left: 0 !important;
    }
    section .grid.lg\:grid-cols-2 > * { min-width: 0; }
    section .grid.lg\:grid-cols-2.items-center { align-items: stretch !important; }
}

/* Bigger on every viewport - chosen so wrapper fits the smallest viewport
   in each range without overflowing. */
@media (min-width: 768px) and (max-width: 1023px) { .hero-3d-wrapper { --scene-scale: 1.05; } }
@media (min-width: 481px) and (max-width: 767px) { .hero-3d-wrapper { --scene-scale: 0.85; } }
@media (min-width: 381px) and (max-width: 480px) { .hero-3d-wrapper { --scene-scale: 0.72; } }
@media (max-width: 380px)                        { .hero-3d-wrapper { --scene-scale: 0.62; } }

/* ============================================================
   POST / BLOG CONTENT
   ============================================================ */
@media (max-width: 767px) {
    .post-content,
    .prose-blog {
        font-size: 1rem !important;
        line-height: 1.75 !important;
    }
    .post-content h1, .prose-blog h1 { font-size: 1.625rem !important; }
    .post-content h2, .prose-blog h2 { font-size: 1.375rem !important; }
    .post-content h3, .prose-blog h3 { font-size: 1.15rem !important; }
    .post-content blockquote,
    .wp-block-quote { padding: 1rem 1.25rem !important; margin: 1.5rem 0 !important; }
    .post-content pre { padding: 1rem !important; font-size: 0.8125rem !important; }
    .post-navigation { grid-template-columns: 1fr !important; }
}

/* ============================================================
   TABLET LANDSCAPE TUNING (768–1023)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Trim outer container padding so 2-col grids breathe */
    .mx-auto.max-w-7xl,
    .mx-auto.max-w-6xl { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    /* Keep service / feature grids 2-up here for legibility */
    .services-grid,
    .grid-3,
    [class*="md:grid-cols-3"]:not(.stats-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    #site-header, #site-footer, #mobile-menu, #grid-bg, #cookie-consent { display: none !important; }
    body { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}