/*
 * abonnementen.css — de tarieven en het formulier van /abonnementen/.
 *
 * Wordt alleen op die pagina ingeladen (zie functions.php). Sinds revisie 6 is
 * dit de pagina voor het maand- en het jaarabonnement samen: een kaart per
 * tijdvak met de maand- en de jaarprijs, de regels eronder, het dagpasblok en de
 * punten bij het formulier. assets/site.css blijft ongewijzigd; alles hier bouwt
 * op de kaarten (.lid-card), de kleuren en de letters van het ontwerp.
 */

/* ---------- de kaarten ----------
   Smal onder elkaar, vanaf 1000 px drie naast elkaar. De tekst van een kaart
   groeit mee (.lid-card p), zodat de prijzen van de drie kaarten op één hoogte
   staan. */
.abo-grid {
    display: grid;
    gap: 1.2rem;
    max-width: 560px;
    margin: 0 auto;
}

/* De prijzen zijn de klikvlakken; de kaart zelf beweegt niet mee. */
.abo-kaart:hover {
    transform: none;
    border-color: var(--line);
}

.abo-kaart .kicker {
    margin-bottom: 0;
}

.abo-tijden {
    margin-top: -.35rem;
    font-weight: 700;
    color: var(--cream);
}

/* ---------- een prijs ----------
   Het hele vlak is de link naar het formulier, met dat abonnement al gekozen; het
   pijltje staat rechts op de regel met het bedrag. */
.abo-prijs {
    display: block;
    padding: .85rem 1.1rem .9rem;
    border: 1px solid var(--line);
    border-radius: 14px 14px 14px 4px;
    background: rgba(242, 240, 232, .04);
    transition: border-color .2s, background .2s;
}

.abo-prijs:hover,
.abo-prijs:focus-visible {
    border-color: var(--sage-light);
    background: rgba(242, 240, 232, .09);
}

.abo-regel {
    display: flex;
    align-items: baseline;
    gap: .35rem;
}

.abo-regel::after {
    content: "→";
    margin-left: auto;
    padding-left: .8rem;
    font-weight: 800;
    color: var(--sage-light);
    transition: transform .2s;
}

.abo-prijs:hover .abo-regel::after {
    transform: translateX(4px);
}

/* Gewone letters en geen kapitalen: zo past "Maandabonnement · per maand betalen"
   op één regel, en blijft de bovenregel van de kaart het enige in kapitalen. */
.abo-soort {
    display: block;
    margin-bottom: .1rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--sage-light);
}

.abo-bedrag {
    font-family: 'Manrope', sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--cream);
}

.abo-periode {
    font-size: .95rem;
    font-weight: 600;
    color: var(--muted);
}

.abo-omgerekend {
    display: block;
    font-size: .9rem;
    color: var(--muted);
}

/* ---------- onder de kaarten ----------
   Het inschrijfgeld, de besparing en wat altijd inbegrepen is: korte regels,
   gecentreerd onder de drie kaarten. */
.abo-noten {
    margin-top: 2.2rem;
    text-align: center;
    color: var(--muted);
}

.abo-noten p + p {
    margin-top: .2rem;
}

.abo-noten .prijs {
    font-weight: 800;
    color: var(--cream);
}

.abo-inbegrepen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: .5rem 1.4rem;
    margin-top: 1.4rem;
}

/* Zelfde kopregel als boven een prijskolom (.vergelijk-col h4). */
.abo-inbegrepen h4 {
    font-family: 'Manrope', sans-serif;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sage-light);
}

.abo-inbegrepen ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem 1.4rem;
    list-style: none;
}

/* Het vinkje van de lijsten in het ontwerp (.over-usps). */
.abo-inbegrepen li {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    font-weight: 600;
    color: var(--cream);
}

.abo-inbegrepen li::before {
    content: "✓";
    font-weight: 800;
    color: var(--sage-light);
}

/* ---------- dagpas ----------
   Wie eerst wil proberen: één brede kaart, smal onder elkaar en breed met de
   knop rechts. */
.abo-dagpas {
    max-width: 820px;
    margin: 3rem auto 0;
}

.abo-dagpas p {
    margin-top: .5rem;
}

/* ---------- de punten bij het formulier ----------
   Onder de intro, als blok gecentreerd en zelf links uitgelijnd. */
#aanmelden .aanmelden-punten {
    display: inline-grid;
    justify-items: start;
    margin: 1.4rem 0 0;
    text-align: left;
}

@media (min-width: 700px) {
    .abo-dagpas {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }

    .abo-dagpas .btn {
        flex-shrink: 0;
        align-self: center;
    }
}

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

    /* Naast elkaar houdt elke kop ruimte voor twee regels, onderaan uitgelijnd:
       de tijden en teksten van de drie kaarten beginnen dan op één hoogte. */
    .abo-kaart h3 {
        display: flex;
        align-items: flex-end;
        min-height: 2.3em;
    }
}