/*
 * Water Concepts
 * Standaardpagina's — FAQ, Over, juridische pagina's
 *
 * Laadt op elke pagina met body class "wce-page"
 * (page.inc.php), na blocks.css (eyebrow, wce-intro,
 * wce-band, sectiekop H2 op H3-maat, tekst 62ch).
 *
 * Editor (per taal), GP Layout: Contained, ACF "Toon hero" aan:
 *
 *   OVER
 *     Kolommen-blok, extra CSS-class "wce-split"
 *       links:  alinea "eyebrow" → H2 → alinea's
 *               (1e alinea na de H2 = lead, automatisch)
 *       rechts: Afbeelding-blok (uitsnede 4:5, automatisch)
 *     daaronder: alinea "eyebrow" → H2 → alinea
 *                → shortcode [wce_tag_grid max="6"]
 *     daaronder: shortcode [wce_category_cards]
 *
 *   FAQ
 *     Kolommen-blok, extra CSS-class "wce-split wce-split--faq"
 *       links:  alinea "eyebrow" → H2 → alinea
 *               → Groep "wce-aside-card":
 *                   H3 → alinea → Knoppen-blok (link naar
 *                   de contactpagina van die taal)
 *       rechts: Yoast FAQ-blok
 *     daaronder: shortcode [wce_category_cards]
 *
 *   JURIDISCH (disclaimer, voorwaarden, privacy, Impressum)
 *     Gewone tekst: H2 / H3 / alinea's / lijsten.
 *     Geen extra blokken of classes nodig.
 *
 * Kolommen: 2/3 rechts-links via grid (geen flex van
 * WordPress), zelfde aanpak als .contact-layout.
 */


/* ==========================================
   VARIABELEN
   --sticky-offset: ruimte onder de sticky
   header voor de linkerkolom van de FAQ en
   voor ankers (#faq-question-…). Aanpassen
   als de headerhoogte verandert.
========================================== */

.wce-page {
    --sticky-offset: 8rem;
    --section-space: 5rem;
}


/* ==========================================
   RITME
   De hero sluit direct aan op de content;
   zelfde ritme als contact en homepage
   (5 / 4 / 3rem). Een sectie als laatste blok
   (categoriekaarten) heeft zelf al ruimte.
========================================== */

.wce-page .entry-content > :first-child {
    margin-top: var(--section-space);
}

.wce-page .entry-content > :last-child:not(section) {
    margin-bottom: var(--section-space);
}


/* ==========================================
   LOPENDE TEKST (o.a. juridische pagina's)
   Leesbare kolom 62ch, links uitgelijnd met
   de content. Koppen volgen handout §2:
   H2 → H3-maat (blocks.css), H3 → H4-maat,
   H4 → H5-maat.
========================================== */

.wce-page .entry-content > :is(ul, ol, h2, h3, h4) {
    max-width: 62ch;
}

/* blocks.css zet margin-top van H2 op 0 (sectiekop
   bovenaan); in lopende tekst krijgt elke volgende
   H2 lucht. */
.wce-page .entry-content > h2:not(:first-child) {
    margin-top: 3rem;
}

.wce-page .entry-content > .eyebrow + h2 {
    margin-top: 0;
}

.wce-page .entry-content > h3 {
    margin: 2rem 0 0.75rem;

    color: var(--blue-900);

    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.3;
}

.wce-page .entry-content > h4 {
    margin: 1.5rem 0 0.5rem;

    color: var(--blue-900);

    font-size: 1rem;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.4;
}

.wce-page .entry-content > :is(ul, ol) {
    margin: 0 0 1.5em;
    padding-left: 1.25rem;

    color: var(--neutral-600);
}

.wce-page .entry-content > :is(ul, ol) li {
    margin: 0 0 0.375rem;
}

.wce-page .entry-content > :is(p, ul, ol) a:not(.wp-block-button__link) {
    color: var(--blue-500);

    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.wce-page .entry-content > :is(p, ul, ol) a:not(.wp-block-button__link):hover {
    color: var(--blue-900);
}


/* ==========================================
   SPLIT — 2 KOLOMMEN (Over, FAQ)
   Over:  tekst 7/12 · foto 5/12; de foto is
          precies zo hoog als de tekst.
   FAQ:   intro + kaart 5/12 (sticky) ·
          vragen 7/12, bovenaan uitgelijnd.

   !important op align-items: WordPress zet
   ".wp-block-columns { align-items: normal
   !important }".
========================================== */

.wce-page .entry-content .wce-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: stretch !important;
    gap: 4rem;

    margin-bottom: var(--section-space);
}

.wce-page .entry-content .wce-split > .wp-block-column {
    flex-basis: auto !important;

    min-width: 0;
    margin: 0 !important;
}

.wce-page .entry-content .wce-split > .wp-block-column > :first-child {
    margin-top: 0;
}

.wce-page .entry-content .wce-split > .wp-block-column > :last-child {
    margin-bottom: 0;
}


/* ------------------------------------------
   SPLIT — TEKST
   Eyebrow uit blocks.css. H2 op H3-maat
   (sectiekop), eerste alinea na de H2 = lead.
------------------------------------------ */

.wce-page .entry-content .wce-split h2 {
    margin: 0 0 1rem;

    color: var(--blue-900);

    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.wce-page .entry-content .wce-split p:not(.eyebrow) {
    max-width: 62ch;
    margin: 0 0 1em;

    color: var(--neutral-600);
}

.wce-page .entry-content .wce-split h2 + p:not(.eyebrow) {
    margin-bottom: 1.25rem;

    font-size: 1.125rem;
    line-height: 1.65;
}


/* ------------------------------------------
   SPLIT — FOTO
   Fotokolom = tekstkolom-hoogte (grid stretch),
   foto absoluut met object-fit: cover — zelfde
   principe als de band. Zo bepaalt de tekst de
   hoogte, nooit de aangeleverde foto (handout
   §0). Minimaal 360px bij korte tekst.
   --radius-md zoals kaarten. Geen bijschrift
   (de foto vult de kolom).
------------------------------------------ */

.wce-page .entry-content .wce-split:not(.wce-split--faq) > .wp-block-column:has(> .wp-block-image) {
    position: relative;

    min-height: 360px;
}

.wce-page .entry-content .wce-split:not(.wce-split--faq) > .wp-block-column > .wp-block-image {
    position: absolute;
    inset: 0;

    overflow: hidden;

    margin: 0;

    border-radius: var(--radius-md);
}

.wce-page .entry-content .wce-split .wp-block-image img {
    display: block;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    object-fit: cover;
    object-position: center;
}

.wce-page .entry-content .wce-split .wp-block-image figcaption {
    display: none;
}


/* ==========================================
   FAQ — SPLIT-VARIANT
   Linkerkolom sticky op desktop, zodat de
   contactkaart in beeld blijft tijdens het
   lezen.
========================================== */

.wce-page .entry-content .wce-split--faq {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start !important;
}

.wce-page .entry-content .wce-split--faq > .wp-block-column:first-child {
    position: sticky;
    top: var(--sticky-offset);
}


/* ------------------------------------------
   FAQ — CONTACTKAART (Groep "wce-aside-card")
   Vlak --neutral-100, geen rand, --radius-md
   (zelfde als de gegevenskaart op contact).
   Tekst op dit vlak: --neutral-600 (handout §1).
   Knop = losse CTA → teal pill (handout §3).
------------------------------------------ */

.wce-page .entry-content .wce-aside-card {
    margin-top: 2.5rem;
    padding: 2rem;

    border-radius: var(--radius-md);

    background: var(--neutral-100);
}

.wce-page .entry-content .wce-aside-card > .wp-block-group__inner-container {
    padding: 0 !important;
}

.wce-page .entry-content .wce-aside-card h3 {
    margin: 0 0 0.5rem;

    color: var(--blue-900);

    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: normal;
    line-height: 1.3;
}

.wce-page .entry-content .wce-aside-card p:not(.eyebrow) {
    margin: 0 0 1.5rem;

    color: var(--neutral-600);
}

.wce-page .entry-content .wce-aside-card .wp-block-buttons {
    margin: 0;
}

.wce-page .entry-content .wce-aside-card .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 12px 22px;

    border: 0;
    border-radius: var(--radius-pill);

    background: var(--teal-500);
    color: var(--blue-900);

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;

    transition: background-color .2s ease;
}

/* Trailing pijl (handout §3), zelfde als de
   kaartpijl; via CSS zodat de editor gewoon
   een knop met tekst blijft. */
.wce-page .entry-content .wce-aside-card .wp-block-button__link::after {
    content: "";

    width: 16px;
    height: 16px;

    background: currentColor;

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wce-page .entry-content .wce-aside-card .wp-block-button__link:hover {
    background: var(--teal-300);
    color: var(--blue-900);
}

.wce-page .entry-content .wce-aside-card .wp-block-button__link:focus-visible {
    outline: 2px solid var(--blue-400);
    outline-offset: 3px;
}


/* ------------------------------------------
   FAQ — VRAGEN (Yoast FAQ-blok)
   Markup Yoast:
     .schema-faq
       .schema-faq-section#faq-question-…
         strong.schema-faq-question
         p.schema-faq-answer
   Alles open, geen JS. Scheidingslijnen
   --neutral-200 tussen de vragen; eerste vraag
   zonder bovenruimte (lijnt uit met de
   eyebrow links), laatste zonder lijn.
------------------------------------------ */

.wce-page .entry-content .schema-faq {
    margin: 0;
}

.wce-page .entry-content .schema-faq-section {
    margin: 0;
    padding: 1.75rem 0;

    border-bottom: 1px solid var(--neutral-200);

    scroll-margin-top: var(--sticky-offset);
}

.wce-page .entry-content .schema-faq-section:first-child {
    padding-top: 0;
}

.wce-page .entry-content .schema-faq-section:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.wce-page .entry-content .schema-faq-question {
    display: block;

    margin: 0 0 0.5rem;

    color: var(--blue-900);

    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.wce-page .entry-content .schema-faq-answer {
    max-width: 62ch;
    margin: 0;

    color: var(--neutral-600);
}

.wce-page .entry-content .schema-faq-answer a {
    color: var(--blue-500);

    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.wce-page .entry-content .schema-faq-answer a:hover {
    color: var(--blue-900);
}

.wce-page .entry-content .schema-faq-answer img {
    margin-top: 1rem;

    border-radius: var(--radius-md);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1024px) {

    .wce-page {
        --section-space: 4rem;
    }

    .wce-page .entry-content .wce-split {
        gap: 2.5rem;
    }

    .wce-page .entry-content .wce-split h2 {
        font-size: 1.5rem;
    }

    .wce-page .entry-content > h3,
    .wce-page .entry-content .wce-aside-card h3,
    .wce-page .entry-content .schema-faq-question {
        font-size: 1.1875rem;
    }

    .wce-page .entry-content .wce-aside-card {
        padding: 1.5rem;
    }
}


/* ==========================================
   MOBIEL
   Over: foto boven (4:3), tekst eronder — zelfde
   volgorde als de band.
   FAQ: intro → vragen → contactkaart. De
   linkerkolom wordt "display: contents", zodat
   de kaart ná de vragen kan komen.
========================================== */

@media (max-width: 768px) {

    .wce-page {
        --section-space: 3rem;
    }

    .wce-page .entry-content > h2:not(:first-child) {
        margin-top: 2.5rem;
    }

    .wce-page .entry-content > h3,
    .wce-page .entry-content .wce-aside-card h3,
    .wce-page .entry-content .schema-faq-question {
        font-size: 1.125rem;
    }

    .wce-page .entry-content .wce-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .wce-page .entry-content .wce-split h2 {
        font-size: 1.375rem;
    }


    /* Over: foto boven */

    .wce-page .entry-content .wce-split:not(.wce-split--faq) > .wp-block-column:has(> .wp-block-image) {
        order: -1;
    }

    .wce-page .entry-content .wce-split:not(.wce-split--faq) > .wp-block-column:has(> .wp-block-image) {
        min-height: 0;
    }

    .wce-page .entry-content .wce-split:not(.wce-split--faq) > .wp-block-column > .wp-block-image {
        position: relative;

        aspect-ratio: 4 / 3;
    }


    /* FAQ: intro → vragen → kaart */

    .wce-page .entry-content .wce-split--faq {
        gap: 0;
    }

    .wce-page .entry-content .wce-split--faq > .wp-block-column:first-child {
        display: contents;

        position: static;
    }

    .wce-page .entry-content .wce-split--faq > .wp-block-column:last-child {
        order: 1;

        margin-top: 1rem !important;
    }

    .wce-page .entry-content .wce-split--faq .wce-aside-card {
        order: 2;

        margin-top: 2.5rem;
    }

    .wce-page .entry-content .schema-faq-section {
        padding: 1.5rem 0;
    }

    .wce-page .entry-content .schema-faq-section:first-child {
        padding-top: 0;
    }

    .wce-page .entry-content .schema-faq-section:last-child {
        padding-bottom: 0;
    }
}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

    .wce-page .entry-content .wce-aside-card .wp-block-button__link {
        transition: none;
    }
}