/* ══════════════════════════════════════════════
   Books & Tools – Volledige stylesheet
   Pas de variabelen aan naar jouw thema
   ══════════════════════════════════════════════ */

:root {
    --bt-accent:      #2563eb;
    --bt-label-bg:    #eff6ff;
    --bt-label-color: #1d4ed8;
    --bt-border:      #e5e7eb;
    --bt-muted:       #6b7280;
    --bt-radius:      0.5rem;
    --bt-gap:         1.5rem;
    --bt-max:         1100px;
}

/* ── Sitetitel centreren (archief/taxonomie) ── */
.bt-archive .site-header,
.bt-type-grid ~ .site-header {
    text-align: center;
}

/* ── Wrappers ── */
.bt-archive, .bt-single {
    max-width: var(--bt-max);
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

/* ── Archief header ── */
.bt-archive__header { text-align: center; margin-bottom: 2.5rem; }
.bt-archive__title  { font-size: 2rem; font-weight: 700; margin: 0 0 .5rem; }
.bt-archive__desc   { color: var(--bt-muted); max-width: 600px; margin: 0 auto; }

/* ── Teruglink ── */
.bt-back {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .875rem; font-weight: 500; color: var(--bt-muted);
    text-decoration: none; margin-bottom: 1rem; transition: color .2s;
}
.bt-back:hover { color: var(--bt-accent); }

/* ── Type-overzicht ── */
.bt-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--bt-gap);
}
@media (max-width: 900px) { .bt-type-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .bt-type-grid { grid-template-columns: 1fr; } }

.bt-type-card {
    position: relative; display: flex; flex-direction: column;
    justify-content: flex-end; min-height: 260px;
    border-radius: var(--bt-radius); overflow: hidden;
    text-decoration: none; color: #fff;
    transition: transform .25s, box-shadow .25s;
}
.bt-type-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.18); }

.bt-type-card__bg { position: absolute; inset: 0; background: #1e3a5f; }
.bt-type-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.bt-type-card:hover .bt-type-card__img { transform: scale(1.06); }
.bt-type-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.2) 55%, rgba(0,0,0,.05) 100%);
}
.bt-type-card__content { position: relative; z-index: 1; padding: 1.5rem; display: flex; flex-direction: column; gap: .35rem; }
.bt-type-card__label { font-size: 1.35rem; font-weight: 800; line-height: 1.2; }
.bt-type-card__desc  { font-size: .875rem; opacity: .85; line-height: 1.4; margin: 0; }
.bt-type-card__count { font-size: .78rem; opacity: .65; font-weight: 500; }
.bt-type-card__cta   { display: inline-block; margin-top: .5rem; font-size: .875rem; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; }
.bt-type-card:hover .bt-type-card__cta { opacity: 1; transform: none; }

/* ── Grid ── */
.bt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bt-gap); }
.bt-grid--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .bt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bt-grid, .bt-grid--two { grid-template-columns: 1fr; } }

/* ── Kaart ── */
.bt-card {
    border: 1px solid var(--bt-border); border-radius: var(--bt-radius);
    overflow: hidden; background: #fff; display: flex; flex-direction: column;
    transition: box-shadow .25s, transform .25s;
}
.bt-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.09); transform: translateY(-3px); }

.bt-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

.bt-card__thumb { aspect-ratio: 3/2; overflow: hidden; background: var(--bt-label-bg); }
.bt-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.bt-card:hover .bt-card__thumb img { transform: scale(1.04); }

.bt-card__body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }

.bt-card__type {
    display: inline-block; font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--bt-accent); border: 1px solid var(--bt-accent);
    padding: .15rem .6rem; border-radius: 2rem; text-decoration: none;
    transition: background .2s, color .2s;
}
.bt-card__type:hover { background: var(--bt-accent); color: #fff; }

.bt-card__title   { font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin: 0; }
.bt-card__title a { color: inherit; text-decoration: none; }
.bt-card__title a:hover { color: var(--bt-accent); }

.bt-card__excerpt { font-size: .875rem; color: var(--bt-muted); line-height: 1.5; flex: 1; margin: 0; }

.bt-card__links   { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.bt-card__links a { font-size: .875rem; color: var(--bt-accent); text-decoration: none; }
.bt-card__links a:hover { text-decoration: underline; }

.bt-card__cta { display: inline-block; margin-top: auto; padding-top: .5rem; font-size: .875rem; font-weight: 600; color: var(--bt-accent); text-decoration: none; }

/* ── Paginering ── */
.bt-pagination { margin-top: 3rem; text-align: center; }
.bt-pagination .nav-links { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.bt-pagination .page-numbers { padding: .4rem .9rem; border: 1px solid var(--bt-border); border-radius: var(--bt-radius); text-decoration: none; color: inherit; font-size: .875rem; }
.bt-pagination .page-numbers.current,
.bt-pagination .page-numbers:hover { background: var(--bt-accent); border-color: var(--bt-accent); color: #fff; }

/* ── Single ── */
.bt-single__header { text-align: center; margin-bottom: 2rem; }
.bt-single__type {
    display: inline-block; font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .07em; color: var(--bt-label-color); background: var(--bt-label-bg);
    padding: .2rem .75rem; border-radius: 2rem; text-decoration: none; margin-bottom: .75rem;
}
.bt-single__type:hover { background: var(--bt-accent); color: #fff; }
.bt-single__title { font-size: 2rem; font-weight: 800; margin: 0; }

.bt-single__layout { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; align-items: start; }
@media (max-width: 768px) { .bt-single__layout { grid-template-columns: 1fr; } .bt-single__sidebar { order: -1; } }

.bt-single__content { line-height: 1.75; }
.bt-single__links { margin-top: 2rem; padding: 1.25rem; border: 1px solid var(--bt-border); border-radius: var(--bt-radius); background: #f8fafc; }
.bt-single__links-heading { font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .75rem; color: var(--bt-muted); }
.bt-single__links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.bt-single__links a { color: var(--bt-accent); font-weight: 500; text-decoration: none; }
.bt-single__links a:hover { text-decoration: underline; }

.bt-single__image { border-radius: var(--bt-radius); overflow: hidden; margin-bottom: 1rem; }
.bt-single__image img { width: 100%; height: auto; display: block; }

.bt-single__extra--link { padding: 1rem 1.25rem; background: var(--bt-label-bg); border-radius: var(--bt-radius); text-align: center; }
.bt-single__extra--link a { color: var(--bt-accent); font-weight: 600; text-decoration: none; }

.bt-quote { margin: 0; padding: 1.25rem 1.25rem 1.25rem 1.5rem; border-left: 4px solid var(--bt-accent); background: #f9fafb; border-radius: 0 var(--bt-radius) var(--bt-radius) 0; }
.bt-quote p { font-style: italic; font-size: 1rem; line-height: 1.6; margin: 0 0 .5rem; color: #374151; }
.bt-quote cite { font-size: .825rem; color: var(--bt-muted); font-style: normal; }
.bt-quote cite::before { content: '— '; }

.bt-related { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--bt-border); }
.bt-related__heading { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }

.bt-empty { text-align: center; color: var(--bt-muted); padding: 3rem 0; }

/* ── Gutenberg block: rij met kaarten ── */
.bt-row-wrap {
    width: 100%;
    display: block;
}

.bt-row-wrap .bt-row {
    display: grid !important;
    gap: var(--bt-gap);
    grid-template-columns: 1fr;
}

.bt-row-wrap .bt-row.bt-row--cols-1 {
    grid-template-columns: 1fr !important;
    max-width: 420px;
}

.bt-row-wrap .bt-row.bt-row--cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.bt-row-wrap .bt-row.bt-row--cols-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

@media (max-width: 700px) {
    .bt-row-wrap .bt-row.bt-row--cols-2,
    .bt-row-wrap .bt-row.bt-row--cols-3 {
        grid-template-columns: 1fr !important;
    }
}

.bt-row-wrap .bt-row__col {
    display: flex;
    min-width: 0;
}

.bt-row-wrap .bt-row__col .bt-card {
    flex: 1;
    min-width: 0;
}

/* ── Privé badges ── */
.bt-private-badge {
    font-size: .85em;
    margin-right: .25rem;
    vertical-align: middle;
    opacity: .7;
}

.bt-private-notice {
    text-align: center;
    padding: 5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.bt-private-notice span { font-size: 3rem; }
.bt-private-notice h1  { font-size: 1.5rem; font-weight: 700; margin: 0; }

.bt-login-btn {
    display: inline-block;
    padding: .6rem 1.5rem;
    background: var(--bt-accent, #2563eb);
    color: #fff;
    border-radius: var(--bt-radius, .5rem);
    text-decoration: none;
    font-weight: 600;
    transition: background .2s;
}
.bt-login-btn:hover { background: #1d4ed8; }

/* ── Colibri-fix: zorg dat links altijd klikbaar zijn ── */
.bt-card,
.bt-card__link,
.bt-card__title a,
.bt-card__type,
.bt-card__cta,
.bt-row-wrap .bt-card,
.bt-row-wrap .bt-card__title a,
.bt-row-wrap .bt-card__cta {
    position: relative;
    z-index: 1;
    pointer-events: auto !important;
    cursor: pointer;
}

/* ── Intro-tekst boven blok: gecentreerd, 75% breedte ──
 *  Gebruik via Gutenberg: Extra CSS-klasse → bt-intro-text
 */
.bt-intro-text {
    max-width: 75%;
    margin: 0 auto 2rem;
    text-align: center;
}

@media (max-width: 700px) {
    .bt-intro-text {
        max-width: 100%;
    }
}

/* ── Clearfix: voorkomt dat footer naast het blok komt ── */
.bt-row-wrap::after,
.bt-row::after {
    content: '';
    display: block;
    clear: both;
}

.bt-row-wrap {
    overflow: hidden;
}