@charset "UTF-8";
/* ============================================================
   Artikel-/blog-detail (content-item article_item)
   Conditioneel geladen via SiteApp::cssLinks() op marker
   `.layer--article-detail`.
   ============================================================ */

.layer--article-detail { padding-bottom: 3.5rem; }
.layer--article-detail .container { max-width: 820px; margin-inline: auto; }

.article__hero {
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    margin-bottom: 2rem;
}
.article__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

.article__head { margin: 0 0 1.5rem; }
.article__date {
    color: var(--color-fg-muted, #6b7280);
    font-size: .9rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .5rem;
}
.layer--article-detail .heading { margin: 0 0 .5rem; }
.article__subtitle { color: var(--color-fg-muted, #6b7280); font-size: 1.1rem; margin: 0; }

.article__intro { font-size: 1.15rem; line-height: 1.6; margin: 0 0 1.5rem; }
.article__body { line-height: 1.7; }
.article__body :first-child { margin-top: 0; }
.article__body img { max-width: 100%; height: auto; border-radius: 4px; }

.article__gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    gap: .75rem;
    margin-top: 2.5rem;
}
.article__photo {
    margin: 0;
    display: block;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
}
.article__photo img {
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}
.article__photo:hover img { transform: scale(1.04); }

/* ── Foto-weergaves (gallery_view, media-album-format) — overschrijft de auto-grid.
      Mozaïek-cellen krijgen hoogte via aspect-ratio op de .article__photo (de img vult). ── */
.article__gallery[data-format^="grid-"] { display: grid; grid-auto-flow: dense; }
.article__gallery[data-format^="grid-"] > .article__photo { aspect-ratio: 1; }
.article__gallery[data-format^="grid-"] > .article__photo img { aspect-ratio: auto; height: 100%; }

.article__gallery[data-format="flex"] { grid-template-columns: repeat(2, 1fr); }

.article__gallery[data-format="grid-2-11"] { grid-template-columns: repeat(3, 1fr); }
.article__gallery[data-format="grid-2-11"] > .article__photo:nth-child(6n+1) { grid-column: 1 / span 2; grid-row: span 2; }
.article__gallery[data-format="grid-2-11"] > .article__photo:nth-child(6n+4) { grid-column: 1; }
.article__gallery[data-format="grid-2-11"] > .article__photo:nth-child(6n+5) { grid-column: 1; }
.article__gallery[data-format="grid-2-11"] > .article__photo:nth-child(6n+6) { grid-column: 2 / span 2; grid-row: span 2; }

.article__gallery[data-format="grid-2-111"] { grid-template-columns: repeat(3, 1fr); }
.article__gallery[data-format="grid-2-111"] > .article__photo:nth-child(8n+1) { grid-column: 1 / span 2; grid-row: span 3; }
.article__gallery[data-format="grid-2-111"] > .article__photo:nth-child(8n+6) { grid-column: 1; }
.article__gallery[data-format="grid-2-111"] > .article__photo:nth-child(8n+7) { grid-column: 1; }
.article__gallery[data-format="grid-2-111"] > .article__photo:nth-child(8n+8) { grid-column: 2 / span 2; grid-row: span 3; }

.article__gallery[data-format="grid-2-11-11"] { grid-template-columns: repeat(4, 1fr); }
.article__gallery[data-format="grid-2-11-11"] > .article__photo:nth-child(10n+1)  { grid-column: 1 / span 2; grid-row: span 2; }
.article__gallery[data-format="grid-2-11-11"] > .article__photo:nth-child(10n+8)  { grid-column: 1; }
.article__gallery[data-format="grid-2-11-11"] > .article__photo:nth-child(10n+9)  { grid-column: 2; }
.article__gallery[data-format="grid-2-11-11"] > .article__photo:nth-child(10n+10) { grid-column: 3 / span 2; grid-row: span 2; }

.article__gallery[data-format="grid-2-11-2"] { grid-template-columns: repeat(5, 1fr); }
.article__gallery[data-format="grid-2-11-2"] > .article__photo:nth-child(8n+1) { grid-column: 1 / span 3; grid-row: span 3; }
.article__gallery[data-format="grid-2-11-2"] > .article__photo:nth-child(8n+4) { grid-column: 4 / span 2; grid-row: span 2; }
.article__gallery[data-format="grid-2-11-2"] > .article__photo:nth-child(8n+5) { grid-column: 1; }
.article__gallery[data-format="grid-2-11-2"] > .article__photo:nth-child(8n+7) { grid-column: 1 / span 2; grid-row: span 2; }
.article__gallery[data-format="grid-2-11-2"] > .article__photo:nth-child(8n+8) { grid-column: 3 / span 3; grid-row: span 3; }

.article__gallery[data-format="___playful"] { display: block; column-count: 3; column-gap: .75rem; }
.article__gallery[data-format="___playful"] > .article__photo { break-inside: avoid; margin-bottom: .75rem; }
.article__gallery[data-format="___playful"] > .article__photo img { aspect-ratio: auto; height: auto; }

@media (max-width: 600px) {
    .article__gallery[data-format^="grid-"] { grid-template-columns: 1fr 1fr; grid-auto-flow: row; }
    .article__gallery[data-format^="grid-"] > .article__photo { grid-column: auto !important; grid-row: auto !important; }
    .article__gallery[data-format="flex"] { grid-template-columns: 1fr; }
    .article__gallery[data-format="___playful"] { column-count: 2; }
}