/*
 * zanka-responsive.css
 * Mobile-first overrides loaded in both the GrapesJS canvas preview
 * and on the live front end (blank template + wp_head).
 *
 * Targets:
 *  - GrapesJS blocks (data-gjs-name attributes)
 *  - Imported HTML pages (inline-style patterns via [style*="..."] selectors)
 */

/* ── News/Article CTA embed (ZANKA_POSTS_REWORK_PLAN.md) ─────────────────────
 * Inserted via the standalone News/Articles editor's custom Quill blot and
 * saved verbatim into post_content — needs to render correctly wherever that
 * content ends up: the live single-post page, and the editor's own live
 * preview iframe (which loads this stylesheet). The editor's own Quill
 * canvas has a separate, near-identical copy in zanka-posts.css (that
 * stylesheet isn't loaded on the front end, so it can't be the only copy).
 */
.zanka-posts-cta-embed {
    display: block;
    margin: 16px 0;
    padding: 14px 18px;
    border-radius: 8px;
    background: var(--zanka-primary, #3b82f6);
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}
.zanka-posts-cta-embed.zanka-posts-cta-contact {
    background: #f1f5f9;
    color: #0f172a;
    border: 1.5px dashed #cbd5e1;
}

/* ── Tablet (≤ 1024px) ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Three-column grids become two */
    [style*="repeat(3, 1fr)"],
    [style*="repeat(3,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Four-column footer grids become two */
    [style*="1.8fr 1fr 1fr 1fr"],
    [style*="2fr 1fr 1fr 1fr"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ── Mobile (≤ 768px) ────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ── Grid: collapse ALL inline-style fixed column layouts ── */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* ── auto-fit grids: keep working but clamp min so they stack sooner ── */
    [style*="repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Section / header / footer padding ── */
    section,
    header,
    footer,
    [data-gjs-name] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* ── Inner wrapper max-width containers ── */
    [style*="max-width: 1080px"],
    [style*="max-width:1080px"],
    [style*="max-width: 1100px"],
    [style*="max-width:1100px"],
    [style*="max-width: 960px"],
    [style*="max-width:960px"],
    [style*="max-width: 900px"],
    [style*="max-width:900px"] {
        padding: 0 !important;
    }

    /* ── Reduce large vertical gaps on grids ── */
    [style*="gap: 5rem"],  [style*="gap:5rem"],
    [style*="gap: 6rem"],  [style*="gap:6rem"],
    [style*="gap: 4rem"],  [style*="gap:4rem"],
    [style*="gap: 3rem"],  [style*="gap:3rem"] {
        gap: 1.5rem !important;
    }

    /* ── Headings: clamp imported large font sizes ── */
    h1 { font-size: clamp(1.75rem, 8vw, 2.5rem) !important; line-height: 1.15 !important; }
    h2 { font-size: clamp(1.4rem,  6vw, 2rem)   !important; }
    h3 { font-size: clamp(1rem,    4vw, 1.2rem)  !important; }

    /* ── Navigation: wrap instead of overflow ── */
    header > div > nav,
    header nav,
    [data-gjs-name="Nav"] nav {
        flex-wrap: wrap !important;
        gap: 0.6rem !important;
    }

    /* Imported HTML sticky header: allow height to grow */
    header[style*="height: 76px"],
    header[style*="height:76px"] {
        height: auto !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
    header > div[style*="height: 76px"],
    header > div[style*="height:76px"] {
        height: auto !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        padding: 0 !important;
    }

    /* ── Flex rows that shouldn't stay side-by-side ── */
    /* space-between flex containers (CTA bands, footers) */
    [style*="justify-content:space-between"],
    [style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
    }

    /* ── Hero sections: reduce oversized vertical padding ── */
    section[style*="padding: 7rem"],
    section[style*="padding:7rem"],
    section[style*="padding: 6rem"],
    section[style*="padding:6rem"] {
        padding-top:    3rem !important;
        padding-bottom: 3rem !important;
    }

    /* ── Buttons: stack them on small screens ── */
    [style*="display: flex"][style*="gap: 1rem"] a,
    [style*="display:flex"][style*="gap:1rem"] a {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        justify-content: center;
    }

    /* ── GrapesJS block-specific fixes ── */

    /* About block: photo above text */
    [data-gjs-name="About"] > div {
        grid-template-columns: 1fr !important;
    }
    [data-gjs-name="About"] > div > div:first-child {
        min-height: 220px !important;
    }

    /* Contact block */
    [data-gjs-name="Contact"] > div > div:last-child {
        grid-template-columns: 1fr !important;
    }

    /* Footer block */
    [data-gjs-name="Footer"] > div > div:first-child {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    /* Footer bottom bar */
    [data-gjs-name="Footer"] [style*="justify-content:space-between"],
    [data-gjs-name="Footer"] [style*="justify-content: space-between"] {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    /* Header block: collapse the nav behind a burger toggle. The nav sits inline
       on desktop (its default inline style); below this breakpoint it's hidden
       and only shown again once the sibling checkbox is checked. Pure CSS —
       no JS dependency for a page's primary navigation to keep working. */
    [data-gjs-name="Header"] .zanka-nav-burger {
        display: flex !important;
    }
    [data-gjs-name="Header"] nav.zanka-nav-links {
        display: none !important;
        flex-basis: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
        padding-top: 12px !important;
    }
    [data-gjs-name="Header"] .zanka-nav-toggle-input:checked ~ nav.zanka-nav-links {
        display: flex !important;
    }
    [data-gjs-name="Header"] .zanka-nav-toggle-input:checked ~ .zanka-nav-burger span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    [data-gjs-name="Header"] .zanka-nav-toggle-input:checked ~ .zanka-nav-burger span:nth-child(2) {
        opacity: 0;
    }
    [data-gjs-name="Header"] .zanka-nav-toggle-input:checked ~ .zanka-nav-burger span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
    [data-gjs-name="Header"] .zanka-nav-burger span {
        transition: transform 0.15s ease, opacity 0.15s ease;
    }
}

/* ── Small mobile (≤ 480px) ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    section,
    header,
    footer,
    [data-gjs-name] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Services / Features grid min-item width */
    [style*="repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }

    /* Credential cards in imported hero */
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    h1 { font-size: clamp(1.5rem, 9vw, 2rem) !important; }
    h2 { font-size: clamp(1.25rem, 7vw, 1.6rem) !important; }
}