/* =========================================================================
   CounTree Concepts — responsive
   Breakpoints are placed where the layouts actually break, not at device
   names. Verified at 1920 / 1440 / 1366 / 1280 / 1024 / 768 / 430 / 390 / 360.
   ====================================================================== */

/* Wide desktops: hold the measure, grow the gutters. */
@media (min-width: 1600px) {
    :root {
        --container: 1340px;
        --gutter: 2.5rem;
    }
}

/* ---------- 1180px: nav starts to crowd ---------- */
@media (max-width: 1180px) {
    :root { --space-3xl: 7rem; }

    .nav-menu { gap: 1.1rem; }
}

/* ---------- 1024px: tablet landscape ---------- */
@media (max-width: 1024px) {
    :root {
        --space-2xl: 4.5rem;
        --space-3xl: 5.5rem;
        --nav-height: 68px;
    }

    /* Collapse the desktop menu into the panel. */
    .nav-menu { display: none; }
    .nav-toggle { display: flex; }
    .nav-cta-desktop { display: none; }

    .section-head-split {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .editorial {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    .editorial-flip .editorial-media { order: 0; }

    .editorial-media { aspect-ratio: 16 / 9; }

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

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

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

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

    .cta-inner {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-lg) var(--space-md);
    }

    .value-item { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}

/* ---------- 860px: portrait tablet ---------- */
@media (max-width: 860px) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + var(--space-2xl));
        padding-bottom: var(--space-lg);
    }

    .hero-title { max-width: 14ch; }

    .hero-index {
        margin-top: var(--space-xl);
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .hero-index-item {
        padding-block: 0.7rem;
        border-bottom: 1px solid var(--border-invert);
    }

    .hero-index-item:last-child { border-bottom: 0; padding-bottom: 0; }

    /* The scrim becomes a vertical wash, because the type now sits over the
       whole frame rather than the left third. */
    .hero-scrim {
        background: linear-gradient(to top, rgba(20, 28, 15, 0.96) 12%, rgba(20, 28, 15, 0.76) 55%, rgba(20, 28, 15, 0.52) 100%);
    }

    .page-hero-scrim {
        background: linear-gradient(to top, rgba(31, 42, 24, 0.96) 10%, rgba(31, 42, 24, 0.8) 70%, rgba(31, 42, 24, 0.62) 100%);
    }

    .brand-hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + var(--space-xl));
    }

    .brand-lockup { gap: var(--space-md); }

    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery-item-wide { grid-column: span 2; aspect-ratio: 16 / 9; }

    .map-frame { aspect-ratio: 4 / 3; }
}

/* ---------- 680px: phone ---------- */
@media (max-width: 680px) {
    :root {
        --gutter: 1.25rem;
        --space-xl: 3rem;
        --space-2xl: 3.75rem;
        --space-3xl: 4.25rem;
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .partners,
    .steps { grid-template-columns: minmax(0, 1fr); }

    .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }

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

    .footer-grid { grid-template-columns: minmax(0, 1fr); }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn { width: 100%; }
    .btn-row .btn { width: auto; flex: 1 1 auto; min-width: 180px; }

    .lightbox-prev { left: 0.5rem; }
    .lightbox-next { right: 0.5rem; }
    .lightbox-figure img { max-height: 66vh; }

    .editorial-media,
    .project-card-media { aspect-ratio: 3 / 2; }
}

/* ---------- 420px: small phones (390, 375, 360) ---------- */
@media (max-width: 420px) {
    :root { --gutter: 1.0625rem; }

    .nav-logo img { height: 34px; }

    .hero-title { max-width: 100%; }

    .facts { grid-template-columns: minmax(0, 1fr); }

    .gallery { grid-template-columns: minmax(0, 1fr); }
    .gallery-item-wide { grid-column: span 1; aspect-ratio: 4 / 3; }

    .btn-row .btn { width: 100%; flex: 1 1 100%; }

    .ticks { grid-template-columns: minmax(0, 1fr); }
}

/* Short landscape phones: stop the hero eating the whole viewport. */
@media (max-height: 560px) and (orientation: landscape) {
    .hero,
    .brand-hero { min-height: auto; }

    .nav-panel {
        justify-content: flex-start;
        overflow-y: auto;
    }

    .nav-panel-link { font-size: 1.5rem; padding: 0.45rem 0; }
}

/* Coarse pointers: no hover-scale, larger tap targets. */
@media (hover: none) {
    .editorial:hover .editorial-media img,
    .project-card:hover .project-card-media img,
    .gallery-item:hover img { transform: none; }

    .project-card:hover { transform: none; }

    .nav-panel-link { padding-block: 0.85rem; }
}

/* Print: readable, no chrome. */
@media print {
    .nav,
    .nav-panel,
    .lightbox,
    .cta,
    .hero-actions,
    .btn { display: none !important; }

    body { background: #fff; color: #000; }

    .hero,
    .page-hero,
    .brand-hero,
    .section-dark,
    .footer {
        background: #fff !important;
        color: #000 !important;
        padding-block: 1rem;
    }
}