/* ---------------------------------------------------------------------------
 * archive.css — de overzichten: index.php (het blog), archive.php (rubriek,
 * onderwerp, auteur, datum), baserules 8
 *
 * DE LIJST
 * --------
 * De homepage is een technische tekening en het artikel is er een van zichzelf.
 * Dit blad is de inhoudsopgave van dat boek: geen rooster met kaarten maar een
 * lijst — één regel per artikel, over de volle breedte, op een haarlijn. Vier
 * kaarten naast elkaar geven vier even luide stemmen; een lijst geeft een
 * volgorde, en dat is wat iemand met 64 artikelen nodig heeft.
 *
 * De opdracht van dit blad is smal: laat zo snel mogelijk zien welke artikelen
 * er zijn. Alles wat daar niet aan meewerkt kost hoogte, en hoogte kost
 * artikelen in beeld. Vandaar de volgorde van boven naar beneden:
 *
 *   1. EEN LAGE BAND IN PAPIERKLEUR met de titel, één regel maat en de
 *      onderwerpen als knopjes. Geen hero: de eerste artikelen horen bij het
 *      laden in beeld te staan.
 *   2. HET NIEUWSTE ARTIKEL, plaat links en tekst rechts, in één band die niet
 *      hoger is dan de plaat.
 *   3. DE REGELS. Plaat, titel, maatregel, lead — in die volgorde, in één
 *      kolom naast de plaat, op elke breedte dezelfde.
 *   4. DE PAGINERING, dezelfde liniaal als de rest van de site.
 *
 * Wat hier eerder stond en er nu niet meer is, en waarom:
 *
 *   de onderwerpenliniaal   drie centimeter hoogte om twaalf namen over acht
 *                           rasterkolommen te spreiden; de lijst begon
 *                           daardoor onder de rand van het venster
 *   het titelblok           drie vakjes met grote cijfers naast de kop, voor
 *                           informatie die in één regel past
 *   het regelnummer         01 t/m 64 — een bezoeker zoekt geen regel 37
 *   het leestijdstreepje    een profiel van het blog, maar niemand kiest een
 *                           artikel op streepjeslengte
 *   de jaartallen           ze braken de lijst op een grens die niemand zoekt,
 *                           en maakten een stille periode zichtbaar als een gat
 *
 * PAPIER, DAN WIT — hetzelfde verloop als op de homepage en boven een artikel.
 * De band staat op --kleurPapier, zodat hij met de header en het kruimelpad één
 * oppervlak is; de artikelen staan op wit, want dat leest het rustigst.
 *
 * Nergens een schaduw, nergens een afgeronde hoek om een foto.
 *
 * Klassenamen in camelCase (baserules 2).
 * --------------------------------------------------------------------------- */

/* Het kruimelpad staat boven de band en hoort dus bij hetzelfde papier; anders
   zit er een witte streep tussen de header en het blad. */
.kruimels {
    background: var(--kleurPapier);
}

/* De pijl in 'Lees dit artikel'. main.css tekent de iconenset alleen in de
   header, de footer en de USP-balk; hier moet het dus zelf, anders vult de
   browser het lijnwerk op tot een vlek. */
.blogMeer svg {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
 * De band: titel, maat en de onderwerpen
 * -------------------------------------------------------------------------- */

.blogBlad {
    padding-block: var(--ruimte5);
    background: var(--kleurPapier);
    border-block-end: 1px solid var(--kleurRand);
}

.blogKop {
    display: grid;
    justify-items: start;
    row-gap: var(--ruimte3);
}

/* Klein kapitaal aan een accentstreepje — hetzelfde label als op de homepage en
   boven een artikel, zodat een bezoeker het herkent. */
.blogLabel {
    display: flex;
    align-items: center;
    gap: var(--ruimte3);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.blogLabel::before {
    content: '';
    width: 2.25rem;
    height: 2px;
    flex: none;
    background: var(--kleurAccent);
}

/* Een eigen maat en niet --maatH1: die loopt tot 3,25rem en dat is een
   openingskop. Dit is een wegwijzer boven een lijst. */
.blogTitel {
    max-width: 26ch;
    font-size: clamp(1.625rem, 1.35rem + 1.2vw, 2.375rem);
    font-weight: 800;
    letter-spacing: -.025em;
}

.blogKopIntro {
    max-width: 68ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--kleurTekstZacht);
}

.blogKopIntro p + p {
    margin-top: var(--ruimte3);
}

/* Hoeveel artikelen, hoeveel onderwerpen, welke pagina — in één regel. De punt
   ertussen komt van de CSS, zodat er geen opmaak in een vertaalbare tekst zit. */
.blogKopMaat {
    font-size: var(--maatKlein);
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstZacht);
}

.blogKopMaat > span + span::before {
    content: '·';
    margin-inline: .4375rem;
    color: var(--kleurRand);
}

/* --------------------------------------------------------------------------
 * De onderwerpen
 *
 * Knopjes op hun eigen breedte: hetzelfde vakje als de actieve filters op de
 * winkelvloer (shop.css), dus rechte hoeken en een haarlijn. Het aantal staat
 * in het knopje zelf.
 *
 * Op een smal scherm staan twaalf knopjes in vijf regels onder elkaar en is de
 * band weer een hero. Daar schuift de rij dus horizontaal — één regel, vegen
 * met de duim. Dat is een breedtekwestie en dus CSS, geen domZichtbaarheid.
 * -------------------------------------------------------------------------- */

.blogOnderwerpen {
    margin-top: var(--ruimte5);
}

.blogOnderwerpenLabel {
    margin-bottom: var(--ruimte3);
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.blogOnderwerpenLijst {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--ruimte2);
    overflow-x: auto;
    /* Ruimte voor de schuifbalk, zodat die de knopjes niet overlapt. */
    padding-bottom: var(--ruimte3);
    scrollbar-width: thin;
}

/* Niet krimpen: zonder dit knijpt de flexbox de knopjes samen tot ze passen en
   schuift de rij dus nooit. */
.blogOnderwerpenLijst > li {
    flex: none;
}

.blogOnderwerpLink {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    padding: .375rem .625rem;
    border: 1px solid var(--kleurRand);
    background: var(--kleurWit);
    font-size: var(--maatKlein);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--kleurTekst);
    text-decoration: none;
    transition: color var(--overgang), border-color var(--overgang), background-color var(--overgang);
}

.blogOnderwerpTel {
    font-size: var(--maatMini);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstZacht);
    transition: color var(--overgang);
}

.blogOnderwerpLink:hover,
.blogOnderwerpLink:focus-visible {
    border-color: var(--kleurTekstSterk);
    color: var(--kleurTekstSterk);
}

/* De weg terug draagt een pijl, zodat hij niet als een onderwerp leest. */
.blogOnderwerpLink.isTerug::before {
    content: '\2190';
    font-weight: 400;
    color: var(--kleurTekstZacht);
}

/* Aan staat zwart en niet accentgroen: wit op #23a892 haalt de 4,5:1 van
   WCAG AA niet. Dezelfde keuze als bij de knoppen elders op de site. */
.blogOnderwerpLink.isActief {
    background: var(--kleurZwart);
    border-color: var(--kleurZwart);
    color: var(--kleurWit);
}

.blogOnderwerpLink.isActief .blogOnderwerpTel {
    color: rgb(255 255 255 / .65);
}

@media (min-width: 48rem) {
    /* De label naast de knopjes in plaats van erboven: één regel hoogte
       gewonnen, en de knopjes mogen dan gewoon doorlopen op een tweede regel. */
    .blogOnderwerpen {
        display: flex;
        align-items: baseline;
        gap: var(--ruimte4);
    }

    .blogOnderwerpenLabel {
        flex: none;
        margin-bottom: 0;
    }

    .blogOnderwerpenLijst {
        flex-wrap: wrap;
        overflow: visible;
        padding-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
 * Het nieuwste artikel
 *
 * Alleen op de voorpagina van het blog. Plaat links en tekst rechts, in dezelfde
 * leesrichting als de regels eronder — het is de grote versie van een regel en
 * niet een tweede soort blok.
 *
 * Beide kolommen staan in rij 1 doordat de plaat vóór de tekst in de HTML staat
 * en de kolommen in die volgorde gevuld worden. Dat is met opzet zo simpel: dit
 * blok stond eerder op het twaalfkolomsraster met de tekst op kolom 2-7 en de
 * plaat op 8-15, en omdat de plaat er in de HTML als eerste staat kon de tekst
 * er met sparse autoplacement niet meer naast — die belandde in rij 2, links
 * onder de plaat. Vandaar hier twee kolommen en verder niets.
 * -------------------------------------------------------------------------- */

.blogUitgelicht {
    display: grid;
    row-gap: var(--ruimte5);
    padding-block: var(--ruimte6);
    border-block-end: 1px solid var(--kleurRand);
}

.blogUitgelichtBeeld {
    display: block;
    overflow: hidden;
}

/**
 * Een vaste hoogte, en geen max-height. Hier stond aspect-ratio met
 * max-height: 20rem, en bij een replaced element rekent de browser een
 * geschonden max-height terug naar de bréédte om de verhouding te bewaren
 * (CSS 2.1 §10.4). De plaat is in deze twee kolommen zo'n 645 pixels breed en
 * zou 403 hoog worden; met de grens op 320 werd hij dus geen band van 645 ×
 * 320 maar een blok van 320 × 16/10 = 512 pixels breed, met een gat van 130
 * pixels rechts ernaast in de kolom. Dezelfde fout stond op het artikelblad,
 * zie single.css.
 *
 * Met een bepaalde hoogte valt er niets terug te rekenen: breedte én hoogte
 * staan vast, de plaat vult zijn kolom, en object-fit snijdt bij in plaats van
 * dat de foto wordt uitgerekt.
 */
.blogUitgelichtBeeld img {
    display: block;
    width: 100%;
    height: clamp(13rem, 24vw, 20rem);
    object-fit: cover;
    transition: transform var(--overgangTraag);
}

.blogUitgelichtBeeld:hover img {
    transform: scale(1.02);
}

.blogUitgelichtTekst {
    display: grid;
    justify-items: start;
    row-gap: var(--ruimte3);
}

.blogUitgelichtTitel {
    max-width: 24ch;
    font-size: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.blogUitgelichtTitel a {
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang);
}

.blogUitgelichtTitel a:hover {
    color: var(--kleurAccentDonker);
}

.blogUitgelichtLead {
    max-width: 56ch;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--kleurTekstZacht);
}

.blogUitgelichtActie {
    margin-top: var(--ruimte1);
}

/* De link met de pijl onder het uitgelichte artikel. */
.blogMeer {
    display: inline-flex;
    align-items: center;
    gap: var(--ruimte2);
    padding-bottom: var(--ruimte1);
    border-bottom: 1px solid var(--kleurRand);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang), border-color var(--overgang);
}

.blogMeer svg {
    transition: transform var(--overgang);
}

.blogMeer:hover {
    color: var(--kleurAccentDonker);
    border-color: var(--kleurAccent);
}

.blogMeer:hover svg {
    transform: translateX(.1875rem);
}

@media (min-width: 48rem) {
    .blogUitgelicht {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: var(--ruimte6);
        align-items: center;
    }
}

/* Geen foto? Dan houdt de tekst de volle breedte in plaats van dat er een gat
   naast staat. */
.blogUitgelicht:not(:has(.blogUitgelichtBeeld)) {
    grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
 * De maatregel
 *
 * Datum, leestijd en waar het over gaat, in één regel met een punt ertussen.
 * Staat zowel onder de titel van het uitgelichte artikel als in elke regel van
 * de lijst; dezelfde informatie hoort er hetzelfde uit te zien. Geen flexbox:
 * als inline tekst breekt de regel netjes af zonder dat er een punt aan het
 * begin van de tweede regel blijft hangen.
 * -------------------------------------------------------------------------- */

.blogMaat {
    font-size: var(--maatKlein);
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstZacht);
}

.blogMaat > * + *::before {
    content: '·';
    margin-inline: .4375rem;
    color: var(--kleurRand);
}

.blogMaat time {
    color: var(--kleurTekst);
}

/* Het onderwerp is een link en hoort daar ook uit te zien, dus een haarlijn
   eronder in plaats van iets dat alleen bij hover verschijnt. */
.blogMaat a {
    color: var(--kleurTekstZacht);
    text-decoration: underline;
    text-decoration-color: var(--kleurRand);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--overgang), text-decoration-color var(--overgang);
}

.blogMaat a:hover {
    color: var(--kleurAccentDonker);
    text-decoration-color: var(--kleurAccent);
}

/* --------------------------------------------------------------------------
 * De regels
 *
 * Twee kolommen: de plaat en de tekst. De haarlijn zit bovenop elke regel, de
 * lijst sluit met een lijn onderaan.
 * -------------------------------------------------------------------------- */

.blogLijst {
    padding-block: var(--ruimte6) var(--ruimte7);
    border-block-end: 1px solid var(--kleurRand);
}

.blogRij {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    column-gap: var(--ruimte4);
    align-items: start;
    padding-block: var(--ruimte4);
    border-top: 1px solid var(--kleurRand);
}

/* Zonder uitgelichte afbeelding schuift de tekst op in plaats van dat er een
   leeg vak blijft staan. */
.blogRij:not(:has(.blogRijPlaat)) {
    grid-template-columns: minmax(0, 1fr);
}

/* De aanwijzer: bij hover trekt de haarlijn van de regel zich groen uit,
   van links naar rechts. Hetzelfde streepje als onder het actieve menu-item. */
.blogRij::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--kleurAccent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--overgangTraag);
}

/* Het lichte vlak dat de hele regel laat oplichten en niet alleen de tekst.
   Precies tot waar de haarlijn loopt, geen millimeter erbuiten. z-index -1
   blijft binnen de regel: .blogRij maakt zelf een stapelcontext met z-index 0. */
.blogRij::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--kleurPapier);
    opacity: 0;
    transition: opacity var(--overgang);
}

.blogRij:hover::before,
.blogRij:focus-within::before {
    transform: scaleX(1);
}

.blogRij:hover::after,
.blogRij:focus-within::after {
    opacity: 1;
}

.blogRijPlaat {
    display: block;
    overflow: hidden;
}

/* 4:3 is de verhouding van bgKaart (640×480), dus er wordt niets bijgesneden. */
.blogRijPlaat img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform var(--overgangTraag);
}

.blogRij:hover .blogRijPlaat img {
    transform: scale(1.04);
}

.blogRijTekst {
    min-width: 0;
}

.blogRijTekst > * + * {
    margin-top: var(--ruimte2);
}

.blogRijTitel {
    font-size: clamp(1.0625rem, 1rem + .5vw, 1.3125rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.blogRijTitel a {
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang);
}

.blogRijTitel a:hover {
    color: var(--kleurAccentDonker);
}

/* De hele regel is de knop. Het lichte vlak bij hover belooft dat al, dus hoort
   het ook zo te werken: de link van de titel wordt over de regel uitgerekt, en
   dan is de plaat, de datum en de lege ruimte ernaast één klikvlak. Op een
   telefoon scheelt dat het mikken op een titel van twee regels.

   Alleen de onderwerpen in de maatregel komen er met z-index bovenuit; die
   wijzen ergens anders heen en moeten dus apart aanklikbaar blijven. */
.blogRijTitel a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.blogRij .blogMaat a {
    position: relative;
    z-index: 1;
}

/* Twee regels lead: genoeg om te weten of dit jouw artikel is, en het houdt de
   regels van de lijst even hoog — dat is precies wat scannen makkelijk maakt. */
.blogRijLead {
    max-width: 76ch;
    font-size: var(--maatKlein);
    color: var(--kleurTekstZacht);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Naast de plaat is de tekstkolom op een telefoon een stuk of dertig tekens
   breed. Daar staat de maatregel een maat kleiner, zodat de datum en de
   leestijd samen op één regel blijven in plaats van met een losse punt over te
   lopen naar een tweede. */
.blogRijTekst .blogMaat {
    font-size: var(--maatMini);
}

@media (min-width: 40rem) {
    .blogRij {
        grid-template-columns: 9rem minmax(0, 1fr);
        column-gap: var(--ruimte5);
    }

    .blogRijTekst .blogMaat {
        font-size: var(--maatKlein);
    }
}

@media (min-width: 64rem) {
    .blogRij {
        grid-template-columns: 11rem minmax(0, 1fr);
        padding-block: var(--ruimte5);
    }
}

/* --------------------------------------------------------------------------
 * De paginering
 *
 * De liniaal: de nummers hangen aan één doorlopende haarlijn en de pagina waar
 * je staat draagt het groene streepje. Geen kaders, geen pillen. main.css geeft
 * .paginering wél kaders — die is voor de zoekresultaten; deze pagina's
 * gebruiken een eigen klasse zodat er niets overschreven hoeft.
 * -------------------------------------------------------------------------- */

.blogPaginering {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ruimte5);
    padding-block: var(--ruimte6) var(--ruimte8);
}

.blogPagineringStand {
    font-size: var(--maatMini);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kleurTekstZacht);
}

.blogPagineringStand b {
    font-family: var(--fontKop);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstSterk);
}

/* Geen goot tussen de vakjes: dan lopen de bovenranden in elkaar over tot één
   doorlopende lijn. paginate_links() zet .page-numbers zowel op de <ul> als op
   de items, vandaar 'li >'. */
.blogPaginering ul {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-left: auto;
}

.blogPaginering li > .page-numbers {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    padding: var(--ruimte4) var(--ruimte2) var(--ruimte3);
    border-top: 1px solid var(--kleurRand);
    font-family: var(--fontKop);
    font-size: var(--maatKlein);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--kleurTekstSterk);
    text-decoration: none;
    transition: color var(--overgang);
}

.blogPaginering li > .page-numbers::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--kleurAccent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--overgang);
}

.blogPaginering li > a.page-numbers:hover {
    color: var(--kleurAccentDonker);
}

.blogPaginering li > a.page-numbers:hover::before,
.blogPaginering li > .page-numbers.current::before {
    transform: scaleX(1);
}

.blogPaginering .page-numbers.current {
    color: var(--kleurAccentDonker);
}

.blogPaginering .page-numbers.dots {
    color: var(--kleurTekstZacht);
}

/* Vorige en volgende dragen een pijl in plaats van een nummer. */
.blogPaginering .page-numbers.prev,
.blogPaginering .page-numbers.next {
    gap: var(--ruimte2);
    padding-inline: var(--ruimte4);
}

.blogPaginering .page-numbers.prev::after { content: '\2190'; order: -1; }
.blogPaginering .page-numbers.next::after { content: '\2192'; }

/* --------------------------------------------------------------------------
 * Leeg
 * -------------------------------------------------------------------------- */

.blogLeeg {
    display: grid;
    justify-items: start;
    row-gap: var(--ruimte4);
    max-width: var(--breedteTekst);
    padding-block: var(--ruimte8) var(--ruimte9);
}

.blogLeegTitel {
    font-size: var(--maatH2);
    font-weight: 800;
    letter-spacing: -.02em;
}

.blogLeegTekst {
    color: var(--kleurTekstZacht);
}

.blogLeegActie {
    margin-top: var(--ruimte2);
}