@charset "UTF-8";
/* ============================================================
   Evenement-detail (framework-renderer DetailEvent) — 2-koloms:
   afbeelding LINKS, alle tekst strikt in de RECHTERkolom.
   DetailEvent emit de blokken plat (figure, title, facts, intro, body).
   De figuur floaat links; elk tekstblok krijgt `margin-left` ter breedte van
   de foto (+gap), zodat de tekst een ECHTE rechterkolom vormt en niet onder de
   foto wrapt (zoals bij een gewone float-flow).
   Conditioneel geladen via SiteApp::cssLinks() op marker `.layer--event-detail`.
   ============================================================ */

.layer--event-detail { padding-bottom: 3.5rem; }
.layer--event-detail .event-detail { width: 90%; max-width: 1080px; margin-inline: auto; }
.event-detail::after { content: ""; display: block; clear: both; }   /* float-containment */

/* --- LINKS: de afbeelding --- */
.event-detail__figure {
    float: left;
    width: 38%;
    margin: 0;
    overflow: hidden;
    border-radius: 8px;
}
.event-detail__image { width: 100%; height: auto; display: block; }

/* --- RECHTS: alle tekstblokken in de rechterkolom (margin-left = foto + gap) --- */
.event-detail__eyebrow,
.event-detail__title,
.event-detail__subtitle,
.event-detail__facts,
.event-detail__intro,
.event-detail__body,
.event-detail__website { margin-left: 42%; }

/* Datum als eyebrow bóven de titel (framework-renderer #356). */
.event-detail__eyebrow {
    margin: 0 0 .45rem;
    color: var(--green-2, #37723e);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.event-detail__title { margin-bottom: 1rem; }
/* Subtitel onder de titel (cursief, in het display-lettertype). */
.event-detail__subtitle {
    margin: -.35rem 0 1.25rem;
    font-family: var(--font-display, Georgia, serif);
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.35;
    color: var(--green-2, #37723e);
}
.event-detail__intro { font-size: 1.15rem; line-height: 1.6; margin-bottom: 1.5rem; }
.event-detail__body { line-height: 1.7; }
.event-detail__body :first-child { margin-top: 0; }
.event-detail__body img { max-width: 100%; height: auto; border-radius: 4px; }

/* "Meer informatie" (event-detail__website) stond zonder opmaak helemaal los onder de
   afbeelding — het framework emit 'm los, ná .event-detail__body, maar deze stylesheet gaf
   'm nooit de margin-left van de rechterkolom, dus viel hij terug op de linkerkant.
   Zelfde knop-look als .btn/.btn--primary elders op de site (Ronny, 2026-09-05: liever een
   knop dan een linkje, onder de tekst i.p.v. onder de foto). */
.event-detail__website {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 1.75rem;
    background: var(--green-1); color: #fff;
    font-family: var(--font-body); font-weight: 600; font-size: 14.5px;
    padding: 10px 20px; border-radius: 999px; text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
    box-shadow: 0 8px 20px -10px rgba(46,96,66,.7);
}
.event-detail__website:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 14px 26px -10px rgba(46,96,66,.8); }

/* Feiten-box: alleen "Waar" — de datum staat in de eyebrow; het framework (#356) laat
   "Wanneer" al weg, dus de box toont enkel de locatie. */

.event-detail__facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .7rem 1.4rem;
    align-items: baseline;
    margin-bottom: 1.75rem;
    padding: 1.2rem 1.4rem;
    background: #fff;
    border-radius: 8px;
}
/* Label = gewone tekst (baseline-uitlijnbaar met de waarde); het icoon staat
   absoluut, verticaal gecentreerd op de labelregel, en beïnvloedt de baseline niet.
   Zo is er geen magische px-nudge meer nodig. */
.event-detail__label {
    margin: 0;
    padding-left: 25px;
    position: relative;
    color: var(--green-2, #37723e);
    font-size: .7rem;         /* compacte hoofdletters */
    line-height: 1.4;
    transform: translateY(-1px);   /* optische correctie */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.event-detail__label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    background: no-repeat center / contain;
    /* Default = locatie-pin (Waar). Sinds #356 laat het framework "Wanneer" weg als
       de eyebrow de datum toont, dus meestal is "Waar" het enige (en laatste) feit. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337723e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
/* Staat "Wanneer" er tóch bij (geen eyebrow), dan is dat het niet-laatste feit → kalender. */
.event-detail__label:not(:last-of-type)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2337723e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
.event-detail__value {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.4;
    color: var(--ink, #292723);
    font-weight: 500;
}

/* Mobiel/smal: 1 kolom, afbeelding vol-breed boven de tekst. */
@media (max-width: 800px) {
    .event-detail__figure { float: none; width: 100%; margin-bottom: 1.5rem; }
    .event-detail__eyebrow,
    .event-detail__title,
    .event-detail__subtitle,
    .event-detail__facts,
    .event-detail__intro,
    .event-detail__body,
    .event-detail__website { margin-left: 0; }
}
@media (max-width: 40rem) {
    .event-detail__facts { grid-template-columns: 1fr; gap: .15rem .5rem; }
    .event-detail__label { margin-top: .5rem; }
    .event-detail__label:first-child { margin-top: 0; }
}