/*!
 * =============================================================================
 * GPS HEADER
 * =============================================================================
 * PURPOSE      : Harmonisatie-laag voor de SEO-contentsecties onderaan de
 *                stad-/wijk-pagina's (taxonomy-stad.php). Die blokken zijn in
 *                losse sprints ontstaan en kregen elk een eigen breedte
 *                (860/960/1100px), hoekradius (16/25px) en card-behandeling
 *                (border vs schaduw vs grijs), waardoor de stapel niet uitlijnt
 *                en rommelig oogt. Dit bestand geeft ze één gedeelde geometrie
 *                (breedte, radius, verticaal ritme, oppervlak) op basis van de
 *                design-tokens, plus wat gerichte polish op de prijsindex.
 *
 *                Laadt ná style.css + filters-and-cards.css → wint op bronvolgorde
 *                bij gelijke specificiteit (puur een overschrijf-/afstemlaag, geen
 *                herdefinitie van de volledige componenten).
 *
 * PATH         : wp-content/themes/sportlist/css/city-sections.css
 *
 * DEPENDENCIES : css/tokens.css (--space-*, --radius-*, --shadow-*, --color-*),
 *                style.css (basis .sl-term-intro/.sl-prijsindex/.sl-term-faq),
 *                conditioneel geladen op is_tax('stad') in functions-assets.php.
 *
 * =============================================================================
 * CSS-VARIABELEN (gebruik uitsluitend deze)
 * =============================================================================
 *   --space-4/5/6/8/10/12, --radius-lg/xl, --shadow-sm/card,
 *   --color-surface, --color-surface-sunken, --color-border-subtle/default,
 *   --color-text, --color-text-muted, --color-brand, --color-brand-subtle
 *
 * =============================================================================
 * SECTIONOVERZICHT
 * =============================================================================
 *   1. GEDEELDE SECTIE-GEOMETRIE (breedte + ritme + oppervlak)
 *   2. TERM-INTRO
 *   3. PRIJSINDEX (polish: stat-cards + delta-accent)
 *   4. ABO-CITY-CARD
 *   5. FAQ + INTERNAL-LINKING
 *   6. RESPONSIVE
 *
 * @package Sportlist
 */

/* ============================================================
   1. GEDEELDE SECTIE-GEOMETRIE
   Eén breedte + verticaal ritme + hoekradius voor de hele stapel,
   zodat de secties links/rechts uitlijnen als één ontworpen kolom.
   ============================================================ */
.sl-term-intro,
.sl-prijsindex,
.sl-abo-city-card,
.sl-term-faq,
.sl-term-linking,
.sportscholen-page .sl-facet-links {
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
    margin-top: var(--space-12);
    margin-bottom: 0;
    border-radius: var(--radius-xl);
    box-sizing: border-box;
}

/* De eerste sectie in de SEO-staart sluit strak aan op de resultaten. */
.sportscholen-page .sl-term-intro {
    margin-top: var(--space-10);
}

/* ============================================================
   2. TERM-INTRO
   ============================================================ */
.sl-term-intro {
    padding: var(--space-8) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-sm);
}
.sl-term-intro__title {
    font-size: 1.45rem;
    line-height: 1.25;
}
.sl-term-intro--editorial {
    border-left: 3px solid var(--color-brand);
}

/* ============================================================
   3. PRIJSINDEX — polish
   ============================================================ */
.sl-prijsindex {
    padding: var(--space-8) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-card);
}
.sl-prijsindex h2 {
    font-size: 1.45rem;
    margin-bottom: var(--space-4);
}
.sl-prijsindex__intro {
    max-width: 68ch;
    margin-bottom: var(--space-6);
    color: var(--color-text);
}
.sl-prijsindex__intro strong {
    color: var(--color-brand);
    font-weight: 700;
}
.sl-prijsindex__grid {
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.sl-prijsindex__stat {
    padding: var(--space-5) var(--space-4);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    gap: 4px;
}
/* Mediaan = het kern-cijfer → subtiel accentueren t.o.v. de context-cellen. */
.sl-prijsindex__stat:nth-child(3) {
    background: var(--color-brand-subtle);
    border-color: transparent;
}
.sl-prijsindex__label {
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
.sl-prijsindex__value {
    font-size: 1.55rem;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.sl-prijsindex__note {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    text-align: left;
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

/* ============================================================
   4. ABO-CITY-CARD
   Al token-gebaseerd; hier alleen inlijnen in de gedeelde breedte
   + iets meer presence (schaduw) zodat het als CTA-kaart opvalt.
   ============================================================ */
.sl-abo-city-card {
    padding: var(--space-6) var(--space-8);
    box-shadow: var(--shadow-sm);
}

/* ============================================================
   5. FAQ + INTERNAL-LINKING
   FAQ houdt een verzonken oppervlak (ondersteunende rol) maar deelt
   nu breedte + radius met de rest.
   ============================================================ */
.sl-term-faq {
    padding: var(--space-8) var(--space-8);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border-subtle);
}
.sl-term-faq__title {
    font-size: 1.45rem;
}
.sl-term-linking,
.sportscholen-page .sl-facet-links {
    padding: var(--space-6) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border-subtle);
    box-shadow: var(--shadow-sm);
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
    .sl-term-intro,
    .sl-prijsindex,
    .sl-abo-city-card,
    .sl-term-faq,
    .sl-term-linking,
    .sportscholen-page .sl-facet-links {
        margin-left: var(--space-4);
        margin-right: var(--space-4);
        margin-top: var(--space-8);
        padding: var(--space-6) var(--space-5);
        border-radius: var(--radius-lg);
    }
    .sl-term-intro__title,
    .sl-prijsindex h2,
    .sl-term-faq__title {
        font-size: 1.2rem;
    }
    .sl-prijsindex__value {
        font-size: 1.35rem;
    }
}