/* =========================================
   LAYOUT FIELD RENDERER
   Kirby gebruikt een 12-kolommen span systeem.
   Het grid moet altijd 12 tracks zijn zodat
   span 4 = 1/3, span 6 = 1/2, span 3 = 1/4 etc.
   ========================================= */

.page-layout {
    width: 100%;
}

.page-layout--full {
    max-width: none;
}

/* Elke rij is altijd een 12-kolommen grid */
.layout-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 2.5rem;
    margin-bottom: 0;
    padding: 3rem 0;
}

/* Achtergrond opties */
.layout-row[data-background="light"] {
    background-color: var(--light-grey);
    padding-left: 2rem;
    padding-right: 2rem;
}

.layout-row[data-background="dark"] {
    background-color: var(--black);
    color: var(--white);
    padding-left: 2rem;
    padding-right: 2rem;
}

.layout-row[data-background="dark"] a {
    color: var(--white);
}

/* Kolom spans — Kirby berekent span(12) per kolom */
.layout-col-span-12 { grid-column: span 12; }
.layout-col-span-6  { grid-column: span 6;  }
.layout-col-span-4  { grid-column: span 4;  }
.layout-col-span-3  { grid-column: span 3;  }
.layout-col-span-8  { grid-column: span 8;  }
.layout-col-span-9  { grid-column: span 9;  }
.layout-col-span-1  { grid-column: span 1;  }
.layout-col-span-2  { grid-column: span 2;  }
.layout-col-span-5  { grid-column: span 5;  }
.layout-col-span-7  { grid-column: span 7;  }
.layout-col-span-10 { grid-column: span 10; }
.layout-col-span-11 { grid-column: span 11; }

/* Smalle page-wrap (760px): 1-kolom layout krijgt leesbare max-breedte */
.page-wrap:not(.page-wrap--wide) .layout-col-span-12 {
    max-width: 700px;
}

/* Brede page-wrap (960px, workshops/events): volledige breedte */
.page-wrap--wide .layout-col-span-12 {
    max-width: none;
}

/* Full-width rows buiten page-wrap */
.page-layout--full .layout-row {
    padding: 4rem clamp(1.5rem, 5vw, 6rem);
    margin: 0;
}

.page-layout--full .layout-col-span-12 {
    max-width: 760px;
    margin: 0 auto;
}

/* ─── Block stijlen in kolommen ─────────────── */

.layout-col .block {
    margin-bottom: 1.5rem;
}

.layout-col .block:last-child {
    margin-bottom: 0;
}

/* Headings */
.layout-col h2,
.layout-col h3,
.layout-col h4 {
    font-family: var(--font-title);
    font-weight: 400;
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.layout-col h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.layout-col h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
.layout-col h4 { font-size: 1.1rem; }

/* Tekst */
.layout-col p {
    font-size: 1.05rem;
    line-height: 1.75;
    margin-bottom: 1rem;
}

.layout-col p:last-child { margin-bottom: 0; }

.layout-col a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: currentColor;
    transition: color var(--transition),
                text-decoration-color var(--transition),
                text-decoration-thickness var(--transition),
                text-underline-offset var(--transition);
}

.layout-col a:hover {
    color: var(--accent-red);
    text-decoration-color: var(--accent-red);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.layout-col strong { font-weight: 600; }
.layout-col em     { font-style: italic; }

.layout-col ul,
.layout-col ol {
    padding-left: 1.4rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
    line-height: 1.75;
}

.layout-col li { margin-bottom: 0.3rem; }

/* Afbeeldingen */
.layout-col figure { margin: 0; }

.layout-col figure img {
    width: 100%;
    height: auto;
}

.layout-col figcaption {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    color: var(--grey);
    letter-spacing: 0.05em;
    margin-top: 0.6rem;
}

/* Quotes */
.layout-col blockquote {
    border-left: 2px solid currentColor;
    padding-left: 1.4rem;
    margin: 0;
}

.layout-col blockquote p {
    font-family: var(--font-body);
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    font-style: italic;
    line-height: 1.45;
    margin-bottom: 0.4rem;
}

.layout-col blockquote cite,
.layout-col blockquote footer {
    font-family: var(--font-sans);
    font-size: var(--small-size);
    letter-spacing: 0.08em;
    color: var(--grey);
    font-style: normal;
    display: block;
}

/* Video embeds */
.layout-col .block-type-video,
.layout-col .block-embed {
    margin: 0;
}

/* Spacer */
.block-spacer { display: block; }

/* ─── Responsive ───────────────────────────── */

@media (max-width: 900px) {
    .layout-col-span-3 { grid-column: span 6; }
}

@media (max-width: 640px) {
    .layout-row {
        gap: 1.5rem;
        padding: 2rem 0;
    }

    .layout-col-span-3,
    .layout-col-span-4,
    .layout-col-span-6,
    .layout-col-span-8,
    .layout-col-span-9,
    .layout-col-span-12 {
        grid-column: span 12;
        max-width: none;
    }

    .page-layout--full .layout-row {
        padding: 2.5rem 1.5rem;
    }
}

/* ─── Page intro ───────────────────────────── */

.page-intro {
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    font-style: italic;
    line-height: 1.6;
    max-width: 600px;
    margin-bottom: 2.5rem;
}