/* ============================================================
   Village template — responsive.css
   Desktop-first cascade: 1400 → 1320 → 1200 → 1150 → 900 → 800 → 600 → 450
   Per dev notes §8 — typography scaling and conditional display
   only. Layout shifts that change which columns content occupies
   belong in grid.css.
   ============================================================ */

/* ---- 1400px - wide desktop trim -------------------------- */
@media (max-width: 1400px) {
    :root { --band-inner-max: 1040px; }
}

/* ---- 1200px - desktop -> narrow desktop ------------------ */
@media (max-width: 1200px) {
    .pillar-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 1100px - narrow desktop -> tablet landscape --------- */
@media (max-width: 1100px) {
    /* Loosen the trio to cols 2-24 so content has more room */
    .row       { grid-column: 2 / 24; }
    .row-lm    { grid-column: 1 / 2; }
    .row-rm    { grid-column: 24 / 25; }

    /* Narrow the sidebar columns slightly at this breakpoint */
    .content-inner:has(.left-col):not(:has(.right-col)) {
        grid-template-columns: 14rem 1fr;
        --sidebar-correction: 8.5rem; /* (14rem + 3rem) / 2 */
    }
    .content-inner:not(:has(.left-col)):has(.right-col) {
        grid-template-columns: 1fr 14rem;
        --sidebar-correction: -8.5rem;
    }
    .content-inner:has(.left-col):has(.right-col) {
        grid-template-columns: 13rem 1fr 13rem;
    }

    .pillar-grid { grid-template-columns: repeat(2, 1fr); }
    .levels      { grid-template-columns: repeat(2, 1fr); }
    .offerings-grid { grid-template-columns: 1fr; gap: 2rem; }

    .founder-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .founder-photo { aspect-ratio: 16 / 10; max-width: 32rem; }

    .welcome-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 2rem;
    }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

    :root { --row-pad-y: 4rem; --band-inner-max: 100%; }
}

/* ---- 900px - tablet portrait ----------------------------- */
@media (max-width: 900px) {
    .hero-band { padding: 3rem 0 4rem; }
    .hero-content { padding: 3rem 0 4rem; }
    .hero-actions .btn { padding: 0.75rem 1.25rem; font-size: 0.95rem; }

    /* The top utility menu and the left sidebar both move into
       the mobile drawer (see template.css). Hide their inline
       renders at this breakpoint and surface the hamburger. */
    .top-nav { display: none; }
    .left-col { display: none; }
    .hamburger { display: flex; }

    /* Right column still stacks below content (if used) — the
       drawer carries navigation, not arbitrary right-column
       widgets which may be non-nav. Override all :has() variants. */
    .content-inner,
    .content-inner:has(.left-col):not(:has(.right-col)),
    .content-inner:not(:has(.left-col)):has(.right-col),
    .content-inner:has(.left-col):has(.right-col) {
        grid-template-columns: 1fr;
        --sidebar-correction: 0px;
        gap: 2rem;
    }
    .content-main { order: 1; }
    .right-col    { order: 3; position: static; }

    /* Visual separator between article and stacked right column */
    .right-col {
        padding-top: 2rem;
        border-top: 1px solid var(--hairline);
    }
}

/* ---- 700px - small tablet / large phone ------------------ */
@media (max-width: 700px) {
    .pillar-grid { grid-template-columns: 1fr; }
    .levels      { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }

    /* (.top-nav already hidden at 900px; hamburger takes over.) */

    .founder-milestones {
        flex-direction: column;
        gap: 1rem;
    }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; justify-content: center; }

    .contact-actions { flex-direction: column; }
    .contact-actions .btn { width: 100%; justify-content: center; }

    :root { --row-pad-y: 3rem; }

    .band { padding-top: 3rem; padding-bottom: 3rem; }
    .band-inner { padding-left: 1.25rem; padding-right: 1.25rem; }

    blockquote { font-size: 1.1rem; padding: 0.75rem 1rem; }

    .footer-meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}

/* ---- 450px - small phone --------------------------------- */
@media (max-width: 450px) {
    body { font-size: 1rem; }
    .header { padding: 1rem 0; gap: 1rem; }
    .brand { font-size: 1.2rem; }
    .welcome-stat-num { font-size: 2rem; }
    .pillar, .level { padding: 1.5rem 1.25rem; }
    .audience-checklist { padding: 1.25rem 1.5rem; }
}