/* ==========================================================================
   Carend – blogartikel (RainLab Blog)
   Varianten: A editorial (.carend-blog-post--a), B hero card (--b), C magazine (--c)

   Alles is gescopet onder .carend-blog-post. Het theme kent geen globale
   CSS-variabelen; de waarden hieronder spiegelen tailwind.config.js en de
   bestaande partials (post/head, post/post-sm, elems/line, link/default,
   knoppen "rounded-full bg-orange-deep hover:bg-blacky").
   ========================================================================== */

.carend-blog-post {
    --cb-text: #484240;          /* blacky: koppen en lopende tekst           */
    --cb-muted: #6A6A6A;         /* metalic: metadata, intro, bijschriften    */
    --cb-grey-dark: #7c7371;     /* grey-dark: kruimelpad                     */
    --cb-grey: #EFEFEF;          /* grey: chips, randen                       */
    --cb-grey-line: #e5e7eb;     /* standaard border (chips in post/head)     */
    --cb-surface: #F7F7F7;       /* vlak achter de hoofdafbeelding            */
    --cb-beige: #F6F3EF;         /* brown-light: citaten, band variant C      */
    --cb-orange: #EC6533;        /* orange/orange-deep: knoppen, links, iconen */
    --cb-orange-hover: #9E4322;  /* orange-deeper                             */
    --cb-line: #74C8DA;          /* huisstijllijn (layout_color blue)         */
    --cb-link: #497D89;          /* blue-deep: tekstlinks in de layoutkleur, toegankelijke "deep"-tint */
    --cb-link-soft: #647A75;     /* main-deep: "Lees meer"-links              */
    --cb-measure: 46rem;         /* tekstkolom ±736 px                        */
    --cb-hero-max: 75rem;        /* hoofdafbeelding max. 1200 px              */
    --cb-font-body: 'Lato', sans-serif;
    --cb-font-head: 'EB Garamond', serif;

    color: var(--cb-text);
    font-family: var(--cb-font-body);
    padding: 0 1.25rem;
    margin-top: 0.75rem;
    overflow-wrap: anywhere;
}
/* Huisstijllijn volgt de layout_color van de pagina (body.layout-<kleur>), zoals elems/line */
.layout-main .carend-blog-post       { --cb-line: #A0C2BB; --cb-link: #647A75; }
.layout-violet .carend-blog-post     { --cb-line: #A1A2D1; --cb-link: #727394; }
.layout-brown .carend-blog-post      { --cb-line: #F5A46C; --cb-link: #8B7160; }
.layout-green-dark .carend-blog-post { --cb-line: #609E95; --cb-link: #4D7F78; }

@media (min-width: 1024px) {
    .carend-blog-post { padding-left: 0; margin-top: 1.75rem; }
}
.carend-blog-post :is(a, button):focus-visible { outline: 2px solid var(--cb-orange); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Kruimelpad (zoals de Boxes-hero: text-xs, grey-dark, "/"-scheiding)
   -------------------------------------------------------------------------- */
.carend-blog-breadcrumb { font-size: 0.75rem; line-height: 1rem; color: var(--cb-grey-dark); margin-bottom: 1.5rem; }
.carend-blog-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; min-width: 0; }
.carend-blog-breadcrumb li { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.carend-blog-breadcrumb li + li::before { content: "/"; margin: 0 0.35rem; }
.carend-blog-breadcrumb a { color: inherit; text-decoration: none; }
.carend-blog-breadcrumb a:hover { text-decoration: underline; }
.carend-blog-breadcrumb [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; max-width: 32rem; }
/* Mobiel: alleen "Home / Nieuws"; de (lange) artikeltitel staat direct eronder als H1 */
@media (max-width: 767px) {
    .carend-blog-breadcrumb [aria-current="page"] { display: none; }
    .carend-blog-breadcrumb li:has(+ [aria-current="page"])::after { content: none; }
}

/* --------------------------------------------------------------------------
   Kop: categorieën, titel, intro, metadata, huisstijllijn, auteurs
   -------------------------------------------------------------------------- */
.carend-blog-header { margin-bottom: 1.75rem; }
.carend-blog-header--center { text-align: center; max-width: 52rem; margin-left: auto; margin-right: auto; }
.carend-blog-header--center .carend-blog-categories,
.carend-blog-header--center .carend-blog-meta,
.carend-blog-header--center .carend-blog-authors { justify-content: center; }

/* Categoriechips exact als post/head: rounded-md border px-3 py-[3px] text-xs text-metalic bg-grey */
.carend-blog-categories { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.carend-blog-category {
    display: inline-block; font-size: 0.75rem; line-height: 1rem;
    color: var(--cb-muted); text-decoration: none;
    padding: 3px 12px; border-radius: 6px;
    background: var(--cb-grey); border: 1px solid var(--cb-grey-line);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.carend-blog-category:hover { background: var(--cb-text); border-color: var(--cb-text); color: #fff; }

/* Titel: EB Garamond bold, zoals alle koppen op de site; bewust niet extreem groot (26–34 px) */
.carend-blog-title {
    font-family: var(--cb-font-head); font-weight: 700;
    font-size: clamp(1.625rem, 1.4rem + 0.9vw, 2.125rem);
    line-height: 1.2; color: var(--cb-text);
    margin: 0 0 0.75rem; text-wrap: balance;
}
.carend-blog-intro {
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.6; color: var(--cb-muted);
    margin: 0 0 1rem;
}
.carend-blog-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem;
    font-size: 0.75rem; line-height: 1rem; color: var(--cb-muted); margin: 0;
}
.carend-blog-meta__sep { opacity: 0.6; }
/* Huisstijllijn onder de kop, zoals elems/line (h-0.5, layout_color) in post/head */
.carend-blog-line { height: 2px; background: var(--cb-line); margin: 0.75rem 0 1.5rem; }

/* Auteurs: kaart spreker/md (foto rond 80 px, naam Garamond bold, functie, social icons) of auteur-fallback */
.carend-blog-authors { display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; text-align: left; }
.carend-blog-authors > .text-metalic > div > .flex { margin-bottom: 0.5rem; }
.carend-blog-author { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.carend-blog-author img { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; flex: none; }
.carend-blog-author__name { font-family: var(--cb-font-head); font-weight: 700; font-size: 1.125rem; color: var(--cb-text); }

/* --------------------------------------------------------------------------
   Hoofdafbeelding – altijd volledig zichtbaar, nooit gecropt of vervormd.
   width:auto + max-width + max-height: het beeld past proportioneel binnen
   beide grenzen; het kader vangt de lege ruimte op bij afwijkende verhoudingen.
   -------------------------------------------------------------------------- */
.carend-blog-hero { margin: 0 auto 2.25rem; max-width: var(--cb-hero-max); }
.carend-blog-hero__frame {
    display: flex; justify-content: center; align-items: center;
    background: var(--cb-surface);
    border: 1px solid var(--cb-grey);
    border-radius: 6px;
    padding: 0.5rem;
}
.carend-blog-hero__img {
    display: block;
    width: auto; max-width: 100%;
    height: auto; max-height: 80vh;
    margin: 0 auto;
    object-fit: contain;      /* vangnet: nooit vervormen of afsnijden */
    border-radius: 4px;
}
@media (max-width: 767px) { .carend-blog-hero__img { max-height: 70vh; } }
.carend-blog-hero--portrait { max-width: 46rem; }
.carend-blog-hero--portrait .carend-blog-hero__img { max-height: 75vh; }
.carend-blog-hero--square { max-width: 52rem; }
.carend-blog-hero__caption { font-size: 0.75rem; color: var(--cb-muted); text-align: center; margin: 0.6rem 0 0; }

/* --------------------------------------------------------------------------
   Artikelinhoud (post.content). Links, lijstmarkers en citaten volgen de
   typografie-instellingen van het theme (oranje links/markers, beige citaat).
   -------------------------------------------------------------------------- */
.carend-blog-content {
    max-width: var(--cb-measure); margin: 0 auto;
    font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);   /* 16 px mobiel → 18 px desktop */
    line-height: 1.7; color: var(--cb-text);
}
.carend-blog-content > :first-child { margin-top: 0; }
.carend-blog-content p { margin: 0 0 1.35em; }
.carend-blog-content h2, .carend-blog-content h3, .carend-blog-content h4 {
    font-family: var(--cb-font-head); font-weight: 700; line-height: 1.25;
    color: var(--cb-text); margin: 1.8em 0 0.5em;
}
.carend-blog-content h2 { font-size: 1.5rem; }
.carend-blog-content h3 { font-size: 1.25rem; }
.carend-blog-content h4 { font-size: 1.125rem; }
.carend-blog-content strong, .carend-blog-content b { font-weight: 700; }
/* Tekstlinks in de layoutkleur zoals main.scss (.layout-<kleur> p a), maar in de toegankelijke deep-tint;
   de extra specificiteit is nodig om die themaregel te overstemmen. */
.carend-blog-post .carend-blog-content a,
.carend-blog-post .carend-blog-content p a { color: var(--cb-link); text-decoration: underline; text-underline-offset: 4px; }
.carend-blog-post .carend-blog-content a:hover,
.carend-blog-post .carend-blog-content p a:hover { text-decoration: none; color: var(--cb-text); }
.carend-blog-content ul, .carend-blog-content ol { margin: 0 0 1.35em; padding-left: 1.25em; }
.carend-blog-content ul { list-style: disc; }
.carend-blog-content ol { list-style: decimal; }
.carend-blog-content li { margin: 0.5em 0; }
.carend-blog-content li::marker { color: var(--cb-orange); }
.carend-blog-content blockquote {
    margin: 1.75em 0; padding: 1em 1.25em;
    background: var(--cb-beige); border-radius: 6px;
    font-family: var(--cb-font-head); font-style: italic;
    font-size: 1.15em; line-height: 1.5; color: var(--cb-text);
}
.carend-blog-content blockquote p:last-child { margin-bottom: 0; }
.carend-blog-content img { max-width: 100%; height: auto; display: block; margin: 1.75em auto; border-radius: 4px; }
.carend-blog-content figure { margin: 1.75em 0; }
.carend-blog-content figure img { margin: 0 auto; }
.carend-blog-content figcaption { font-size: 0.75rem; color: var(--cb-muted); text-align: center; margin-top: 0.5em; }
.carend-blog-content hr { border: 0; border-top: 2px solid var(--cb-grey); margin: 2.5em 0; }
.carend-blog-content pre { overflow-x: auto; font-size: 0.875em; background: var(--cb-surface); padding: 1em; border-radius: 6px; }
.carend-blog-content table { width: 100%; border-collapse: collapse; font-size: 0.9375em; margin: 1.5em 0; display: block; overflow-x: auto; }
.carend-blog-content th, .carend-blog-content td { border-bottom: 1px solid var(--cb-grey); padding: 0.5em 0.75em; text-align: left; vertical-align: top; }
.carend-blog-content th { font-weight: 700; }
/* Embeds: video/audio uit de editor worden door de Twig-filter |embeds omgezet (opmaak in embeds.css);
   overige iframes blijven ongemoeid en mogen alleen niet uit de kolom lopen. */
.carend-blog-content iframe { max-width: 100%; }
/* Losse afbeelding in een alinea: op desktop 3 rem breder dan de tekstkolom */
@media (min-width: 1024px) {
    .carend-blog-content > p:has(> img:only-child) { margin-left: -3rem; margin-right: -3rem; text-align: center; }
    .carend-blog-content > p:has(> img:only-child) > img { display: inline-block; vertical-align: top; }
}

/* --------------------------------------------------------------------------
   Afsluiting: categorieën, likes/reacties/delen, terugknop, gerelateerd, reacties
   -------------------------------------------------------------------------- */
.carend-blog-footer { max-width: var(--cb-measure); margin: 2.5rem auto 0; padding-top: 1.25rem; border-top: 2px solid var(--cb-grey); }
.carend-blog-footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.carend-blog-footer .carend-blog-categories { margin: 0; }
.carend-blog-footer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

/* Deelknoppen: kleine oranje icoontjes, zoals post/stats */
.carend-blog-share { display: flex; align-items: center; gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.carend-blog-share__label { font-size: 0.75rem; color: var(--cb-muted); }
.carend-blog-share a, .carend-blog-share button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none;
    color: var(--cb-orange); cursor: pointer; text-decoration: none;
    transition: color 0.15s ease;
}
.carend-blog-share a:hover, .carend-blog-share button:hover { color: var(--cb-text); }
.carend-blog-share svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.carend-blog-share .disabled { pointer-events: none; }

/* Knop in de huisstijl: rounded-full bg-orange-deep hover:bg-blacky px-5 py-2 text-sm font-bold text-white */
.carend-blog-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.875rem; line-height: 1.3125rem; font-weight: 700; color: #fff; text-decoration: none;
    padding: 0.5rem 1.25rem; border-radius: 9999px; background: var(--cb-orange);
    transition: background-color 0.15s ease;
}
.carend-blog-btn:hover { background: var(--cb-text); color: #fff; }

/* Gerelateerd: kaartjes zoals post/post-sm (Garamond-titel, "Lees meer"-link) */
.carend-blog-related { margin-top: 2.5rem; }
.carend-blog-related__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .carend-blog-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.carend-blog-related__link { display: block; color: inherit; text-decoration: none; }
.carend-blog-related__thumb { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--cb-surface); margin-bottom: 0.75rem; }
.carend-blog-related__name { display: block; font-family: var(--cb-font-head); font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--cb-text); }
.carend-blog-related__link:hover .carend-blog-related__name { text-decoration: underline; text-underline-offset: 4px; }
.carend-blog-related__date { display: block; font-size: 0.75rem; color: var(--cb-muted); margin: 0.35rem 0 0.6rem; }

.carend-blog-comments { max-width: var(--cb-measure); margin: 3rem auto 0; }

/* ==========================================================================
   VARIANT A – editorial: gecentreerde kop, hoofdafbeelding tot 1200 px, smalle tekstkolom.
   ========================================================================== */
.carend-blog-post--a .carend-blog-line { max-width: 20rem; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   VARIANT B – hero card: tekst links (2/5), afbeelding rechts (3/5); staand → 1/2-1/2,
   panorama → onder elkaar. Mobiel: titel boven, afbeelding eronder.
   ========================================================================== */
.carend-blog-card { display: grid; gap: 1.5rem; align-items: center; margin-bottom: 2.25rem; }
.carend-blog-card .carend-blog-header { margin-bottom: 0; }
.carend-blog-card .carend-blog-hero { margin: 0; max-width: none; }
.carend-blog-card .carend-blog-hero__img { max-height: 70vh; }
@media (min-width: 1024px) {
    .carend-blog-card { grid-template-columns: 2fr 3fr; gap: 2.5rem; }
    .carend-blog-card--portrait { grid-template-columns: 1fr 1fr; }
    .carend-blog-card--portrait .carend-blog-hero__img { max-height: 75vh; }
    .carend-blog-card--wide { grid-template-columns: 1fr; }
}

/* ==========================================================================
   VARIANT C – magazine: kop links, beige band met de hoofdafbeelding, smalle tekstkolom
   met (xl) deel-kolom. Sticky werkt pas zonder overflow:hidden op de layout-wrapper.
   ========================================================================== */
.carend-blog-post--c .carend-blog-header { max-width: 52rem; }
.carend-blog-band { margin: 0 -1.25rem 2.5rem; padding: 1.25rem; background: var(--cb-beige); }
.carend-blog-band .carend-blog-hero { margin: 0 auto; max-width: none; }
.carend-blog-band .carend-blog-hero__frame { background: #fff; border-color: #fff; }
.carend-blog-band .carend-blog-hero--portrait { max-width: 46rem; }
.carend-blog-band .carend-blog-hero--square { max-width: 52rem; }
@media (min-width: 1024px) { .carend-blog-band { margin-left: 0; padding: 2rem; border-radius: 6px; } }
.carend-blog-body { display: grid; gap: 2rem; }
.carend-blog-rail { display: none; }
@media (min-width: 1280px) {
    .carend-blog-body { grid-template-columns: 3.5rem minmax(0, var(--cb-measure)); justify-content: center; column-gap: 2.5rem; }
    .carend-blog-body .carend-blog-content { margin: 0; }
    .carend-blog-rail { display: block; }
    .carend-blog-rail__inner { position: sticky; top: 6rem; }
    .carend-blog-rail .carend-blog-share { flex-direction: column; align-items: center; gap: 0.75rem; }
    .carend-blog-post--c .carend-blog-footer .carend-blog-share { display: none; }
}

/* --------------------------------------------------------------------------
   Uitgelicht evenement / donatieproject (blog-post/cta), onder de tekst.
   Kaart in de stijl van steun/project-card (border grey-light, rounded-md),
   feiten met iconen zoals de widget 'upcoming', voortgangsbalk in brown.
   -------------------------------------------------------------------------- */
.carend-blog-cta-list { max-width: var(--cb-measure); margin: 2.5rem auto 0; display: grid; gap: 1.25rem; }
.carend-blog-cta {
    display: grid; grid-template-columns: 1fr;
    border: 1px solid #C6C5C5; border-radius: 6px; background: #fff; overflow: hidden;
}
@media (min-width: 640px) { .carend-blog-cta:has(.carend-blog-cta__media) { grid-template-columns: 2fr 3fr; } }
.carend-blog-cta__media { display: block; }
.carend-blog-cta__media img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carend-blog-cta__body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.carend-blog-cta__kicker { margin: 0; font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cb-orange); }
.carend-blog-cta__title { margin: 0; font-family: var(--cb-font-head); font-weight: 700; font-size: 1.375rem; line-height: 1.25; color: var(--cb-text); }
.carend-blog-cta__title a { color: inherit; text-decoration: none; }
.carend-blog-cta__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.carend-blog-cta__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; font-size: 0.8125rem; color: var(--cb-muted); }
.carend-blog-cta__facts i { color: #4D7F78; margin-right: 0.35rem; }   /* green-deep, zoals de widget */
.carend-blog-cta__text { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--cb-muted); }
.carend-blog-cta__progress { height: 0.5rem; border-radius: 9999px; background: var(--cb-grey); overflow: hidden; }
.carend-blog-cta__progress-bar { height: 100%; border-radius: 9999px; background: #B8967F; }   /* brown */
.carend-blog-cta__amounts { margin: 0; font-size: 0.8125rem; color: var(--cb-muted); }
.carend-blog-cta__amounts strong { color: var(--cb-text); }
.carend-blog-cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
.carend-blog-cta__actions .carend-blog-btn svg { width: 0.875rem; height: 0.875rem; fill: currentColor; }
.carend-blog-btn--secondary { background: #fff; color: var(--cb-text); border: 1px solid var(--cb-text); padding: calc(0.5rem - 1px) calc(1.25rem - 1px); }
.carend-blog-btn--secondary:hover { background: var(--cb-text); color: #fff; }