/* ─── Pro Wellness — Responsive ──────────────────────────────────────────────
   Mobile-first. All base styles are written for ≤ 599px.
   Breakpoints here expand layouts for larger screens.
   Only add overrides here — never inside section files.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Tablet (≥ 600px) ─────────────────────────────────────────────────────── */
@media (min-width: 600px) {

    /* Grid unlocks 2 columns */
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero */
    .hero__headline {
        font-size: var(--text-5xl);
    }

    /* Comparison: side by side */
    .comparison__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Teacher card stacks nicely */
    .teacher-card {
        flex-wrap: nowrap;
    }

    /* Calculator widget full padding */
    .calculator__widget {
        padding: var(--space-12) var(--space-10);
    }
}

/* ── Desktop (≥ 1024px) ──────────────────────────────────────────────────── */
@media (min-width: 1024px) {

    /* Typography scale-up */
    h1,
    .hero__headline {
        font-size: var(--text-hero);
    }

    h2 {
        font-size: var(--text-4xl);
    }

    /* Grid unlocks 3 and 4 columns */
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* More breathing room on sections */
    .section {
        padding-block: var(--space-24);
    }

    .section--sm {
        padding-block: var(--space-16);
    }

    /* Container inline padding scales up */
    .container {
        padding-inline: var(--space-8);
    }
}

/* ── Wide (≥ 1280px) ─────────────────────────────────────────────────────── */
@media (min-width: 1280px) {

    /* Hero headline gets max size */
    .hero__headline {
        font-size: var(--text-hero);
    }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {

    .site-header,
    .urgency-bar,
    .btn {
        display: none;
    }

    body {
        font-size: 12pt;
        color: #000;
    }
}