/* Jouw zaak in beeld — opbouw zoals de makers-pagina van Boekje Open
   (banden met golfranden, markeerstift- en cirkelkoppen, collage, fotostrook,
   contactkaarten), met een eigen kleur en letter. Geen inline-stijlen of
   externe bronnen: de site draait met een strikte CSP. */

:root {
    --zand:      #F3EFE7;
    --licht:     #FBF9F4;
    --inkt:      #1F1F1D;
    --inkt-zacht:#45443F;
    --grijs:     #77746C;
    --groen:     #2E5245;
    --groen-zacht:#5E7F70;
    --oker:      #E3B95F;
    --terra:     #C4704F;
    --papier:    #FFFFFF;

    --kop:   'DM Serif Display', Georgia, serif;
    --tekst: 'Karla', 'Helvetica Neue', Arial, sans-serif;

    --tekst-w: 680px;
    --band-w: 1160px;
    --golf: 56px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--zand);
    color: var(--inkt);
    font-family: var(--tekst);
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: var(--groen); text-underline-offset: 3px; }

/* ─── Kop en voet ─────────────────────────────── */
.site-kop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px max(28px, calc((100% - var(--band-w)) / 2));
    background: var(--licht);
}
.merk {
    font-family: var(--kop);
    font-size: 22px;
    color: var(--groen);
    text-decoration: none;
}
.kop-link {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.04em;
    color: var(--papier);
    background: var(--groen);
    padding: 9px 20px;
    border-radius: 999px;
    text-decoration: none;
}
.kop-link:hover { background: var(--terra); }

.site-voet {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    justify-content: center;
    align-items: center;
    padding: 36px 24px 44px;
    font-size: 15px;
    color: var(--grijs);
}
.site-voet .merk { font-size: 18px; }

/* ─── Banden ─────────────────────────────────── */
.band {
    position: relative;
    padding: 88px max(28px, calc((100% - var(--band-w)) / 2));
}

.band--licht,
.band--zacht,
.band--donker {
    --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));
}
.band--zacht,
.band--donker {
    -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));
}

.band--licht { background: var(--licht); }
.band--zacht {
    background:
        radial-gradient(ellipse 50% 60% at 15% 30%, rgba(196, 112, 79, 0.16), transparent 70%),
        radial-gradient(ellipse 50% 50% at 85% 75%, rgba(94, 127, 112, 0.22), transparent 70%),
        var(--licht);
}
.band--donker { background: var(--groen); color: var(--papier); }

/* ─── Tekst ──────────────────────────────────── */
h1, h2, h3 {
    font-family: var(--kop);
    font-weight: 400;
    color: var(--groen);
    line-height: 1.12;
    letter-spacing: -0.005em;
}
h1 { font-size: 64px; margin: 0 0 18px; }
h2 { font-size: 40px; margin: 0 0 22px; }
h3 { font-size: 26px; margin: 0 0 12px; }

p { margin: 0 0 16px; color: var(--inkt-zacht); max-width: 62ch; }

.band--donker h2, .band--donker h3 { color: var(--papier); }
.band--donker p { color: var(--papier); opacity: 0.9; }
.band--donker .vraag {
    font-family: var(--kop);
    font-size: 30px;
    opacity: 1;
    margin-top: 24px;
}

/* Markeerstift per regel. */
.marker {
    display: inline;
    line-height: 1.35;
    background: linear-gradient(transparent 55%, rgba(227, 185, 95, 0.85) 55%, rgba(227, 185, 95, 0.85) 88%, transparent 88%);
    padding: 0 6px;
    margin-left: -6px;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
}
.marker + * { margin-top: 26px; }
h1 + .marker { font-size: 32px; }

/* Getekende cirkel. */
.cirkel {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 22px 38px 28px;
    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='%23E3B95F' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* Citaat. */
.citaat {
    margin: 28px 0;
    padding: 4px 0 4px 24px;
    border-left: 3px solid var(--oker);
}
.citaat p {
    font-family: var(--kop);
    font-style: italic;
    font-size: 26px;
    line-height: 1.3;
    color: var(--groen);
    margin: 0;
}

/* ─── Kolommen ───────────────────────────────── */
.kolommen {
    display: flex;
    gap: 64px;
}
.kolommen--midden { align-items: center; }
.kolommen--opening { align-items: flex-start; }
.kolommen--opening .kolom--tekst { padding-top: 24px; }
.foto--onder-tekst { margin-top: 40px; transform: rotate(-1.5deg); }
.kolom--tekst { flex: 1 1 56%; }
.kolom--beeld { flex: 1 1 44%; }
.kolom--smal  { flex-basis: 40%; }

/* ─── Foto's (en voorlopige vlakken) ─────────── */
.foto {
    position: relative;
    margin: 0;
    border-radius: 4px;
    overflow: hidden;
    background:
        repeating-linear-gradient(135deg, rgba(46, 82, 69, 0.06) 0 14px, transparent 14px 28px),
        #E6E0D3;
    filter: drop-shadow(-8px 12px 0 rgba(31, 31, 29, 0.08));
}
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto > span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grijs);
}
.foto--staand  { aspect-ratio: 2 / 3; }
.foto--liggend { aspect-ratio: 3 / 2; }
.foto--los { transform: rotate(-1.5deg); }
.focus-rechts { object-position: 56% center; }

/* Brede foto onder de drie blokken (in plaats van de strook zolang er
   nog geen vier werkfoto's zijn). */
.foto--breed {
    max-width: 900px;
    margin: 56px auto 0;
    aspect-ratio: 3 / 2;
    transform: rotate(-1deg);
}

.collage { position: relative; padding-bottom: 8px; }
.collage .foto--staand { width: 78%; margin-left: auto; transform: rotate(2deg); }


/* ─── Vierluik onder de opening ──────────────── */
.vierluik {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 64px;
}
.vierluik .foto { aspect-ratio: 3 / 2; filter: none; border-radius: 4px; }

/* ─── Drie blokken + fotostrook ──────────────── */
.intro { text-align: center; margin-bottom: 48px; }
.intro p { margin-left: auto; margin-right: auto; }

.drie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.blok {
    background: var(--papier);
    border-radius: 12px;
    padding: 30px 28px 18px;
    box-shadow: 6px 8px 0 rgba(31, 31, 29, 0.06);
}
.blok h3 { font-size: 24px; }
.blok p { font-size: 17px; }

.strook {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 900px;
    margin: 56px auto 0;
}
.strook .foto { aspect-ratio: 4 / 5; }
.focus-juwelier { object-position: 66% center; }
.strook .foto:nth-child(4n+1) { transform: rotate(-2deg); }
.strook .foto:nth-child(4n+2) { transform: rotate(1.5deg); }
.strook .foto:nth-child(4n+3) { transform: rotate(-1deg); }
.strook .foto:nth-child(4n+4) { transform: rotate(2deg); }

.resultaat {
    text-align: center;
    margin: 48px auto 0;
    font-size: 20px;
    color: var(--inkt);
}

/* ─── Contactkaarten ─────────────────────────── */
.kaarten {
    flex: 1 1 52%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.kaart {
    background: var(--papier);
    border-radius: 12px;
    padding: 32px 22px 28px;
    text-align: center;
    box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.14);
}
.kaart::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    background: var(--kaart-kleur);
    -webkit-mask: var(--kaart-icoon) center / contain no-repeat;
            mask: var(--kaart-icoon) center / contain no-repeat;
}
.kaart--mail {
    --kaart-kleur: var(--terra);
    --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");
}
.kaart--whatsapp {
    /* Officieel WhatsApp-logo (Meta brand resources) in de merkkleur. */
    --kaart-kleur: #25D366;
    --kaart-icoon: url("/img/whatsapp.svg?v=20261010c");
}
.kaart h3 { color: var(--groen); font-size: 23px; margin-bottom: 18px; }
.knop {
    display: inline-block;
    white-space: nowrap;
    font-weight: 600;
    font-size: 15px;
    padding: 11px 20px;
    border-radius: 999px;
    background: var(--groen);
    color: var(--papier);
    text-decoration: none;
    transition: background 0.15s;
}
.knop:hover { background: var(--terra); }

/* ─── Kleinere schermen ──────────────────────── */
@media (max-width: 1100px) {
    h1 { font-size: 52px; }
    h2 { font-size: 34px; }
    .kolommen { gap: 40px; }
    .kolommen--contact { flex-wrap: wrap; }
    .kolommen--contact > * { flex-basis: 100%; }
    .drie { grid-template-columns: 1fr; max-width: var(--tekst-w); margin: 0 auto; }
}

@media (max-width: 781px) {
    :root { --golf: 32px; }
    body { font-size: 17px; }
    .band { padding: 56px 20px; }
    .band--licht { padding-bottom: calc(56px + var(--golf)); }
    .band--zacht, .band--donker { padding-top: calc(56px + var(--golf)); padding-bottom: calc(56px + var(--golf)); }
    .site-kop { padding: 16px 20px; }
    .merk { font-size: 20px; }

    h1 { font-size: 40px; }
    h2 { font-size: 28px; }
    h1 + .marker { font-size: 24px; }
    .citaat p { font-size: 22px; }
    .cirkel { padding: 16px 26px 20px; }

    .kolommen { flex-direction: column; align-items: stretch; gap: 36px; }
    .kolom--beeld { order: 2; }
    .kolommen--opening .kolom--tekst { padding-top: 0; }
    .foto--onder-tekst { margin-top: 28px; transform: none; }
    .collage .foto--staand { width: 80%; }
    .kolom--smal .foto--los { max-width: 340px; margin: 0 auto; }
    .foto--breed { margin-top: 40px; transform: none; }

    .vierluik { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 40px; }
    .strook { grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 40px; }
    .strook .foto { transform: none !important; }

    .kaarten { grid-template-columns: 1fr; }
}