/* Sjabloon "Brede pagina" (page-breed.php) — volle breedte, opgebouwd uit
   gewone Gutenberg-blokken. Klassen om in de editor (Geavanceerd → Extra
   CSS-klasse) aan blokken te geven:
   - bo-band            groep als brede band; varianten bo-band--licht,
                        bo-band--zacht (kleurverloop) en bo-band--wijn
   - bo-marker          kop met gele markeerstift-streep
   - bo-cirkel          kop met getekende gele cirkel
   - bo-collage         groep met twee foto's die elkaar licht overlappen
   - bo-strook          galerij met licht gedraaide foto's, zoals de covers */

.page-breed {
    --band-w: 1180px;
    --golf: 56px;
    overflow-x: clip;
}

/* ─── Banden ─────────────────────────────────────── */
.page-breed .bo-band {
    position: relative;
    padding: 88px max(var(--container-pad), calc((100% - var(--band-w)) / 2));
    margin: 0;
}

.page-breed .bo-band > .wp-block-group__inner-container > *:first-child,
.page-breed .bo-band > *:first-child { margin-top: 0; }

/* Golvende onder- en bovenrand via een masker, zodat de achtergrond van de
   site eronder doorloopt. */
.page-breed .bo-band--licht,
.page-breed .bo-band--zacht,
.page-breed .bo-band--wijn {
    --golf-onder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V22C1180 62 920 58 700 34S260 4 0 42Z'/%3E%3C/svg%3E");
    --golf-boven: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60H1440V18C1200 -2 960 4 740 26S280 58 0 20Z'/%3E%3C/svg%3E");
    -webkit-mask: var(--golf-onder) bottom / 100% var(--golf) no-repeat,
                  linear-gradient(#000 0 0) top / 100% calc(100% - var(--golf) + 1px) no-repeat;
            mask: var(--golf-onder) bottom / 100% var(--golf) no-repeat,
                  linear-gradient(#000 0 0) top / 100% calc(100% - var(--golf) + 1px) no-repeat;
    padding-bottom: calc(88px + var(--golf));
}

.page-breed .bo-band--zacht,
.page-breed .bo-band--wijn {
    -webkit-mask: var(--golf-boven) top / 100% var(--golf) no-repeat,
                  linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--golf) + 2px) no-repeat,
                  var(--golf-onder) bottom / 100% var(--golf) no-repeat;
            mask: var(--golf-boven) top / 100% var(--golf) no-repeat,
                  linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--golf) + 2px) no-repeat,
                  var(--golf-onder) bottom / 100% var(--golf) no-repeat;
    padding-top: calc(88px + var(--golf));
}

.page-breed .bo-band--licht { background: var(--bg-3); }

.page-breed .bo-band--zacht {
    background:
        radial-gradient(ellipse 50% 60% at 15% 30%, rgba(178, 93, 69, 0.18), transparent 70%),
        radial-gradient(ellipse 50% 50% at 85% 75%, rgba(233, 211, 106, 0.32), transparent 70%),
        var(--bg-3);
}

.page-breed .bo-band--wijn {
    background: var(--plum);
    color: var(--paper);
    margin-bottom: -1px;
}

/* ─── Tekst ──────────────────────────────────────── */
.page-breed h1 {
    font-family: var(--display);
    font-size: 50px;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--plum);
    margin: 0 0 28px;
}

.page-breed h2 {
    font-family: var(--display);
    font-size: 38px;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--plum);
    margin: 0 0 22px;
}

.page-breed p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 60ch;
    margin: 0 0 16px;
}

.page-breed .bo-band--wijn h2 { color: var(--paper); }
.page-breed .bo-band--wijn p  { color: var(--paper); opacity: 0.88; }

.page-breed .page-breed-body a:not(.wp-block-button__link) {
    color: var(--terracotta);
    text-decoration: underline;
    text-decoration-color: var(--ochre-soft);
    text-underline-offset: 3px;
}

/* Markeerstift: gele streep onder de onderste helft van elke regel. De kop
   is inline zodat de streep per regel loopt; de volgende alinea krijgt de
   ruimte eronder. */
.page-breed .bo-marker {
    display: inline;
    line-height: 1.3;
    background: linear-gradient(transparent 55%, rgba(234, 211, 106, 0.85) 55%, rgba(234, 211, 106, 0.85) 88%, transparent 88%);
    padding: 0 6px;
    margin-left: -6px;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}
.page-breed .bo-marker + * { margin-top: 24px; }

/* Getekende cirkel rond de kop. */
.page-breed .bo-cirkel {
    width: fit-content;
    padding: 22px 34px 26px;
    margin-left: -20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140' preserveAspectRatio='none'%3E%3Cpath d='M214 10C120 6 28 26 12 66s70 66 190 66 192-18 188-62S300 8 170 16' fill='none' stroke='%23EAD36A' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ─── Kolommen ───────────────────────────────────── */
.page-breed .wp-block-columns {
    gap: 64px;
    margin: 0;
}

.page-breed .bo-band > .wp-block-group__inner-container > * + *,
.page-breed .bo-band > * + * { margin-top: 56px; }

/* ─── Foto's ─────────────────────────────────────── */
.page-breed .wp-block-image { margin: 0; }

.page-breed .wp-block-image img,
.page-breed .wp-block-gallery img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.page-breed .wp-block-image img {
    filter: drop-shadow(-8px 12px 0 rgba(26, 26, 26, 0.08));
}

.page-breed .wp-block-column > .wp-block-image:only-child img { transform: rotate(-1.5deg); }

/* Collage: eerste foto groot, tweede kleiner en overlappend, licht gedraaid. */
.page-breed .bo-collage { position: relative; padding-bottom: 8px; }
.page-breed .bo-collage .wp-block-image:first-of-type {
    width: 82%;
    margin-left: auto;
    transform: rotate(2deg);
}
.page-breed .bo-collage .wp-block-image:nth-of-type(2) {
    position: relative;
    width: 56%;
    margin-top: -26%;
    transform: rotate(-3deg);
    z-index: 1;
}
.page-breed .bo-collage .wp-block-image:nth-of-type(2) img {
    border: 6px solid var(--paper);
    filter: drop-shadow(6px 10px 0 rgba(26, 26, 26, 0.1));
}
.page-breed .bo-collage--links .wp-block-image:first-of-type { margin-left: 0; margin-right: auto; transform: rotate(-2deg); }
.page-breed .bo-collage--links .wp-block-image:nth-of-type(2) { margin-left: auto; transform: rotate(3deg); }

/* Fotostrook: galerij met licht gedraaide foto's zoals de covers. */
.page-breed .wp-block-gallery.has-nested-images {
    --wp--style--unstable-gallery-gap: 28px;
    gap: 28px;
    margin: 0;
}
.page-breed .wp-block-gallery.has-nested-images figure.wp-block-image { margin: 0; }
.page-breed .wp-block-gallery.has-nested-images figure.wp-block-image img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
.page-breed .bo-strook figure.wp-block-image {
    filter: drop-shadow(6px 10px 0 rgba(26, 26, 26, 0.08)) drop-shadow(0 4px 8px rgba(26, 26, 26, 0.10));
    transition: transform 0.2s ease;
}
.page-breed .bo-strook figure.wp-block-image:nth-child(4n+1) { transform: rotate(-2deg); }
.page-breed .bo-strook figure.wp-block-image:nth-child(4n+2) { transform: rotate(1.5deg); }
.page-breed .bo-strook figure.wp-block-image:nth-child(4n+3) { transform: rotate(-1deg); }
.page-breed .bo-strook figure.wp-block-image:nth-child(4n+4) { transform: rotate(2deg); }

/* ─── Knoppen ────────────────────────────────────── */
.page-breed .wp-block-buttons { margin: 8px 0 0; }

.page-breed .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    font-family: var(--serif);
    font-size: 17px;
    padding: 16px 30px;
    border: 1.5px solid var(--plum);
    border-radius: 999px;
    background: var(--plum);
    color: var(--paper);
    text-decoration: none;
    transition: all 0.15s;
}
.page-breed .wp-block-button__link:hover {
    background: var(--terracotta);
    border-color: var(--terracotta);
    color: var(--paper);
}

/* Op de wijnrode band: gele knop zoals "Let's connect!" op de homepage. */
.page-breed .bo-band--wijn .wp-block-button__link {
    background: var(--yellow);
    border-color: var(--yellow);
    color: var(--plum);
}
.page-breed .bo-band--wijn .wp-block-button__link:hover {
    background: transparent;
    color: var(--yellow);
}

/* ─── Contactkaarten ─────────────────────────────── */
/* Groep met klasse bo-kaart (plus bo-kaart--mail, --formulier of
   --whatsapp voor het icoon): witte kaart met icoon, titel en knop. */
.page-breed .bo-kaart {
    background: var(--paper);
    border-radius: 12px;
    padding: 32px 24px 28px;
    text-align: center;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 6px 8px 0 rgba(26, 26, 26, 0.12);
}

.page-breed .bo-kaart::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    background: var(--kaart-kleur, var(--terracotta));
    -webkit-mask: var(--kaart-icoon) center / contain no-repeat;
            mask: var(--kaart-icoon) center / contain no-repeat;
}

.page-breed .bo-kaart--mail {
    --kaart-kleur: var(--terracotta);
    --kaart-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1 2.4V17h16V7.4l-8 5.6-8-5.6ZM5.7 7 12 11.4 18.3 7H5.7Z'/%3E%3C/svg%3E");
}
.page-breed .bo-kaart--formulier {
    --kaart-kleur: var(--lavender-deep);
    --kaart-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H9l-4.4 3.5A1 1 0 0 1 3 19.7V4a1 1 0 0 1 1-1Zm1 2v12.6L8.3 15H19V5H5Zm3 3h8v2H8V8Zm0 4h5v2H8v-2Z'/%3E%3C/svg%3E");
}
.page-breed .bo-kaart--whatsapp {
    --kaart-kleur: #3C9A5F;
    --kaart-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2Zm0 1.8a8.2 8.2 0 1 1-4.2 15.3l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 0 1 12 3.8Zm-3.3 4c-.2 0-.5 0-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3c.1.2 2 3.1 4.9 4.3 2.4 1 2.9.8 3.4.7.5 0 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4l-.5-.3-1.9-.9c-.3-.1-.4-.1-.6.1l-.8 1c-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.3-1.4-.8-.8-1.4-1.7-1.6-2-.1-.3 0-.4.1-.5l.4-.5.3-.4v-.5l-.9-2.1c-.2-.5-.4-.5-.6-.5h-.5Z'/%3E%3C/svg%3E");
}

.page-breed .bo-kaart h3 {
    font-family: var(--display);
    font-size: 21px;
    line-height: 1.2;
    color: var(--plum);
    margin: 0 0 18px;
}

.page-breed .bo-kaart p {
    color: var(--ink-soft);
    opacity: 1;
    font-size: 15px;
    margin: -8px auto 18px;
}

.page-breed .bo-kaart .wp-block-buttons { justify-content: center; margin: 0; }

/* Knop in de kaart: wijnrood, ook op de wijnrode band. */
.page-breed .bo-band--wijn .bo-kaart .wp-block-button__link {
    background: var(--plum);
    border-color: var(--plum);
    color: var(--paper);
    font-size: 15px;
    padding: 11px 22px;
}
.page-breed .bo-band--wijn .bo-kaart .wp-block-button__link:hover {
    background: var(--terracotta);
    border-color: var(--terracotta);
    color: var(--paper);
}

.page-breed .wp-block-columns.bo-kaarten { gap: 20px; align-items: stretch; }

/* Mailadres in de knop niet afbreken; tot 1100px komen de kaarten onder
   de tekst zodat ze genoeg breedte hebben. */
.page-breed .bo-kaart .wp-block-button__link { white-space: nowrap; padding: 11px 18px; }

@media (max-width: 1100px) {
    .page-breed .bo-band--wijn .wp-block-columns:not(.bo-kaarten) { flex-wrap: wrap !important; }
    .page-breed .bo-band--wijn .wp-block-columns:not(.bo-kaarten) > .wp-block-column { flex-basis: 100% !important; }
}

/* ─── Mobiel ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .page-breed h1 { font-size: 40px; }
    .page-breed h2 { font-size: 32px; }
    .page-breed .wp-block-columns { gap: 40px; }
}

@media (max-width: 781px) {
    .page-breed { --golf: 32px; }
    .page-breed .bo-band { padding: 56px 20px; }
    .page-breed .bo-band--licht { padding-bottom: calc(56px + var(--golf)); }
    .page-breed .bo-band--zacht,
    .page-breed .bo-band--wijn { padding-top: calc(56px + var(--golf)); padding-bottom: calc(56px + var(--golf)); }
    .page-breed .bo-band > .wp-block-group__inner-container > * + *,
    .page-breed .bo-band > * + * { margin-top: 40px; }

    .page-breed h1 { font-size: 32px; }
    .page-breed h2 { font-size: 27px; }
    .page-breed .bo-cirkel { padding: 16px 24px 20px; margin-left: -12px; }
    .page-breed .wp-block-columns { gap: 32px; }

    .page-breed .wp-block-gallery.has-nested-images {
        --wp--style--unstable-gallery-gap: 16px;
        gap: 16px;
    }
    .page-breed .bo-strook figure.wp-block-image { transform: none !important; }
}