/* ═══════════════════════════════════════
   SINGLE ARTICLE — De Faunabescherming
   ═══════════════════════════════════════ */

/* ── HERO ── */
.single-hero {
    position: relative;
    background-color: #234B3E;
    /* padding-bottom wordt overschreven door de featured image regel hieronder */
    padding: 40px 0 0;
    overflow: visible;
}

.single-hero__inner {
    max-width: 808px;
    margin: 0 auto;
    padding: 0 24px 64px;
}

/* Breadcrumbs */
.single-hero__breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 24px;
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0;
}
.single-hero__breadcrumbs a,
.single-hero__breadcrumbs span.current {
    color: #A8B3A9;
    text-decoration: none;
    text-decoration-style: solid;
    text-underline-offset: 2px;
}
.single-hero__breadcrumbs a:hover {
    color: #ffffff;
}
.single-hero__breadcrumbs span {
    color: #A8B3A9;
    text-decoration: none;
}
.single-hero__breadcrumbs span[aria-hidden] {
    color: #A8B3A9;
    text-decoration: none;
}

/* H1 */
.single-hero__title {
    font-family: 'Orelega One', serif;
    font-weight: 400;
    font-size: 64px;
    line-height: 64px;
    letter-spacing: 0;
    color: #ffffff;
    margin: 0 0 24px;
}

/* Datum + tags */
.single-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-family: 'Special Gothic Condensed One', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #B3D5FA;
}
.single-hero__meta a {
    color: #B3D5FA;
    text-decoration: none;
    transition: opacity .15s;
}
.single-hero__meta a:hover {
    opacity: .75;
}
.single-hero__sep {
    opacity: .6;
}

/* Golf: zit OP de hero maar ONDER de thumbnail */
.single-hero__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 37px;
    z-index: 5;
    background-image: url('/wp-content/themes/fauna-bescherming/assets/wave-bottom.svg');
    background-size: initial;
    pointer-events: none;
    background-repeat: repeat-x;
}

.has-form .single-hero__wave{
    background-image: url('/wp-content/themes/fauna-bescherming/assets/wave3-bottom.svg');
}

/* ── FEATURED IMAGE ──
 *
 * De hero heeft een grote padding-bottom gelijk aan de helft
 * van de afbeeldingshoogte. De afbeelding staat in de flow NA de
 * hero en heeft een negatieve margin-top van diezelfde helft.
 * Zo overlapt de bovenste helft de hero, de onderste helft steekt eruit.
 *
 * Afbeelding max-breedte: 1224px, ratio 2:1 → hoogte max 612px → helft = 306px
 * Bij 100vw: hoogte = (100vw - 48px) / 2 → helft = (100vw - 48px) / 4
 */

/* Extra ruimte onderaan hero voor de helft van de thumbnail */
.single-hero.image-hero {
    padding-bottom: clamp(100px, calc((100vw - 48px) / 4), 306px);
}
.single-hero.no-image-hero {
    padding-bottom: 0px;
}

.single-featured {
    position: relative;
    z-index: 6;
    padding: 0 24px;
    margin-top: calc(-1 * clamp(100px, calc((100vw - 48px) / 4), 306px));
    margin-bottom: 48px;
}

.single-featured__inner {
    max-width: 1224px;
    margin: 0 auto;
}

.single-featured__img {
    width: 100%;
    display: block;
    border-radius: 8px;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    height: auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.single-featured-spacer {
    display: none;
}

/* ── VERBERG EERSTE AFBEELDING IN CONTENT ── */

.single-content > div:first-child > div:nth-child(2)>figure {
    display: none;
}
.single-content > div:nth-child(1)>figure {
    display: none;
}
.single-content > div:nth-child(2)>figure {
    display: none;
}


/* ── CONTENT AREA ── */
.single-content {
    padding: 5px 24px 96px;
}

/* Blok-containers */
.single-block {
    margin: 0 auto 32px;
}

/* Afbeeldingen: 1224px */
.single-block--wide {
    max-width: 1224px;
}

/* Blockquote: 1016px */
.single-block--quote {
    max-width: 1016px;
}

/* Tekst: 808px */
.single-block--text {
    max-width: 808px;
}

/* ── TEKST STIJLEN ── */

/* Eerste paragraph = teaser (groter) */
.single-content > .single-block--text:first-child p,
.single-content > .single-block--text:first-child .stk-block-text__text {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 40px;
    letter-spacing: 0;
    color: #061A0A;
}

/* Standaard tekst */
.single-block--text p,
.single-block--text .stk-block-text__text {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: 0;
    color: #061A0A;
    margin: 0 0 20px;
}

.single-block--text strong {
    font-weight: 700;
}

/* H2 */
.single-block--text h2,
.single-block--text .stk-block-heading__text {
    font-family: 'Orelega One', serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 48px;
    letter-spacing: 0;
    color: #19352B;
    margin: 40px 0 16px;
}

/* H3 */
.single-block--text h3 {
    font-family: 'Orelega One', serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 36px;
    color: #19352B;
    margin: 32px 0 12px;
}

/* H4 */
.single-block--text h4 {
    font-family: 'Special Gothic Condensed One', sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #061A0A;
    margin: 28px 0 10px;
}

/* ── BLOCKQUOTE ── */
.single-block--quote blockquote,
blockquote {
    font-family: 'Orelega One', serif;
    font-weight: 400;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: 0;
    color: #061A0A;
    border-left: 8px solid #DBF178;
    margin: 0;
    padding: 8px 0 8px 40px;
}

/* ── AFBEELDINGEN IN CONTENT ── */
.single-block--wide figure,
.single-block--wide .wp-block-image {
    margin: 0;
}
.single-block--wide figure img,
.single-block--wide .wp-block-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

.single-block .wp-block-stackable-text ~ .single-block--wide figure img{
width: initial!important;
}

.single-block--wide figcaption,
.single-block--wide .wp-element-caption {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #536471;
    margin-top: 8px;
    text-align: center;
}
.single-block--wide figcaption a,
.single-block--wide .wp-element-caption a {
    color: #536471;
    text-decoration: underline;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
    .single-hero__title {
        font-size: 44px;
        line-height: 48px;
    }
    .single-block--quote blockquote,
    blockquote {
        font-size: 32px;
        line-height: 40px;
        padding-left: 24px;
    }
}
@media (max-width: 600px) {
    .single-hero__inner {
        padding-bottom: 64px;
    }
    .single-hero__title {
        font-size: 34px;
        line-height: 38px;
    }
    .single-hero__meta {
        font-size: 15px;
    }
    .single-block--text p,
    .single-block--text .stk-block-text__text {
        font-size: 17px;
        line-height: 28px;
    }
    .single-content > .single-block--text:first-child p {
        font-size: 20px;
        line-height: 32px;
    }
    .single-block--quote blockquote,
    blockquote {
        font-size: 26px;
        line-height: 34px;
        padding-left: 20px;
    }
    .single-block--text h2,
    .single-block--text .stk-block-heading__text {
        font-size: 28px;
        line-height: 34px;
    }
}

/* ═══════════════════════════════════════
   MEER NIEUWS SECTIE
   ═══════════════════════════════════════ */

.meer-nieuws {
    background: #DDE4DE;
    padding: 56px 24px 96px;
}

.meer-nieuws__inner {
    max-width: 1224px;
    margin: 0 auto;
}

/* H2 */
.meer-nieuws__title {
    font-family: 'Orelega One', serif;
    font-weight: 400;
    font-size: 48px;
    line-height: 56px;
    letter-spacing: 0;
    color: #19352B;
    margin: 0 0 40px;
}

/* Grid */
.meer-nieuws__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* Card */
.meer-nieuws-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Afbeelding */
.meer-nieuws-card__img-link {
    display: block;
    text-decoration: none;
}
.meer-nieuws-card__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
    background: #c9c9c9;
}
.meer-nieuws-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    transition: transform .3s ease;
}
.meer-nieuws-card__img-link:hover .meer-nieuws-card__img img {
    transform: scale(1.03);
}

/* Datum */
.meer-nieuws-card__date {
    display: block;
    font-family: 'Special Gothic Condensed One', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #955A3E;
}

/* Titel */
.meer-nieuws-card__title {
    font-family: 'Orelega One', serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 32px;
    letter-spacing: 0;
    color: #061A0A;
    margin: 0;
    flex: 1;
}
.meer-nieuws-card__title a {
    color: inherit;
    text-decoration: none;
    transition: opacity .15s;
}
.meer-nieuws-card__title a:hover {
    opacity: .75;
}

/* Verder lezen */
.meer-nieuws-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Special Gothic Condensed One', sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #061A0A;
    text-decoration: none;
    text-underline-offset: 3px;
    margin-top: auto;
    transition: opacity .15s;
}
.meer-nieuws-card__link:hover {
    opacity: .65;
}

/* Responsive */
@media (max-width: 900px) {
    .meer-nieuws__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .meer-nieuws__title {
        font-size: 36px;
        line-height: 44px;
    }
}
@media (max-width: 600px) {
    .meer-nieuws {
        padding: 48px 24px 64px;
    }
    .meer-nieuws__grid {
        grid-template-columns: 1fr;
    }
    .meer-nieuws__title {
        font-size: 28px;
        line-height: 34px;
    }
    .meer-nieuws-card__title {
        font-size: 26px;
        line-height: 30px;
    }
}

main#single-article {
    background-color: #DDE4DE;
}