/* Erfgoed Tijdlijnmenu: horizontale balk met periodekoppen en tijdvak-blokjes */

.tl {
    --tl-min: 120px;
    --tl-item-max: 14rem;
    --tl-period-h: 2.4rem;
    --tl-item-h: 4.5rem;
    --tl-gap: 2px;
}

.tl--compact {
    --tl-item-max: 11rem;
    --tl-period-h: 1.8rem;
    --tl-item-h: 3rem;
}

.tl__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.tl__grid {
    display: grid;
    grid-template-columns: repeat(var(--tl-count, 10), minmax(var(--tl-min), 1fr));
    /* minmax(...,auto) i.p.v. een vaste hoogte: als een Toelichting over meer dan
       één regel loopt, groeit de hele rij mee zodat niets wordt afgesneden. */
    grid-template-rows: var(--tl-period-h) minmax(var(--tl-item-h), auto);
    gap: var(--tl-gap);
    min-width: max-content;
}

/* Op smalle schermen mogen de kolommen best iets smaller worden voordat er
   gescrold moet worden, zodat er ook op tablet nog wat van te zien is. */
@media (max-width: 639px) {
    .tl { --tl-min: 100px; }
}

/* ---- Periodekop (rij 1) ---- */

.tl__period {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
    background: #f4f4f4;
    text-align: center;
    overflow: hidden;
}

.tl__period-text {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl--compact .tl__period-text {
    font-size: .7rem;
}

/* ---- Tijdvak-blokje (rij 2) ---- */

.tl__cell {
    min-width: 0;
}

.tl__item {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: .5rem .6rem;
    text-align: center;
    text-decoration: none;
    color: #fff;
    /* Overschrijft de kleur van het thema, ook als de link nog niet gezet is. */
    -webkit-tap-highlight-color: transparent;
}

/* Titel + toelichting samen, zodat ze bij hover als één geheel opschalen.
   max-width (in rem, dus niet %) begrenst ook hoe breed deze tekst maximaal
   "ongebroken" meetelt: zonder deze grens kan één erg lange Toelichting-tekst
   de hele tijdlijn-tabel (via min-width:max-content op .tl__grid) enorm breed
   laten uitrekken, omdat de browser voor die berekening tekst zonder
   regelafbreking meet. Met deze grens breekt lange tekst gewoon netjes af. */
.tl__item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    max-width: var(--tl-item-max);
    transition: transform .18s ease;
}

.tl__item-text {
    display: inline-block;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.25;
}

.tl--compact .tl__item-text {
    font-size: .8rem;
}

/* De toelichting erft lettertype/gewicht/grootte van de "Secundair"-tekststijl
   (uk-text-meta) uit de Customizer — hier wordt alleen de kleur aangepast, zodat
   de tekst leesbaar blijft op de gekleurde tijdvak-achtergronden, en de regel-
   afstand/max-breedte voor nette terugloop op meerdere regels. De kleur staat
   met !important omdat de door de Customizer gegenereerde .uk-text-meta-regel
   anders voorrang kan krijgen, afhankelijk van de laadvolgorde van de CSS. */
.tl__item-subtitle {
    display: block;
    max-width: 100%;
    line-height: 1.3;
    color: rgba(255, 255, 255, .85) !important;
}

/* Het gevraagde hover-effect: de tekst schaalt licht op, het blokje zelf blijft
   even groot (geen "springende" buren). */
.tl__item:hover .tl__item-inner,
.tl__item:focus-visible .tl__item-inner {
    transform: scale(1.08);
}

.tl__item:focus-visible {
    outline: 3px solid #fff;
    outline-offset: -4px;
}

/* Een blokje zonder link (geen href ingevuld) is geen <a>, dus geen hover-cursor. */
div.tl__item {
    cursor: default;
}