/*
 * ztech-home.css — front-page layout glue.
 *
 * ADDITIVE to ztech-design.css (which is frozen). The approved design
 * handled responsive re-layout in the canvas runtime's JavaScript, not in
 * CSS, so those breakpoints are re-expressed here as real media queries.
 * Inline styles in the templates force !important here.
 *
 * Enqueued only on core templates, after ztech-design.
 */

/* ── Hero (micro-sprint 3, section 1) ───────────────────────────────── */

/* Desktop grid is 0.85fr / 1.05fr; stack below the design's ~960px breakpoint. */
@media (max-width: 960px) {
    #zt-home-hero > div:last-child {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    #zt-home-hero h1 {
        font-size: clamp(34px, 8vw, 52px) !important;
    }
    #zt-home-hero .zt-diag-glow-wrap > div {
        padding: 24px !important;
    }
}

@media (max-width: 520px) {
    #zt-home-hero {
        padding: 24px 14px 40px !important;
    }
    #zt-home-hero > div:last-child > div:first-child {
        padding: 26px 22px 30px !important;
    }
}

/* ── Mini-services strip (3.2) — design is a fixed 5-col grid ────────── */
@media (max-width: 900px) {
    .zt-mini-strip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
    .zt-mini-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ── Service grid (3.2) — design breakpoints 1 / 2 / 3 / 4 cols ─────── */
@media (max-width: 1199px) {
    .zt-home-svc-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 899px) {
    .zt-home-svc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 559px) {
    .zt-home-svc-grid { grid-template-columns: 1fr !important; }
}

/* ── Stat band (3.3) — 4 tiles → 2 on narrow screens ──────────────── */
@media (max-width: 700px) {
    .zt-home-stat-row { grid-template-columns: repeat(2, 1fr) !important; }
    /* left divider only between columns, so kill it on the left column */
    .zt-home-stat-row > .lp-tile:nth-child(2n + 1) {
        border-left: none !important;
        padding-left: 0 !important;
    }
}
@media (max-width: 380px) {
    .zt-home-stat-row { grid-template-columns: 1fr !important; }
    .zt-home-stat-row > .lp-tile {
        border-left: none !important;
        padding-left: 0 !important;
    }
}

/* ── Blog teaser (3.7) — 4 → 2 → 1 cols ──────────────────────────── */
@media (max-width: 899px) {
    .zt-home-blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 559px) {
    .zt-home-blog-grid { grid-template-columns: 1fr !important; }
}

/* ── Our Story teaser (3.7) — stack card contents on phones ───────── */
@media (max-width: 640px) {
    .zt-home-story-card { flex-direction: column !important; align-items: flex-start !important; }
}

/* ── Service area (3.8) — text over map on narrow screens ─────────── */
@media (max-width: 899px) {
    .zt-home-area-grid { grid-template-columns: 1fr !important; }
}

/* ── Web-design showcase (3.4) — tighten the arrow gutter on phones ── */
@media (max-width: 640px) {
    .zt-showcase-carousel > div:last-child { padding: 0 !important; }
    .zt-showcase-carousel .zt-showcase-arrow-prev,
    .zt-showcase-carousel .zt-showcase-arrow-next {
        top: auto !important;
        bottom: -52px !important;
        transform: none !important;
    }
    .zt-showcase-carousel .zt-showcase-arrow-prev { left: calc(50% - 70px) !important; }
    .zt-showcase-carousel .zt-showcase-arrow-next { right: calc(50% - 70px) !important; }
    .zt-showcase-carousel > div:last-child > div:last-child { margin-top: 56px !important; }
}

/* ══ Category pages (single-ztech_category.php) ══════════════════════ */

@media (max-width: 699px) {
    .zt-cat-process-grid { grid-template-columns: 1fr !important; }
    .zt-cat-gallery-grid { grid-template-columns: 1fr !important; }
    .zt-cat-card-grid { grid-template-columns: 1fr !important; }
}
.zt-cat-build-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 999px) {
    .zt-cat-build-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 639px) {
    .zt-cat-build-grid { grid-template-columns: 1fr !important; }
}
.zt-cat-hero-copy p { margin: 0 0 10px; }
.zt-cat-hero-copy p:last-child { margin-bottom: 0; }

/* Category intro "Read more" — native <details>, no JS */
.zt-cat-intro-more { margin-top: 0; }
.zt-cat-intro-more > summary { list-style: none; }
.zt-cat-intro-more > summary::-webkit-details-marker { display: none; }
.zt-cat-intro-more > summary:focus-visible { outline: 2px solid #8fd4ec; outline-offset: 2px; border-radius: 4px; }
.zt-cat-process-line { pointer-events: none; }
@media (max-width: 760px) {
    .zt-cat-process-line { display: none !important; }
}

/* ══ Content Page template (templates/tmpl-content-page.php) — legal etc. ══ */
.zt-content-page-body > * { margin: 0 0 18px; }
.zt-content-page-body > *:last-child { margin-bottom: 0; }
.zt-content-page-body h2 {
    font-family: var(--font-heading, Inter);
    font-weight: 500;
    font-size: 21px;
    line-height: 1.3;
    color: #e7e6f0;
    margin: 34px 0 12px;
}
.zt-content-page-body h3 {
    font-family: var(--font-heading, Inter);
    font-weight: 500;
    font-size: 16.5px;
    color: #e7e6f0;
    margin: 26px 0 10px;
}
.zt-content-page-body a {
    color: #5eb8e6;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.zt-content-page-body a:hover { color: #8fd4ec; }
.zt-content-page-body ul,
.zt-content-page-body ol { padding-left: 22px; }
.zt-content-page-body li { margin: 0 0 8px; }
.zt-content-page-body strong { color: #e7e6f0; }
.zt-content-page-body hr {
    border: 0;
    border-top: 1px solid rgba(47,143,208,.18);
    margin: 32px 0;
}

/* ══ Blog index (templates/tmpl-blog.php) + Article (single.php) ══ */
.zt-blog-card:hover { border-color: rgba(55,224,216,.35) !important; transform: translateY(-3px); }
@media (max-width: 900px) {
    .zt-blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .zt-blog-symptoms { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px) {
    .zt-blog-grid { grid-template-columns: 1fr !important; }
    .zt-blog-symptoms { grid-template-columns: 1fr !important; }
}
.zt-article-body h2 { font-size: 19px; margin: 22px 0 10px; }
.zt-article-body p { font-size: 14.5px; line-height: 1.75; color: #a9a7bd; }
.zt-article-body ul { padding-left: 20px; }
.zt-article-body li { font-size: 14.5px; line-height: 1.6; color: #c3c1d4; margin: 0 0 8px; }

/* ══ Glossary (templates/tmpl-glossary.php) ══ */
@media (max-width: 900px) {
    .zt-gloss-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px) {
    .zt-gloss-grid { grid-template-columns: 1fr !important; }
}

/* ══ FAQ page (templates/tmpl-faq.php) ══ */
.zt-faq-cat-card:hover { border-color: rgba(47,143,208,.5) !important; transform: translateY(-1px); }
@media (max-width: 520px) {
    .zt-faq-cat-grid { grid-template-columns: 1fr !important; }
}

/* ══ Accessibility (site-wide rules are in style.css) ═══════════════ */
.zt-faq-question:focus-visible { outline: 2px solid #8fd4ec; outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
    #ztech-ambient-bg, .zt-aurora, [class*="marquee"] { animation: none !important; }
}
.zt-breadcrumbs a:hover { color: #bfe6f5; }

/* ══ Brand marquee — mask on the static row (see inc/home-sections.php),
   so the plugin's mask on the moving .zt-logo-track must be cleared, else
   the fade scrolls away with the track and the edges cut hard. ══ */
.zt-logo-wall .zt-logo-track {
    -webkit-mask-image: none !important;
    mask-image: none !important;
}