/* ============================================================
   publiek/hoofdstukken.css - de rij tabjes onder de speler en
   het tabje Chapters: de hoofdstukken van de aflevering.
   Hoort bij templates/public/delen/_tabs.html (de tabjes) en
   _hoofdstukken.html (de lijst). Het tabje Achievements heeft
   zijn eigen blad: prestaties.css.
   ============================================================ */

.tabs { margin-top: 20px; }
.tabs[hidden] { display: none; }

/* ------------------------------------------------ de tabjes */
.tabs-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
    border-bottom: 1px solid var(--rand);
}
.tab {
    display: block;
    margin: 0 0 -1px;
    padding: 10px 18px;
    border: 1px solid var(--rand);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: var(--vlak-diep);
    color: var(--tekst-zacht);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}
.tab[hidden] { display: none; }
.tab:hover { color: #fff; }
.tab.aan {
    border-color: #6d4df2;
    background: linear-gradient(180deg, #3a1fb5 0%, #2a1a86 100%);
    color: #fff;
    box-shadow: 0 0 14px rgba(109, 77, 242, .35);
}
.tab-aantal { margin-left: 6px; font-size: 12px; font-weight: 400; color: #cfc6ff; }

.tabs-vak {
    padding: 14px 16px 16px;
    border: 1px solid var(--rand);
    border-top: 0;
    border-radius: 0 0 var(--rond) var(--rond);
    background: var(--vlak);
}
.tabs-vak[hidden] { display: none; }
.tabs-uitleg { margin: 0 0 10px; font-size: 13px; color: var(--tekst-zacht); }

/* Zonder script staan de blokken onder elkaar, elk met zijn kopje. */
.tabs-kopje { margin: 0 0 8px; font-size: 16px; }
.tabs-vak + .tabs-vak {
    margin-top: 14px;
    border-top: 1px solid var(--rand);
    border-radius: var(--rond);
}
.tabs-vak[hidden] + .tabs-vak { margin-top: 0; border-top: 0; border-radius: 0 0 var(--rond) var(--rond); }

/* Met script (speler.js zet 'met-js'): een blok tegelijk, dat van het
   gekozen tabje. Het kopje is dan alleen nog voor een schermlezer. */
.tabs.met-js .tabs-vak { margin-top: 0; border-top: 0; border-radius: 0 0 var(--rond) var(--rond); }
.tabs.met-js .tabs-vak:not(.aan) { display: none; }
.tabs.met-js .tabs-kopje {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ------------------------------------------ de hoofdstukken */
/* Twee kolommen: je leest eerst de linker naar beneden, dan de
   rechter. Een hoofdstuk breekt nooit over twee kolommen. */
.hoofdstukken {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: 22px;
}
.hoofdstukken[hidden] { display: none; }
.hoofdstukken li { break-inside: avoid; padding-bottom: 4px; }

/* Meer dan 16 hoofdstukken: een vak van acht rijen hoog waarin je
   schuift. De hoofdstukken lopen hier van links naar rechts en dan
   naar beneden, anders zie je bij het schuiven twee stukken van de
   video door elkaar. */
.hoofdstukken-lang {
    --hoofdstuk-rij: 44.25px;    /* de hoogte van een rij, met de ruimte eronder */
    position: relative;          /* speler.js rekent met de plek in de lijst */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
    columns: auto;
    max-height: calc(8 * var(--hoofdstuk-rij));   /* acht rijen = 16 hoofdstukken */
    padding-right: 8px;          /* ruimte voor de schuifbalk */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #6d4df0 #10143c;
}

/* een naam over twee regels: het hoofdstuk ernaast wordt even hoog */
.hoofdstukken-lang li { display: flex; }
.hoofdstukken-lang .hoofdstuk { flex: 1; min-width: 0; }

.hoofdstuk {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: var(--rond-klein);
    background: #0e1338;
    color: var(--tekst);
    font-size: 14.5px;
    text-decoration: none;
}
.hoofdstuk:hover { background: rgba(124, 58, 237, .2); }
.hoofdstuk-tijd {
    flex: none;
    min-width: 80px;             /* past ook op 10:21:15 */
    padding: 3px 8px;
    border-radius: 6px;
    background: #1b1f63;
    color: #c9bfff;
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.hoofdstuk-naam { min-width: 0; overflow-wrap: anywhere; }

/* Een plaatje voor de tijd: het eigen plaatje van het hoofdstuk, of
   anders de cover van het spel met het nummer van het hoofdstuk erop
   (.met-nummer); heeft het spel geen cover, dan staat daar het logo
   van de site. Elke regel heeft zo een vakje van dezelfde maat. */
.hoofdstuk-plaatje {
    flex: none;
    width: 72px;                 /* was 96 x 54: regels minder hoog (9 okt) */
    height: 40px;
    overflow: hidden;
    border: 1px solid #2b3070;
    border-radius: 6px;
    background: #0a0e2c;
}
.hoofdstuk-plaatje img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* De cover (of het logo) met het nummer erop. Laadt het plaatje niet,
   dan blijft het paarse vlak over, met het nummer. */
.hoofdstuk-plaatje.met-nummer {
    position: relative;
    background: linear-gradient(135deg, #3a1fb5 0%, #2a1a86 100%);
}
.hoofdstuk-nummer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 2px 8px #000;
}
.hoofdstuk-plaatje.met-nummer img + .hoofdstuk-nummer { background: rgba(8, 10, 34, .55); }
.met-plaatjes .hoofdstuk { padding: 3px 10px 3px 3px; }
.hoofdstukken-lang.met-plaatjes { --hoofdstuk-rij: 52.25px; }   /* 40 + 2x3 + rand 2 + 4 eronder */

/* het hoofdstuk waar je op klikte */
.hoofdstuk.nu { border-color: #6d4df2; background: #1a1658; }
.hoofdstuk.nu .hoofdstuk-tijd { background: var(--paars); color: #fff; }

@media (max-width: 900px) {
    .hoofdstukken { columns: 1; }
    .hoofdstukken-lang { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .tabs { margin-top: 16px; }
    .tab { padding: 9px 14px; font-size: 14px; }
    .tabs-vak { padding: 12px 10px; }
    .hoofdstuk { padding: 8px; gap: 10px; }     /* groter om op te tikken */
    .hoofdstukken-lang { --hoofdstuk-rij: 48.25px; }
    .hoofdstuk-plaatje { width: 80px; height: 45px; }
    .hoofdstuk-nummer { font-size: 20px; }
    .met-plaatjes .hoofdstuk { padding: 5px 8px 5px 5px; }
    .hoofdstukken-lang.met-plaatjes { --hoofdstuk-rij: 61.25px; }
}