/* ─── Pro Wellness — Layout ──────────────────────────────────────────────────
   Page containers, section wrappers, grid/flex utilities, and
   section-level background variants.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Container ──────────────────────────────────────────────────────────── */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.container--wide {
    max-width: var(--container-wide);
}

.container--narrow {
    max-width: var(--container-narrow);
}

.container--prose {
    max-width: var(--container-prose);
}

/* ── Section wrappers ───────────────────────────────────────────────────── */
.section {
    padding-block: var(--space-section);
}

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

.section--lg {
    padding-block: calc(var(--space-section) * 1.4);
}

/* ── Section background variants ────────────────────────────────────────── */

/* Default — warm page bg */
.section--warm {
    background-color: var(--color-bg-warm);
}

/* Slightly off-white cream */
.section--soft {
    background-color: var(--color-bg-soft);
}

/* Very light green wash */
.section--green-wash {
    background-color: var(--color-green-wash);
}

/* Warm green tint — e.g. benefits, program */
.section--green-tint {
    background-color: var(--color-green-tint);
}

/* Warm sand wash — e.g. quote, bonus, teachers */
.section--sand-wash {
    background-color: var(--color-sand-wash);
}

/* Deep green — used for final CTA or promo blocks */
.section--dark {
    background-color: var(--color-green);
    color: var(--color-text-on-green);
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
    color: var(--color-text-on-green);
}

/* Divider line between sections */
.section--bordered-top {
    border-top: var(--border);
}

/* ── Section header block ────────────────────────────────────────────────── */
.section-header {
    text-align: center;
    max-width: var(--container-narrow);
    margin-inline: auto;
    margin-bottom: var(--space-12);
}

.section-header--left {
    text-align: left;
    margin-inline: 0;
}

.section-header__title {
    margin-bottom: var(--space-4);
}

.section-header__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    line-height: var(--leading-relaxed);
    margin-bottom: 0;
    font-weight: var(--weight-light);
}

/* ── Grid ───────────────────────────────────────────────────────────────── */
.grid {
    display: grid;
    gap: var(--space-gap);
}

/* Mobile: 1 col. Tablet+: override to 2/3/4 col */
.grid--2 {
    grid-template-columns: 1fr;
}

.grid--3 {
    grid-template-columns: 1fr;
}

.grid--4 {
    grid-template-columns: 1fr;
}

/* Auto-fill — responsive without breakpoints */
.grid--auto-sm {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.grid--auto-md {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ── Flex utilities ─────────────────────────────────────────────────────── */
.flex {
    display: flex;
    gap: var(--space-gap);
}

.flex--center {
    align-items: center;
    justify-content: center;
}

.flex--between {
    align-items: center;
    justify-content: space-between;
}

.flex--col {
    flex-direction: column;
}

.flex--wrap {
    flex-wrap: wrap;
}

/* ── Text alignment ─────────────────────────────────────────────────────── */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}