/* Sjabloon "Brede weergave" (single-breed.php) voor blogposts.
   Tekst blijft in een leesbare kolom; openingsfoto, losse foto's, galerijen
   en citaten worden breder. Alle beelden staan gecentreerd op het midden van
   de tekstkolom. Op mobiel lopen foto's van rand tot rand. */

.page-art {
    --tekst-w: var(--container-w-text);
    --beeld-w: 1180px;
    max-width: none;
    padding: 0;
}

.page-art > *:not(.art-hero):not(.art-body):not(.art-head) {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 56px;
    padding-right: 56px;
    box-sizing: border-box;
}

.page-art .art-head {
    max-width: 900px;
    padding: 32px 56px 40px;
    box-sizing: content-box;
}
.page-art .art-head h1 { font-size: 60px; }

/* Openingsfoto over de volle breedte. */
.page-art .art-hero,
.page-art .art-hero--square,
.page-art .art-hero--portrait {
    margin: 0 0 32px;
    max-width: none;
    border-radius: 0;
    aspect-ratio: auto;
    height: min(80vh, 860px);
}
.page-art .art-hero img { object-position: center 35%; }

/* Tekstkolom in het midden, beeld breder. */
.page-art .art-body {
    max-width: none;
    padding: 24px 0 64px;
}
.page-art .art-body > * {
    max-width: var(--tekst-w);
    margin-left: auto !important;
    margin-right: auto !important;
}
.page-art .art-body > figure.wp-block-image:not(.is-style-staand),
.page-art .art-body > .wp-block-gallery,
.page-art .art-body > .slideshow-wrap {
    max-width: var(--beeld-w);
    clear: both;
}
/* Citaten: tekst gelijk met de tekstkolom, lijnen 40px erbuiten (zoals in
   gewone posts via de negatieve marge in single.css). */
.page-art .art-body > blockquote.wp-block-quote,
.page-art .art-body > .wp-block-pullquote,
.page-art .art-body > .pull {
    max-width: calc(var(--tekst-w) + 80px);
    box-sizing: border-box;
    clear: both;
}

/* Foto met een eigen breedte uit de editor (is-resized): ook gecentreerd. */
.page-art .art-body > figure.wp-block-image img {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Staande foto gecentreerd op de tekstkolom, zoals alle beelden: het
   midden van de foto valt op het midden van de tekst. */
.page-art .art-body > figure.is-style-staand {
    max-width: 560px;
    clear: both;
}

@media (max-width: 768px) {
    .page-art > *:not(.art-hero):not(.art-body):not(.art-head) { padding-left: 20px; padding-right: 20px; }
    .page-art .art-head { padding: 20px 20px 28px; }
    .page-art .art-head h1 { font-size: 34px; }
    .page-art .art-hero { height: 62vh; margin-bottom: 20px; }
    .page-art .art-body { padding: 8px 0 32px; }
    .page-art .art-body > * { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
    .page-art .art-body > blockquote.wp-block-quote,
    .page-art .art-body > .wp-block-pullquote,
    .page-art .art-body > .pull { max-width: none; margin-left: 20px !important; margin-right: 20px !important; padding-left: 0; padding-right: 0; }

    /* Foto's van rand tot rand. */
    .page-art .art-body > figure,
    .page-art .art-body > .wp-block-gallery,
    .page-art .art-body > .slideshow-wrap { padding-left: 0; padding-right: 0; max-width: none; }
    .page-art .art-body > figure.is-style-staand { max-width: none; }
    .page-art .art-body figure.wp-block-image img { border-radius: 0; }
}