/* Page-level layout, section rhythm, and grids. */

main { display: block; }

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

@media (min-width: 768px) {
    .section { padding-block: var(--space-16); padding-inline: var(--space-6); }
}

.reading {
    max-width: var(--reading-width);
    margin-inline: auto;
}

.content {
    max-width: var(--content-width);
    margin-inline: auto;
}

/* Surface tier — declared in HTML via <section data-tier="sunken">.
   Sections without data-tier render on --surface-base (the default). */
[data-tier="sunken"] { background: var(--surface-sunken); }

/* Section 1 — Quiet open */
.section-open {
    padding-block: clamp(var(--space-12), 14vh, 14vh) clamp(var(--space-8), 10vh, 10vh);
}

.section-open .quiet-headline { margin-top: var(--space-3); }

.open-actions {
    margin-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
}

/* Row variant — used inside spine / subscribe / become-coach sections
   where buttons stack horizontally and are centred. */
.open-actions--row {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Centred action link sitting alone at the bottom of a section
   (e.g. "See all questions →" beneath an accordion or grid). */
.section-foot {
    margin-top: var(--space-6);
    text-align: center;
}

/* Inline variant of placeholder-note — left-aligned, paired tightly
   with the preceding placeholder content (filters, card grid).
   The default .placeholder-note remains centred. */
.placeholder-note--inline {
    text-align: left;
    margin-top: var(--space-3);
}

/* =============================================================
   Reading container — shared prose-content patterns.
   These previously lived as per-section rules. Generalised
   because they applied identically across multiple sections.
   ============================================================= */

.reading > .lede + .lede     { margin-top: var(--space-3); }
.reading > .quiet-list,
.reading > .quiet-link-list  { margin-top: var(--space-6); display: grid; gap: var(--space-2); }

/* Ruled list — left-border treatment, used on certain prose lists for emphasis. */
.quiet-list--ruled li {
    padding-left: var(--space-3);
    border-left: var(--border-emphasis);
    color: var(--ink);
}

/* Sections whose body content is centred. Section-level concern; the
   section-head--centred modifier handles the head itself separately. */
.section-spine .reading,
.section-stay-close .reading,
.section-library-subscribe .reading { text-align: center; }

/* Spine-specific intra-section spacing (lede→button→safety-line). */
.section-spine .lede { margin-bottom: var(--space-6); color: var(--ink-muted); }
.section-spine .safety-line { margin-top: var(--space-3); }

/* Difference grid (homepage + method) */
.difference-grid {
    display: grid;
    gap: var(--space-6);
}
@media (min-width: 768px) {
    .difference-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

/* Testimonials grid (homepage + about) */
.testimonial-grid {
    margin-top: var(--space-8);
    display: grid;
    gap: var(--space-3);
}
@media (min-width: 768px) {
    .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
}
.section-proof { padding-block: var(--space-8); }

/* Program grid (homepage pathway) */
.program-grid {
    display: grid;
    gap: var(--space-3);
}
@media (min-width: 640px) { .program-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .program-grid { grid-template-columns: repeat(3, 1fr); } }

.self-paced-note {
    margin-top: var(--space-6);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

/* Router (homepage "Find your starting point" list) */
.router {
    margin-top: var(--space-12);
    max-width: var(--reading-width);
    margin-inline: auto;
    padding-top: var(--space-8);
    border-top: var(--border-hairline);
}
.router-title {
    font-family: var(--font-text);
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    margin-bottom: var(--space-4);
    text-align: center;
    color: var(--ink);
}
.router-list { display: grid; gap: var(--space-2); }

/* Coach grid (homepage + /coaches/) */
.coach-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .coach-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .coach-grid { grid-template-columns: repeat(4, 1fr); } }

.coaches-foot { margin-top: var(--space-6); text-align: center; }

/* Library — section padding tweaks + grids */
.section-library-chips        { padding-block: var(--space-4); }
.section-library-articles     { padding-block-start: var(--space-12); }
.section-library-videos       { padding-block-end: var(--space-12); }

.library-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .library-grid-articles { grid-template-columns: repeat(2, 1fr); }
    .library-grid-podcast  { grid-template-columns: repeat(2, 1fr); }
    .library-grid-videos   { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .library-grid-videos   { grid-template-columns: repeat(3, 1fr); }
}

.section-library-subscribe .open-actions { justify-content: center; }

/* Coaches page — filter row + become-coach intro */
.section-coach-filters { padding-block: var(--space-6); }

.filter-row {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .filter-row { grid-template-columns: repeat(3, 1fr); } }

/* Method page — how-it-works grid + step */
.how-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .how-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } }

.how-step-number {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-regular);
    color: var(--accent-link);
    line-height: 1;
    display: block;
    margin-bottom: var(--space-2);
}

.how-step-title {
    font-family: var(--font-text);
    font-size: var(--text-xl);
    font-weight: var(--weight-medium);
    line-height: var(--lh-heading);
    color: var(--ink);
    margin-bottom: var(--space-2);
}

.how-step p { color: var(--ink-muted); line-height: var(--lh-body); }

/* About — two-methods pair grid */
.method-pair-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    max-width: 900px;
    margin-inline: auto;
}
@media (min-width: 768px) { .method-pair-grid { grid-template-columns: 1fr 1fr; } }

/* About — cross-links + feature grid (3-up) */
.feature-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}
@media (min-width: 768px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.feature-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Footer */
.site-footer {
    background: var(--surface-sunken);
    color: var(--ink);
    padding-block: var(--space-8) var(--space-4);
    padding-inline: var(--space-3);
    border-top: var(--border-hairline);
}

/* Newsletter bar — sits above the column grid. Stays calm: small headline,
   a line of copy, and an inline signup. Visible on every page. */
.site-footer-newsletter {
    max-width: var(--content-width);
    margin-inline: auto;
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-6);
    border-bottom: var(--border-hairline);
}

.site-footer-newsletter-inner {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 768px) {
    .site-footer-newsletter-inner {
        grid-template-columns: 1fr 1.2fr;
        gap: var(--space-8);
    }
}

.site-footer-newsletter h4 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: var(--weight-regular);
    line-height: var(--lh-heading);
    color: var(--ink);
    margin: 0 0 var(--space-1);
}

.site-footer-newsletter p {
    color: var(--ink-muted);
    line-height: var(--lh-body);
    font-size: var(--text-sm);
    margin: 0;
}

@media (min-width: 768px) {
    .site-footer { padding-inline: var(--space-6); }
}

.site-footer-inner {
    max-width: var(--content-width);
    margin-inline: auto;
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .site-footer-inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-8); }
}

.site-footer-bottom {
    max-width: var(--content-width);
    margin-inline: auto;
    margin-top: var(--space-6);
    padding-top: var(--space-3);
    border-top: var(--border-hairline);
    font-size: var(--text-xs);
    color: var(--ink-muted);
}

.site-footer-bottom a { color: inherit; }
.site-footer-bottom a:hover { color: var(--ink); }

/* The Work — senior teaching faculty grid (used on /method/).
   Mirrors .coach-grid: 2-up on mobile, widening on larger screens.
   Members render as .card.card-compact, reusing coach-card sub-elements. */
.team-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }