/* ==========================================================================
   Complai Webinar-details
   Markup + controls: widgets/event-details-widget.php

   Zelfde opzet als het CTA-blok: alle instelbare waarden staan hieronder als
   custom property op .cw-event. De Elementor-controls schrijven diezelfde
   properties op `{{WRAPPER}} .cw-event` en winnen op specificiteit. De waardes
   hieronder zijn dus de defaults van het ontwerp, niet zomaar een fallback.

   De kaart heeft bewust geen eigen gradient: hij is doorschijnend wit en ligt
   op de achtergrond van de sectie eromheen.
   ========================================================================== */

.cw-event {
    /* Kaart */
    --cw-event-max-width: 868px;
    --cw-event-bg: rgba(255, 255, 255, .35);
    --cw-event-blur: 2px;
    --cw-event-border-width: 1px;
    --cw-event-border-color: rgba(255, 255, 255, .6);
    --cw-event-radius: 1.5rem;
    --cw-event-padding: 2rem 2.5rem;
    --cw-event-shadow: 0 4px 30px rgba(16, 30, 52, .08);

    /* Scheidingslijnen */
    --cw-event-rule-width: 1px;
    --cw-event-rule-color: rgba(60, 71, 89, .15);
    --cw-event-row-gap: 1.5rem;

    /* Details */
    --cw-event-meta-gap: 1.75rem;
    --cw-event-meta-label-gap: .5rem;
    --cw-event-meta-align: left;
    --cw-event-meta-basis: 0;
    --cw-event-label-color: #3C4759;
    --cw-event-value-color: #101E34;

    /* Sprekers */
    --cw-event-speakers-gap: 1.75rem;
    --cw-event-speaker-basis: 0;
    --cw-event-photo-size: 4rem;
    --cw-event-photo-radius: 50%;
    --cw-event-photo-gap: 1rem;
    --cw-event-photo-bg: #FFFFFF;
    --cw-event-photo-border-width: 0;
    --cw-event-photo-border-color: rgba(255, 255, 255, .8);
    --cw-event-name-color: #101E34;
    --cw-event-name-gap: .125rem;
    --cw-event-role-color: #3C4759;

    width: 100%;
    max-width: var(--cw-event-max-width);
    margin-inline: auto;
    padding: var(--cw-event-padding);
    box-sizing: border-box;
    background-color: var(--cw-event-bg);
    border: var(--cw-event-border-width) solid var(--cw-event-border-color);
    border-radius: var(--cw-event-radius);
    box-shadow: var(--cw-event-shadow);
    -webkit-backdrop-filter: blur(var(--cw-event-blur));
    backdrop-filter: blur(var(--cw-event-blur));
}

/* ── Detailregel ──────────────────────────────────────────────────────────
   Een <dl> met per detail een <div>: dat mag in een definitielijst en houdt
   label en waarde bij elkaar, ook voor een schermlezer. */
.cw-event__meta {
    display: flex;
    align-items: stretch;
    gap: var(--cw-event-meta-gap);
    margin: 0;
}

.cw-event__meta-item {
    display: flex;
    flex: 1 1 var(--cw-event-meta-basis);
    /* Zonder min-width duwt een lange waarde de kolom breder dan zijn deel. */
    min-width: 0;
    flex-direction: column;
    gap: var(--cw-event-meta-label-gap);
    text-align: var(--cw-event-meta-align);
}

/* De scheidingslijn hoort bij de kolom erna, zodat hij er nooit één te veel
   of te weinig is — ook niet bij twee of vier details. */
.cw-event__meta-item + .cw-event__meta-item {
    padding-inline-start: var(--cw-event-meta-gap);
    border-inline-start: var(--cw-event-rule-width) solid var(--cw-event-rule-color);
}

.cw-event__label {
    margin: 0;
    color: var(--cw-event-label-color);
    font-family: Inter, sans-serif;
    font-size: .875rem;
    font-weight: 500;
    line-height: 125%;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.cw-event__value {
    margin: 0;
    color: var(--cw-event-value-color);
    font-family: Inter, sans-serif;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 125%;
}

/* ── Sprekers ─────────────────────────────────────────────────────────────
   De lijn zit op de sprekersrij zelf: staat er geen detailregel boven, dan
   valt hij vanzelf weg. */
.cw-event__speakers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cw-event-speakers-gap);
}

.cw-event__meta + .cw-event__speakers {
    margin-block-start: var(--cw-event-row-gap);
    padding-block-start: var(--cw-event-row-gap);
    border-block-start: var(--cw-event-rule-width) solid var(--cw-event-rule-color);
}

.cw-event__speaker {
    display: flex;
    flex: 1 1 var(--cw-event-speaker-basis);
    min-width: 0;
    align-items: center;
    gap: var(--cw-event-photo-gap);
}

/* Een niveau zwaarder dan één klasse: de reset van Elementor zet
   `.elementor img` op border-radius 0, border none en height auto. Een losse
   klasse verliest daarvan, en de foto zou vierkant blijven. */
.cw-event .cw-event__photo {
    flex: none;
    display: block;
    width: var(--cw-event-photo-size);
    height: var(--cw-event-photo-size);
    background-color: var(--cw-event-photo-bg);
    border: var(--cw-event-photo-border-width) solid var(--cw-event-photo-border-color);
    border-radius: var(--cw-event-photo-radius);
    /* Vaste hoogte én breedte plus cover: een liggende of staande foto wordt
       vierkant bijgesneden, zodat 50% ronding ook echt een cirkel geeft en
       geen ovaal. */
    object-fit: cover;
    /* Een niet-vierkante foto wordt naar het gezicht toe bijgesneden, niet
       naar het midden van de afbeelding. */
    object-position: center top;
}

.cw-event__speaker-body {
    display: flex;
    flex-direction: column;
    gap: var(--cw-event-name-gap);
    min-width: 0;
}

.cw-event__name {
    font-family: Inter, sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 140%;
    text-decoration: none;
}

/* De kleuren staan een niveau zwaarder dan de typografie: de reset van
   hello-elementor stijlt a-elementen met een hogere specificiteit dan één
   losse klasse. De typografie hierboven blijft juist licht, zodat de
   typografiecontrol in Elementor hem kan overschrijven. */
.cw-event .cw-event__name {
    color: var(--cw-event-name-color);
}

.cw-event a.cw-event__name:hover,
.cw-event a.cw-event__name:focus-visible {
    text-decoration: underline;
}

.cw-event__role {
    color: var(--cw-event-role-color);
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 150%;
}

/* ── Redactionele melding (alleen zichtbaar in de Elementor-editor) ────── */
.cw-event__notice {
    margin: 0;
    padding: 1rem 1.25rem;
    background-color: rgba(255, 255, 255, .75);
    border: 1px dashed rgba(16, 30, 52, .3);
    border-radius: .5rem;
    color: #3C4759;
    font-family: Inter, sans-serif;
    font-size: .875rem;
    text-align: center;
}

/* ── Breakpoints ──────────────────────────────────────────────────────────
   Volgen de actieve Elementor-breakpoints van deze site (laptop ≤1366,
   tablet ≤1024, mobile ≤767). De losse controls hebben hun eigen responsive
   waarden; dit vangt de verhoudingen af die geen control hebben. */
@media (max-width: 1024px) {
    .cw-event {
        --cw-event-meta-gap: 1.25rem;
        --cw-event-speakers-gap: 1.25rem;
    }

    .cw-event__value {
        font-size: 1.25rem;
    }
}

/* Onder elkaar, met de scheidingslijn boven het item in plaats van ernaast. */
@media (max-width: 767px) {
    .cw-event {
        --cw-event-meta-gap: 1rem;
        --cw-event-speakers-gap: 1.25rem;
    }

    .cw-event__meta {
        flex-direction: column;
    }

    .cw-event__meta-item + .cw-event__meta-item {
        padding-inline-start: 0;
        border-inline-start: 0;
        padding-block-start: var(--cw-event-meta-gap);
        border-block-start: var(--cw-event-rule-width) solid var(--cw-event-rule-color);
    }

    .cw-event__speaker {
        flex: 1 1 100%;
    }
}