/*
 * Water Concepts
 * Editorpatronen (gedeeld)
 *
 * Laadt op de homepage en op alle standaardpagina's
 * (body class "wce-page", page.inc.php), vóór home.css
 * en page.css (styles.inc.php).
 *
 * Verhuisd uit home.css. Scope :is(.home, .wce-page)
 * heeft dezelfde specificiteit als .home (één class),
 * dus de homepage verandert niet.
 *
 * Patronen (editor):
 *   - alinea met class "eyebrow"
 *   - Groep "wce-intro"   eyebrow + H2 + lead + tekst
 *   - Groep "wce-band"    tekst links, foto rechts tot
 *                         de wrapperrand (= PLP-band)
 *   - H2 direct in de content = sectiekop (H3-maat)
 *   - shortcodes [wce_category_cards] / [wce_tag_grid]
 *     binnen de content
 *
 * Alleen-homepage (banden, navy intro, overlap,
 * uitgelichte producten) staat in home.css.
 */


/* ==========================================
   WRAPPER
   Banden gebruiken 100vw (incl. scrollbalk) →
   zonder clip een paar pixels horizontale
   scroll. "clip" i.p.v. "hidden": breekt
   position: sticky (header) niet.
========================================== */

:is(.home, .wce-page) .wrapper-site {
    overflow-x: clip;
}


/* ==========================================
   SECTIES BINNEN DE CONTENT: GEEN EIGEN GUTTER
   GeneratePress zet de horizontale padding om
   de content al zelf. Op PLP/shop/PDP staan
   deze secties buiten de container en hebben
   ze die gutter wel nodig.
========================================== */

:is(.home, .wce-page) .entry-content .category-cards__inner,
:is(.home, .wce-page) .entry-content .tag-cards__inner {
    padding-left: 0;
    padding-right: 0;
}


/* ==========================================
   EDITORINHOUD
   Alinea's max 62ch voor een leesbare
   regellengte.
========================================== */

:is(.home, .wce-page) .entry-content > p {
    max-width: 62ch;
}


/* ==========================================
   EYEBROW (editor: alinea met class "eyebrow")
   Zelfde stijl als bij de categoriekaarten.
========================================== */

:is(.home, .wce-page) .entry-content .eyebrow {
    margin: 0 0 0.625rem 0;

    color: var(--blue-500);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.4;
    text-transform: uppercase;
}


/* ==========================================
   SECTIEKOP IN DE EDITOR
   H2 op H3-maat (handout §2: sectiekoppen
   binnen een pagina), zelfde als de kop van
   de categoriekaarten.
========================================== */

:is(.home, .wce-page) .entry-content > h2,
:is(.home, .wce-page) .entry-content .wce-intro h2 {
    margin-top: 0;
    margin-bottom: 1rem;

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

:is(.home, .wce-page) .entry-content > h2 {
    color: var(--blue-900);
}

/* Tekst direct na een sectie (bijv. na de
   categoriekaarten of de band) krijgt lucht. */
:is(.home, .wce-page) .entry-content > section + :not(section) {
    margin-top: 5rem;
}


/* ==========================================
   INTRO: EYEBROW, KOP EN TEKST ONDER ELKAAR
   Editor: blok Groep met class "wce-intro",
   daarin een alinea met class "eyebrow", een
   H2 en de alinea's. Links uitgelijnd met de
   content.

   Eerste alinea na de kop = lead (automatisch,
   geen class nodig): 1.125rem. Alle alinea's
   max 48rem: lead en tekst eindigen op
   dezelfde rechterrand.

   GP zet 30px padding op de binnenkant van
   elk Groep-blok; WordPress kan blokken in een
   Groep centreren ("inhoudsbreedte"). Beide
   hier uit: alles links, zonder extra inspring.

   Kleuren op de navy band: home.css.
========================================== */

:is(.home, .wce-page) .entry-content .wce-intro > .wp-block-group__inner-container {
    padding: 0 !important;
}

:is(.home, .wce-page) .entry-content .wce-intro > *,
:is(.home, .wce-page) .entry-content .wce-intro > .wp-block-group__inner-container > * {
    margin-left: 0 !important;
    margin-right: auto !important;
}

:is(.home, .wce-page) .entry-content .wce-intro p:not(.eyebrow) {
    max-width: 48rem;
}

:is(.home, .wce-page) .entry-content .wce-intro h2 + p {
    margin-bottom: 1.25rem;

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

:is(.home, .wce-page) .entry-content .wce-intro p:last-child {
    margin-bottom: 0;
}


/* ==========================================
   BAND MET FOTO
   Kopie van de beschrijvingsband op PLP/shop/
   PDP (.plp-description in wc-plp.css): zelfde
   maten, kleuren en typografie, vertaald naar
   blokken in de editor. Wijzig je de PLP-band,
   pas dan ook dit blok aan.

     .plp-description            → Groep .wce-band
     .plp-description__eyebrow   → Alinea .eyebrow
     .plp-description__text-inner→ tekstblokken
     .plp-description__media img → Afbeelding-blok

   Verschil: de PLP-band staat buiten de
   content (grid van 2 × 50% wrapper); hier
   staat hij erin. Achtergrond via pseudo-
   element tot de wrapperrand (max 2560px),
   foto absoluut van het midden tot de
   wrapperrand — zelfde resultaat.

   Extra t.o.v. PLP (bewust behouden): citaat
   en lijst (checklist).

   Editor: blok Groep met class "wce-band":
     alinea "eyebrow" → H2 → alinea's →
     evt. Citaat → Lijst → Afbeelding
========================================== */

:is(.home, .wce-page) .entry-content .wce-band {
    --wrapper: min(100vw, 2560px);

    position: relative;
    isolation: isolate;

    min-height: 420px;
    margin: 0;
    padding: 5rem 0;
}

:is(.home, .wce-page) .entry-content .wce-band::before {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: -1;

    width: var(--wrapper);

    transform: translateX(-50%);

    background: color-mix(in srgb, var(--neutral-100) 50%, var(--neutral-200));
}

/* GP-padding op de binnenkant van de Groep weg,
   blokken links (niet gecentreerd). */
:is(.home, .wce-page) .entry-content .wce-band > .wp-block-group__inner-container {
    padding: 0 !important;
}

:is(.home, .wce-page) .entry-content .wce-band > *,
:is(.home, .wce-page) .entry-content .wce-band > .wp-block-group__inner-container > * {
    margin-left: 0 !important;
    margin-right: auto !important;
}


/* ------------------------------------------
   BAND — TEKST
   PLP: tekstkolom = linkerhelft wrapper met
   4rem rechts, inner max 62ch.
------------------------------------------ */

:is(.home, .wce-page) .entry-content .wce-band > :not(figure):not(.wp-block-image):not(.wp-block-group__inner-container),
:is(.home, .wce-page) .entry-content .wce-band > .wp-block-group__inner-container > :not(figure):not(.wp-block-image) {
    max-width: min(62ch, calc(50% - 4rem));
}

:is(.home, .wce-page) .entry-content .wce-band .eyebrow {
    margin: 0 0 0.625rem 0 !important;

    color: var(--blue-500) !important;

    font-size: 0.75rem !important;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.4 !important;
    text-transform: uppercase;
}

:is(.home, .wce-page) .entry-content .wce-band h2 {
    margin: 2.5rem 0 1rem 0;

    color: var(--blue-900);

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

:is(.home, .wce-page) .entry-content .wce-band h3,
:is(.home, .wce-page) .entry-content .wce-band h4 {
    margin: 2rem 0 0.75rem 0;

    color: var(--blue-900);

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

:is(.home, .wce-page) .entry-content .wce-band .eyebrow + h2,
:is(.home, .wce-page) .entry-content .wce-band .eyebrow + h3,
:is(.home, .wce-page) .entry-content .wce-band .eyebrow + h4 {
    margin-top: 0;
}

:is(.home, .wce-page) .entry-content .wce-band p:not(.eyebrow),
:is(.home, .wce-page) .entry-content .wce-band li {
    color: var(--neutral-600);

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

:is(.home, .wce-page) .entry-content .wce-band p:not(.eyebrow) {
    margin: 0 0 1em 0;
}

:is(.home, .wce-page) .entry-content .wce-band a {
    color: var(--blue-500);
    font-weight: 700;
}

:is(.home, .wce-page) .entry-content .wce-band > .wp-block-group__inner-container > :last-child:not(figure):not(.wp-block-image),
:is(.home, .wce-page) .entry-content .wce-band > :last-child:not(figure):not(.wp-block-image) {
    margin-bottom: 0;
}


/* ------------------------------------------
   BAND — FOTO
   PLP: rechterhelft van de wrapper, absoluut,
   object-fit cover. right = (content − wrapper)
   / 2 → negatief, dus tot de wrapperrand.
------------------------------------------ */

:is(.home, .wce-page) .entry-content .wce-band .wp-block-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    right: calc((100% - var(--wrapper)) / 2);

    overflow: hidden;

    margin: 0 !important;
    max-width: none !important;
}

:is(.home, .wce-page) .entry-content .wce-band .wp-block-image img {
    position: absolute;
    inset: 0;

    display: block;

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

    border-radius: 0;

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


/* ------------------------------------------
   BAND — CITAAT (extra t.o.v. PLP)
   Geen hoek op een enkelzijdige rand.
------------------------------------------ */

:is(.home, .wce-page) .entry-content .wce-band blockquote,
:is(.home, .wce-page) .entry-content .wce-band .wp-block-quote {
    margin: 1.5rem 0;
    padding: 0 0 0 1rem;

    border: 0;
    border-left: 3px solid var(--teal-500);
    border-radius: 0;

    background: none;
}

:is(.home, .wce-page) .entry-content .wce-band blockquote p:not(.eyebrow) {
    margin: 0;

    color: var(--blue-900);

    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
}

:is(.home, .wce-page) .entry-content .wce-band blockquote cite {
    display: none;
}


/* ------------------------------------------
   BAND — LIJST → CHECKLIST (extra t.o.v. PLP)
   Teal cirkel met navy vinkje (--blue-900
   op --teal-500 ≈ 6,8:1).
------------------------------------------ */

:is(.home, .wce-page) .entry-content .wce-band ul {
    display: grid;
    gap: 0.75rem;

    margin: 1.5rem 0 0;
    padding: 0;

    list-style: none;
}

:is(.home, .wce-page) .entry-content .wce-band ul li {
    position: relative;

    margin: 0;
    padding-left: 2rem;
}

:is(.home, .wce-page) .entry-content .wce-band ul li::before {
    content: "";

    position: absolute;
    top: 0.1875rem;
    left: 0;

    width: 1.25rem;
    height: 1.25rem;

    border-radius: 50%;

    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312334f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
        center / 0.75rem no-repeat,
        var(--teal-500);
}


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

@media (max-width: 1024px) {

    :is(.home, .wce-page) .entry-content > h2,
    :is(.home, .wce-page) .entry-content .wce-intro h2 {
        font-size: 1.5rem;
    }

    :is(.home, .wce-page) .entry-content > section + :not(section) {
        margin-top: 4rem;
    }

    /* Band (= PLP ≤1024): foto boven over de volle
       wrapperbreedte (16:9), tekst eronder, 3.5rem. */
    :is(.home, .wce-page) .entry-content .wce-band {
        min-height: 0;
        padding: 0 0 3.5rem;
    }

    :is(.home, .wce-page) .entry-content .wce-band,
    :is(.home, .wce-page) .entry-content .wce-band > .wp-block-group__inner-container {
        display: flex;
        flex-direction: column;
    }

    :is(.home, .wce-page) .entry-content .wce-band > :not(figure):not(.wp-block-image):not(.wp-block-group__inner-container),
    :is(.home, .wce-page) .entry-content .wce-band > .wp-block-group__inner-container > :not(figure):not(.wp-block-image) {
        max-width: 62ch;
    }

    :is(.home, .wce-page) .entry-content .wce-band .wp-block-image {
        position: relative;
        order: -1;

        width: var(--wrapper);
        margin: 0 0 3.5rem calc((100% - var(--wrapper)) / 2) !important;

        aspect-ratio: 16 / 9;
    }

    :is(.home, .wce-page) .entry-content .wce-band h2 {
        font-size: 1.5rem;
    }

    :is(.home, .wce-page) .entry-content .wce-band h3,
    :is(.home, .wce-page) .entry-content .wce-band h4 {
        font-size: 1.1875rem;
    }
}


/* ==========================================
   MOBIEL
========================================== */

@media (max-width: 768px) {

    :is(.home, .wce-page) .entry-content > h2,
    :is(.home, .wce-page) .entry-content .wce-intro h2 {
        font-size: 1.375rem;
    }

    :is(.home, .wce-page) .entry-content > section + :not(section) {
        margin-top: 3rem;
    }

    /* Band (= PLP ≤768): foto 4:3, 2.5rem. */
    :is(.home, .wce-page) .entry-content .wce-band {
        padding-bottom: 2.5rem;
    }

    :is(.home, .wce-page) .entry-content .wce-band .wp-block-image {
        margin-bottom: 2.5rem !important;

        aspect-ratio: 4 / 3;
    }

    :is(.home, .wce-page) .entry-content .wce-band h2 {
        font-size: 1.375rem;
    }

    :is(.home, .wce-page) .entry-content .wce-band h3,
    :is(.home, .wce-page) .entry-content .wce-band h4 {
        font-size: 1.125rem;
    }
}