/* ==========================================================================
   THEMAPAGINA'S - /thema en /thema/{naam}

   Deze twee pagina's hoorden bij elkaar maar deden allebei iets anders: het
   overzicht bootstrapkaarten zonder hover, de themapagina zelf eigen kaarten met
   een omslag van tweehonderd pixels in een bootstraprooster. Daardoor leek een
   boek op een themapagina niet op hetzelfde boek op /books.

   De boekkaart zelf staat niet hier maar in books.css. Die was geschreven onder
   .books-page, dus aan de pagina waarvoor hij bedoeld was; nu staat hij onder
   :is(.books-page, .boekenraster) en kan elke pagina hem gebruiken door het
   rooster in een .boekenraster te zetten.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HET OVERZICHT: een tegel per thema
   -------------------------------------------------------------------------- */

.thema-tegels {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.5rem;
}

.thema-tegel {
    display: block;
    height: 100%;
    padding: 1.25rem;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-top: 3px solid transparent;
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

/* Dezelfde schaduw en dezelfde sprong als een boekkaart, alleen wat kleiner: een
   tegel met tekst hoeft niet zo hard te bewegen als een omslag. */
.thema-tegel:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-top-color: #0d6efd;
    color: inherit;
}

.thema-tegel-titel {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.35rem;
}

.thema-tegel-tekst {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   2. HET THEMACIJFER OP EEN BOEKKAART
   -------------------------------------------------------------------------- */

/* Het cijfer is de reden dat dit boek op deze pagina staat, dus het moet altijd
   te zien zijn en niet pas bij hover. Zelfde vorm als het bol-cijfer rechtsboven,
   maar links en in het blauw van de site: ze staan samen op dezelfde kaart en
   mogen niet voor elkaar doorgaan. */
.boekenraster .thema-cijfer-badge {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 50px;
    background: rgba(13, 110, 253, 0.95);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 3;
}

.boekenraster .thema-cijfer-badge i {
    font-size: 0.6875rem;
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   3. EEN BOEKKAART DIE EEN LINK IS
   -------------------------------------------------------------------------- */

/* Op /books is de kaart een div met een klikafhandelaar en knoppen erin. Hier is
   het een gewone link: dat blijft werken zonder dat de verbinding met de server
   staat, en een zoekmachine ziet waar de kaart naartoe gaat. */
.boekenraster a.book-card {
    color: inherit;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. OP EEN TELEFOON BLIJFT DE TITEL STAAN
   -------------------------------------------------------------------------- */

/* books.css zet .book-info onder 768 pixels op opacity 0 zonder tegenhanger, dus
   op /books zijn het op een telefoon alleen omslagen. Daar kan dat: wie de
   catalogus doorbladert herkent een boek aan de omslag. Hier niet: deze pagina
   bestaat om boeken op dit thema met elkaar te vergelijken, en op een telefoon
   is er geen hover om de titel mee tevoorschijn te halen. */
@media (max-width: 768px) {
    .boekenraster .book-card:has(.book-cover img) .book-info {
        opacity: 1;
    }

    /* De sluier van books.css loopt naar 0,7 zwart en is bedoeld voor tekst die alleen
       bij hover even verschijnt. Hier staat de tekst er altijd, ook over een lichte
       omslag met eigen drukwerk eronder, en dan is dat te weinig: begin lager en eindig
       donkerder, zodat de onderste strook echt dekt en de omslag erboven vrij blijft. */
    .boekenraster .book-card:has(.book-cover img) .book-overlay {
        opacity: 1;
        background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.55) 65%,
            rgba(0, 0, 0, 0.88) 100%);
    }
}