/* ============================================================
   boekje.css — /boekje/

   Eén pagina, één ding: het boekje zelf. De titel erboven, het blad
   eronder, en een knop om het mee te nemen.
   ============================================================ */

/* Deze pagina heeft één ding te tonen. De gewone bandmarge zet het
   boekje te ver naar beneden, dus die wordt hier korter: titel, blad,
   knop — samen op één scherm. */
.band:has(> .band__inner > .boekje) { padding-top: clamp(2.5rem, 5vw, 4rem); }
.band__head:has(#boekje-title) { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }

.boekje {
    max-width: 820px;
    margin: 0 auto;
}

/* Het kader rond de pdf.

   STANDAARD is er GEEN blad in de pagina, alleen een zin met knoppen
   eronder. Dat is wat een telefoon, een tablet en een bezoeker zonder
   JavaScript krijgen. Pas als er een muis is (en dus een browser met een
   echte pdf-lezer die scrollt) zet boekje.js er .boekje--inline bij en
   wordt dit het A4-kader hieronder.

   Andersom werkte niet: een iframe met een pdf toont op iOS alleen
   bladzijde één en laat er niet in scrollen. Omdat het kader een volle
   schermhoogte was, hield een veeg over het blad ook de pagina zelf
   tegen. Je stond vast op de eerste bladzijde en kwam niet eens bij de
   downloadknop. */
.boekje__preview {
    position: relative;
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 2.5rem);
    background: var(--bg-soft);
    border-radius: var(--radius-lg);
}

.boekje__frame { display: none; }

.boekje__geen-preview {
    margin: 0;
    text-align: center;
    color: var(--muted);
    text-wrap: pretty;
}

/* ── Wel een blad in de pagina ──
   A4 staand is 1 : 1,414. Een volle schermhoogte, met de breedte die
   daarbij hoort. Past die breedte niet, dan wint de beschikbare ruimte. */
.boekje--inline .boekje__preview {
    height: 100vh;
    height: 100dvh;
    width: min(100%, calc(100dvh / 1.414));
    padding: 0;
    overflow: hidden;
}

.boekje--inline .boekje__frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* De zin blijft staan als de pdf er niet in komt, en verdwijnt achter
   het blad zodra dat geladen is. */
.boekje--inline .boekje__geen-preview {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    padding: 2rem;
    z-index: -1;
}

/* Zodra het blad in de pagina staat, is "openen" een omweg: je leest het
   al. Standaard staat de knop er dus wel, ook zonder JavaScript. */
.boekje--inline .boekje__openen { display: none; }

.boekje .cta-row { margin-top: 1.6rem; }