/* Roadtrips — rit-kaarten (Lente/Zomer/Herfst) + brede teambuilding-kaart.
   Geisoleerd stylesheet, geenqueued na 'template-parts'. De overrides gebruiken
   bewust de volledige gecompileerde selector-prefix
   (section.membership-section .container .row.subscriptions ...) om de bestaande
   diep-genestelde .subscription-regels te verslaan.
   (c) TwistedMinds, Gerry Uytdenhouwen — 2026-07-26 */

/* Rij: kaarten gelijk uitrekken zodat de linkse & rechtse rit even groot zijn;
   de middelste (.selected) springt symmetrisch uit via negatieve marges. */
section.membership-section .container .row.subscriptions {
    align-items: stretch;
}

/* --- Rit-kaart: badge bovenaan, nette (wrappende) tekst, logo onderaan ----- */
section.membership-section .container .row.subscriptions .subscription.roadtrip-card {
    padding-top: 30px;
}

/* Middelste rit-kaart (Zomerrit) groter + uitspringend, ZONDER 'meest genomen'-balk.
   Padding symmetrisch overschreven zodat er geen lege balk-ruimte bovenaan blijft. */
section.membership-section .container .row.subscriptions .subscription.roadtrip-card.selected {
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: -30px;
    margin-bottom: -30px;
    box-shadow: 0 12px 34px rgba(20, 62, 56, 0.18);
    z-index: 2;
}
@media screen and (max-width: 1200px) {
    /* gestapeld (1 kolom): geen overhang meer nodig */
    section.membership-section .container .row.subscriptions .subscription.roadtrip-card.selected {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

.roadtrip-card .roadtrip-badge {
    text-align: center;
    margin-bottom: 22px;
}
.roadtrip-card .roadtrip-badge img {
    max-width: 185px;
    height: auto;
    display: inline-block;
}

/* tekst laten wrappen (bestaande .desc gebruikt white-space: pre) */
section.membership-section .container .row.subscriptions .subscription.roadtrip-card .data .desc {
    white-space: normal;
    margin-bottom: 22px;
}
section.membership-section .container .row.subscriptions .subscription.roadtrip-card .data .desc p {
    margin-bottom: 12px;
}
section.membership-section .container .row.subscriptions .subscription.roadtrip-card .data .desc p:last-child {
    margin-bottom: 0;
}

.roadtrip-card .goed-doel {
    text-align: center;
    margin: 6px 0 26px;
}
/* Elk goede-doel-logo binnen eenzelfde begrenzingskader (max-hoogte EN max-breedte)
   zodat ze even groot ogen, ongeacht hun eigen verhouding: het ronde ADPKD-logo
   wordt door de hoogte begrensd, de brede logo's (StopAlzheimer) door de breedte. */
.roadtrip-card .goed-doel img {
    max-height: 70px;
    max-width: 170px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: inline-block;
}

/* --- Teambuilding: brede content-box kaart over de volle breedte ---------- */
section.membership-section .container .row.subscriptions .subscription.teambuilding-card {
    max-width: 100%;
    width: 100%;
    flex: 0 0 100%;
    flex-direction: row;
    align-items: center;
    gap: 45px;
    margin-top: 5em;
    padding: 40px;
}
section.membership-section .container .row.subscriptions .subscription.teambuilding-card .data .desc {
    white-space: normal;
}
section.membership-section .container .row.subscriptions .subscription.teambuilding-card .data .desc p {
    margin-bottom: 12px;
}
.teambuilding-card .roadtrip-badge {
    flex: 0 0 auto;
    margin-bottom: 0;
}
.teambuilding-card .roadtrip-badge img {
    max-width: 230px;
}
.teambuilding-card .data {
    flex: 1 1 auto;
}
.teambuilding-card .data .buttons {
    margin-top: 22px;
    max-width: 320px;
}

@media screen and (max-width: 991px) {
    section.membership-section .container .row.subscriptions .subscription.teambuilding-card {
        flex-direction: column;
        gap: 24px;
        text-align: center;
        padding: 30px 25px;
    }
    .teambuilding-card .data .buttons {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- Community EVENTS: 4 roadtrip-badges als 2x2 dat de VOLLEDIGE kolom vult
   (zelfde footprint als het ROUTES-beeld: width+height 100%, edge-to-edge). De
   logo's worden 'contained' zodat ze niet gecropt worden en netjes aansluiten. */
.community-section .post-image--badges {
    height: 100%;
}
.community-section .event-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;     /* 2 kolommen; rijen verdelen de hoogte gelijk (2,4,6.. beelden) */
    gap: 28px;               /* ruimte TUSSEN de logo's; blok vult verder de kolom */
    width: 100%;
    height: 100%;
}
.community-section .event-badges img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
@media screen and (max-width: 767px) {
    /* op smal scherm: de kolom stapelt onder de tekst -> vaste vierkante hoogte */
    .community-section .post-image--badges {
        height: auto;
    }
    .community-section .event-badges {
        grid-auto-rows: 1fr;
        aspect-ratio: 1 / 1;
        gap: 18px;
    }
}