/*
 * pilates.css — eigen stijl voor de Reformer Pilates-pagina.
 *
 * Wordt alleen op /reformer-pilates/ ingeladen (zie functions.php). De Brief
 * vraagt voor deze pagina een eigen sfeer met dezelfde header en footer
 * (beslissing 31), dus staat het lichte palet op `main` en niet op :root:
 * de actiebalk, de header en de footer houden daardoor exact de kleuren van
 * de rest van de site.
 *
 * Palet uit de SolidPilates-huisstijl: lichte sage, taupe en donkergroen.
 * assets/site.css blijft ongewijzigd; alles hier is een overschrijving.
 */

/* De header is hier meteen dichtgezet. Het logo en de navigatie zijn licht,
   en de hero eronder is dat nu ook — transparant zou ze onleesbaar maken. */
header {
    background: rgba(23, 33, 26, .92);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

main {
    /* lichte sage, zoals de achtergrond in de app */
    --ink: #cac9a7;
    /* Het lichte vlak is een echte crème en geen tweede sage: de secties
       wisselen daardoor zichtbaar af in plaats van in één lange sage-baan
       over te lopen. */
    --surface: #e7e6d4;
    --surface-2: #ffffff;
    --line: rgba(26, 26, 26, .14);
    /* taupe knoppen, de tint van de Aanmelden-knop in de app; donker genoeg
       voor witte knoptekst */
    --sage: #756d55;
    /* accentkleur voor kopregels en prijzen: donkergroen, leesbaar op sage */
    --sage-light: #2f5d34;
    --sage-deep: #565040;
    /* --cream is in dit thema de tekstkleur */
    --cream: #1a1a1a;
    --muted: rgba(26, 26, 26, .68);
    /* honinggouden sterren. Het goud van het ontwerp staat op het donkere vlak
       en verdwijnt op deze lichte sage; deze diepere tint leest wel en blijft
       goud, in plaats van het oranje dat buiten het palet viel. */
    --star: #a07418;

    background: var(--ink);
    /* body zet color op :root-niveau, dus zonder deze regel erft main de
       lichte tekstkleur als berekende waarde en telt --cream hier niet mee. */
    color: var(--cream);
}

/* ---------- secties ----------
   Sage en crème wisselen elkaar strikt af: hero, boeken, tarieven en faq op
   sage; over, lesrooster en reviews op crème. In de basis lagen boeken en
   lesrooster achter elkaar op hetzelfde vlak en stonden de citaten op het
   donkerste vlak van de pagina. */
main #rooster,
main #reviews {
    background: var(--surface);
}

main #tarieven,
main #faq {
    background: var(--ink);
}

/* ---------- koppen ----------
   Het ontwerp zet elke kop in kapitalen; dat past bij de gym, niet bij een
   pilatesstudio. Hier onderkast in een lichter gewicht. De kickers blijven
   de kleine kapitalen, zodat er contrast overblijft. */
main .hero h1,
main .sec-head h2,
main .over-copy h2,
main .actie h2,
main .cta h2,
main .vergelijk h3,
main .pilates-body h3,
main .lid-card h3 {
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
}

main .pilates-body h3 {
    font-size: 1.55rem;
}

/* ---------- hero ---------- */

/* De hero schuift niet meer onder de header door, want die is niet langer
   transparant. Hij is ook een tiende korter dan het ontwerp; die hoogte gaat
   er bovenaan af, waar alleen leegte boven de kicker stond. */
main .hero {
    margin-top: 0;
    min-height: 68vh;
    padding-top: 1.8rem;
}

main .hero-inner {
    padding-top: 2.5rem;
}

/* Nu de hero lager is dan de foto breed, snijdt cover verticaal. Onderaan
   vastzetten laat die uitsnede aan de bovenkant vallen, waar het plafond
   staat, in plaats van bij de reformers. */
main .hero::before {
    background-position: center bottom;
}

/* Lichte sluier over de studiofoto. De tekstkolom loopt tot ruim over de helft
   van het scherm, dus blijft de sluier daar dicht en komt de foto pas erna
   door. */
main .hero::after {
    background: linear-gradient(100deg,
        rgba(202, 201, 167, .96) 0%,
        rgba(202, 201, 167, .88) 45%,
        rgba(202, 201, 167, .45) 72%,
        rgba(202, 201, 167, .14) 100%);
}

/* De herotekst staat op een foto en niet op een effen vlak: de kicker minder
   ver uit elkaar en donkerder, de lopende tekst voluit in plaats van gedempt. */
main .hero .kicker {
    color: #24482a;
    letter-spacing: .18em;
}

main .hero p {
    /* Het zwaardere gewicht maakt de regels breder; 35rem houdt dezelfde drie
       regels als het ontwerp. */
    max-width: 35rem;
    color: rgba(26, 26, 26, .92);
    font-weight: 500;
}

/* Het actieblok is een witte kaart met de rating erin, zodat de hero één
   vertrouwenselement heeft in plaats van twee losse. */
main .hero-actie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    max-width: 36rem;
    padding: 1.2rem 1.5rem;
    background: rgba(255, 255, 255, .82);
    border-color: rgba(47, 93, 52, .35);
    box-shadow: 0 14px 40px rgba(26, 26, 26, .08);
}

/* Label en prijs in de tekstkleur, niet in het groen: de kaart is wit en
   het groen deed hier te veel. */
main .hero-actie strong,
main .hero-actie .prijs {
    color: var(--cream);
}

main .hero-actie .rating {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: .1rem .5rem;
    font-size: .85rem;
}

main .hero-actie .rating a {
    grid-column: 1 / -1;
}

/* ---------- knoppen ---------- */
main .btn-ghost {
    border-color: rgba(26, 26, 26, .38);
}

/* In de hero staat de omlijnde knop op de foto; een lichte vulling houdt de
   tekst leesbaar waar de sluier dun is. */
main .hero .btn-ghost {
    background: rgba(255, 255, 255, .38);
}

main .btn-ghost:hover {
    border-color: rgba(26, 26, 26, .7);
    background: rgba(26, 26, 26, .06);
}

main .btn-primary:hover {
    background: #857d64;
}

/* ---------- boekingskaarten ---------- */

/* De placeholder-strepen uit het ontwerp zijn donker; hier vult de foto de
   slot, en zolang die ontbreekt blijft het vlak licht. */
main .pilates-card {
    position: relative;
}

main .pilates-card .ph {
    background: var(--surface);
    border-color: var(--line);
}

/* De knop is de enige link in de kaart; met een uitgerekt klikvlak is de hele
   kaart klikbaar en klopt de hover-beweging. */
main .pilates-body .btn::after {
    content: "";
    position: absolute;
    inset: 0;
}

main .pilates-card:hover {
    border-color: rgba(47, 93, 52, .45);
    box-shadow: 0 18px 40px rgba(26, 26, 26, .10);
}

/* ---------- tarieven ---------- */

/* De tijdelijke actie staat los boven de vaste tarieven. */
main .tarieven-actie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 2rem;
    margin-bottom: 1.2rem;
    padding: 1.3rem 1.7rem;
    background: var(--surface-2);
    border: 1px solid rgba(47, 93, 52, .35);
    border-radius: 22px 22px 22px 6px;
}

main .tarieven-actie .kicker {
    margin-bottom: 0;
}

main .tarieven-actie-regel {
    flex: 1 1 auto;
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    line-height: 1.3;
}

main .tarieven-actie-regel .prijs {
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    margin-left: .5rem;
}

main .tarieven-actie-datum {
    font-size: .9rem;
    color: var(--muted);
}

main .tarieven-actie-datum .prijs {
    display: inline-block;
    margin-left: .4rem;
    padding: .15rem .65rem;
    border-radius: 999px;
    background: rgba(47, 93, 52, .10);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Kennismaken staat boven de prijslijst, in één kolom op de breedte van de
   kaarten elders op de site: de actie, Kennismaken en de prijslijst lijnen zo
   links en rechts gelijk, en een prijs staat niet een heel scherm van zijn
   regel af. */
main #tarieven .vergelijk {
    max-width: 820px;
    margin-inline: auto;
}

main #tarieven .vergelijk-grid {
    grid-template-columns: 1fr;
}

/* Een regel die naar een boekpagina linkt vult de hele li; de ruimte eromheen
   komt dan van de link, zodat je overal in de regel kunt klikken. Regels zonder
   link houden de ruimte uit het ontwerp. */
main .vergelijk-col li:has(.tarief-link) {
    padding: 0;
}

main .tarief-link {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    width: 100%;
    padding: .75rem 0;
    transition: color .2s;
}

main .tarief-link:hover {
    color: var(--sage-light);
}

/* Een regel zonder bedrag ("In de app", "Op aanvraag") is een verwijzing,
   geen prijs, en oogt daarom niet als één. */
main .vergelijk-col .prijs-tekst {
    font-weight: 600;
    font-size: .88rem;
    color: var(--muted);
}

main .tarief-link:hover .prijs-tekst {
    color: var(--sage-light);
}

/* Het voordeel van een lidmaatschap sluit de kolom af als noot, niet als
   prijsregel: geen lijn erboven en kleiner dan de bedragen erboven. */
main .tarieven-voordeel {
    margin-top: 1rem;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--muted);
}

/* ---------- app-band ----------
   Effen taupe in plaats van een vervaagde foto: rustig tussen twee lichte
   secties, en de foto's blijven voor de kaarten. */
main .actie {
    background: var(--sage-deep);
}

main .actie::before,
main .actie::after {
    display: none;
}

main .actie .kicker {
    color: #b9d9bd;
}

main .actie .btn-dark {
    background: #cac9a7;
    color: var(--cream);
}

main .actie .btn-dark:hover {
    background: #ffffff;
}

/* ---------- reviews ----------
   Geen witte kaarten maar citaten op de sage-achtergrond, gescheiden door een
   dunne lijn. */
main #reviews .lid-grid {
    max-width: none;
    gap: 0 3.5rem;
}

main #reviews .lid-card {
    position: relative;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    padding: 2rem 3rem 2.2rem 0;
    gap: 1rem;
}

main #reviews .lid-card::before {
    content: "\201C";
    position: absolute;
    top: 1.1rem;
    right: 0;
    font-family: 'Playfair Display', serif;
    font-size: 4.5rem;
    line-height: 1;
    color: var(--sage-light);
    opacity: .3;
}

main #reviews .lid-card:hover {
    transform: none;
}

main #reviews .lid-card .stars {
    font-size: .85rem;
}

main #reviews .lid-card p {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--cream);
}

main #reviews .lid-card h3 {
    font-family: 'Manrope', sans-serif;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sage-light);
}

/* ---------- faq ----------
   Eén smalle lijst met plus/min in plaats van twee kolommen kaarten, zodat
   de vragen gelijk uitlijnen. */
main #faq .lid-grid {
    grid-template-columns: 1fr;
    max-width: 46rem;
    gap: 0;
}

main #faq details {
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    padding: 0;
}

main #faq details:last-child {
    border-bottom: 1px solid var(--line);
}

main #faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.15rem 0;
    font-size: 1.15rem;
    cursor: pointer;
    list-style: none;
}

main #faq summary::-webkit-details-marker {
    display: none;
}

main #faq summary::after {
    content: "+";
    flex-shrink: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--sage-light);
    transition: transform .25s;
}

main #faq details[open] summary::after {
    transform: rotate(45deg);
}

main #faq details p {
    margin: 0 0 1.3rem;
    max-width: 40rem;
    color: var(--muted);
}

/* ---------- eind-cta ----------
   De muurtekst op de foto liep door de kop heen; vervaagd wordt hij textuur.
   De sluier is crème en geen sage: de faq erboven staat al op sage, en over de
   warme foto werd sage geel. */
main .cta::before {
    inset: -20px;
    filter: blur(6px);
    transform: scale(1.05);
}

main .cta::after {
    background: rgba(231, 230, 212, .88);
}

/* ---------- mobiel ---------- */
@media (max-width: 819px) {
    main .hero {
        min-height: auto;
    }

    /* Smal scherm: de tekst staat over de hele breedte, dus de sluier loopt
       van boven naar beneden in plaats van van links naar rechts. */
    main .hero::after {
        background: linear-gradient(180deg,
            rgba(202, 201, 167, .92) 0%,
            rgba(202, 201, 167, .80) 55%,
            rgba(202, 201, 167, .55) 100%);
    }

    main .hero-inner {
        padding: 2.2rem 0 3rem;
    }

    main .hero-actions {
        gap: .6rem;
        margin-bottom: 1.8rem;
    }

    main .hero-actions .btn {
        flex: 1 1 auto;
        padding-inline: 1.2rem;
    }

    main .hero-actie {
        margin-top: 1.8rem;
    }

    main .pilates-card .ph {
        aspect-ratio: 2 / 1;
    }

    main #reviews .lid-card {
        padding-right: 2.5rem;
    }
}

/* ---------- desktop ---------- */
@media (min-width: 820px) {
    main .pilates-card--breed {
        grid-column: 1 / -1;
        flex-direction: row;
    }

    main .pilates-card--breed .ph {
        width: 40%;
        flex-shrink: 0;
        aspect-ratio: auto;
        border-bottom: 0;
        border-right: 1px solid var(--line);
    }

    main .pilates-card--breed .pilates-body {
        justify-content: center;
        padding: 2.2rem 2.6rem;
    }

    /* In de brede kaart hoeft de tekst de knop niet naar beneden te duwen. */
    main .pilates-card--breed .pilates-body p {
        flex-grow: 0;
        max-width: 34rem;
    }
}

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