/* /programma/ (App\Support\Wp\ProgrammePage): kaarten voor de sessies, een venster per
   sessie en het filter op onderwijssector. Kleuren van de site: magenta (#e30073) voor de
   koppen en de keuzesessies, paars (#6659e3) voor knoppen en de plenaire sessies, zoals
   Plenair op de downloadpagina (SessionKind). Het thema geeft elke <button> een eigen
   rand en kleur; die zetten de knoppen hier terug. */

.programma {
    --programma-magenta: #e30073;
    --programma-paars: #6659e3;
    --programma-tekst: #333;
    --programma-rand: #e2e2e2;
    width: 100%;
    color: var(--programma-tekst);
    font-family: Poppins, sans-serif;
}

.programma__intro {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
}

/* De vier blokken, om en om wit en lichtgrijs, zoals op de homepage (blokken.css). Het
   grijs loopt tot de rand van het scherm, ook al staat het blok in een smallere kolom. */
.programma-blok {
    padding: 48px 0;
    line-height: 1.6;
}

.programma-blok--grijs {
    background: #f4f4f4;
    box-shadow: 0 0 0 100vmax #f4f4f4;
    clip-path: inset(0 -100vmax);
}

.programma-blok > :last-child {
    margin-bottom: 0;
}

.programma__kop {
    margin: 0 0 16px;
    color: var(--programma-magenta);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
}

.programma__sub {
    margin: -8px 0 12px;
    color: var(--programma-paars);
    font-size: 18px;
    font-weight: 500;
}

.programma__tussenkop {
    margin: 28px 0 14px;
    color: var(--programma-paars);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.programma .programma__knop {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 999px;
    background: var(--programma-paars);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
}

.programma .programma__knop:hover,
.programma .programma__knop:focus-visible {
    background: #4f43c9;
    color: #fff;
}

/* De highlights: foto, kop en tekst naast elkaar, op een smal scherm onder elkaar. */
.programma-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 32px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.programma-highlight {
    margin: 0;
}

/* Met .programma ervoor: Elementor geeft elke <img> een eigen hoogte en hoeken. */
.programma .programma-highlight__foto {
    display: block;
    width: 160px;
    max-width: none;
    height: 160px;
    margin-bottom: 16px;
    border-radius: 50%;
    object-fit: cover;
}

.programma-highlight__foto--leeg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--programma-paars);
    color: #fff;
    font-size: 44px;
    font-weight: 700;
}

.programma-highlight__titel {
    margin: 0 0 8px;
    color: var(--programma-tekst);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
}

.programma-highlight p {
    margin: 0;
}

@media (max-width: 767px) {
    .programma-blok {
        padding: 36px 0;
    }

    .programma__kop {
        font-size: 24px;
    }
}

/* Het dagprogramma: tijd en onderdeel, in een rustige lijst. */
.programma-dag__lijst {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--programma-rand);
}

.programma-dag__item {
    display: grid;
    grid-template-columns: 9.5em 1fr;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--programma-rand);
    line-height: 1.5;
}

.programma-dag__tijd {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Het besloten ochtendprogramma is niet voor alle bezoekers: lichter grijs (#8a8a8a, bewust onder AA op wit, voor meer contrast met de rest). */
.programma-dag__item--besloten {
    color: #8a8a8a;
}

/* Het filter. */
.programma-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
}

.programma-filter[hidden] {
    display: none;
}

.programma-filter__label {
    margin-right: 4px;
    font-size: 14px;
    font-weight: 600;
}

.programma .programma-filter__optie {
    margin: 0;
    padding: 6px 14px;
    border: 1px solid var(--programma-paars);
    border-radius: 999px;
    background: #fff;
    color: var(--programma-paars);
    font: 500 14px/1.4 Poppins, sans-serif;
    white-space: nowrap;
    cursor: pointer;
}

.programma .programma-filter__optie:hover {
    background: #f0eefc;
}

.programma .programma-filter__optie[aria-pressed="true"] {
    background: var(--programma-paars);
    color: #fff;
}

/* De kaarten. */
.programma-sessies {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.programma-sessie {
    display: flex;
    margin: 0;
}

/* Een verborgen kaart in een raster heeft dit nodig; anders doet het filter niets. */
.programma-sessie[hidden] {
    display: none;
}

.programma .programma-sessie__open {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 20px 20px 18px;
    border: 1px solid var(--programma-rand);
    border-top: 5px solid var(--programma-magenta);
    border-radius: 8px;
    background: #fff;
    color: var(--programma-tekst);
    font: inherit;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}

.programma .programma-sessie__open:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.programma .programma-sessie__open:focus-visible {
    outline: 3px solid var(--programma-paars);
    outline-offset: 2px;
}

.programma-sessie--plenair .programma-sessie__open {
    border-top-color: var(--programma-paars);
    background: #f5f4fe;
}

.programma-sessie__waar {
    font-size: 14px;
    font-weight: 600;
}

.programma-sessie__titel {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
}

.programma-sessie__sprekers {
    font-size: 15px;
    line-height: 1.5;
}

.programma-sessie__meer {
    margin-top: auto;
    padding-top: 6px;
    color: var(--programma-paars);
    font-size: 14px;
    font-weight: 600;
}

.programma-sessie__meer::after {
    content: " \2192";
}

/* De labeltjes: de sessievorm in kleur, de sectoren grijs. */
.programma-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.programma-tag {
    padding: 2px 10px;
    border-radius: 999px;
    background: #f0f0f0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

.programma-tag--vorm {
    background: var(--programma-magenta);
    color: #fff;
}

.programma-sessie--plenair .programma-tag--vorm,
.programma-venster--plenair .programma-tag--vorm {
    background: var(--programma-paars);
}

/* Het venster. */
.programma-venster {
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 32px;
    border: 0;
    border-top: 6px solid var(--programma-magenta);
    border-radius: 10px;
    color: var(--programma-tekst);
    font-family: Poppins, sans-serif;
    line-height: 1.6;
}

.programma-venster--plenair {
    border-top-color: var(--programma-paars);
}

.programma-venster::backdrop {
    background: rgba(0, 0, 0, .55);
}

.programma-venster__sluit {
    position: absolute;
    top: 10px;
    right: 10px;
    margin: 0;
}

.programma-venster__sluit button {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--programma-tekst);
    font: 28px/1 Poppins, sans-serif;
    cursor: pointer;
}

.programma-venster__sluit button:hover,
.programma-venster__sluit button:focus-visible {
    background: #f0f0f0;
}

.programma-venster__titel {
    margin: 12px 40px 16px 0;
    color: var(--programma-magenta);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
}

.programma-venster p {
    margin: 0 0 12px;
}

.programma-venster__kort {
    font-weight: 500;
}

.programma-venster__feiten {
    display: grid;
    grid-template-columns: 11em 1fr;
    gap: 10px 16px;
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--programma-rand);
}

.programma-venster__feiten dt {
    font-weight: 600;
}

.programma-venster__feiten dd {
    margin: 0;
}

.programma-venster__feiten ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.programma-venster__feiten li + li {
    margin-top: 8px;
}

@media (max-width: 600px) {
    .programma-venster {
        padding: 24px 20px;
    }

    .programma-venster__feiten,
    .programma-dag__item {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }

    .programma-venster__feiten dd + dt {
        margin-top: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .programma .programma-sessie__open {
        transition: none;
    }

    .programma .programma-sessie__open:hover {
        transform: none;
    }
}