/**
 * Merkverhaal — foto-en-tekstrijen onder de producten op een merkarchief.
 *
 * Eén rijcomponent voor alle drie de standen. De stand bepaalt alleen de kolomindeling,
 * niet de typografie, de padding of de achtergrondwisseling: die volgt de rij-index,
 * zodat het ritme klopt ongeacht wat er per sectie is ingesteld.
 */

:root {
    --awcf-merkverhaal-grijs: #f8f8f8;
    --awcf-merkverhaal-padding: 60px;
    --awcf-merkverhaal-breedte: 1140px;
}

/**
 * De Elementor-archiefwrapper draagt de klasse `product`, en het thema zet in
 * dist/styles/main.css `.featured-products, .product{overflow:hidden}`. Daardoor werd de
 * doorlopende achtergrond hieronder afgeknipt op de 1280px van die wrapper.
 *
 * Alleen die ene wrapper vrijgeven — echte productkaarten en .featured-products houden
 * hun overflow:hidden. Er kan geen horizontale schuifbalk ontstaan: body en .site staan
 * al op overflow-x:hidden, dus de bleed stopt netjes op de schermrand.
 */
.elementor-location-archive.product {
    overflow: visible;
}

/**
 * De ruimte onder het laatste blok was een marge, waar de grijze achtergrond van
 * .site-content (#f8f8f8) doorheen schijnt — dat gaf een losse grijze strook onder het
 * blok. Nu is het padding mét een eigen witte achtergrond die net als de rijen doorloopt
 * tot de schermrand, zodat het blok schoon afsluit.
 */
.awcf-merkverhaal {
    margin: 0;
    padding-bottom: 80px;
    background: #fff;
    box-shadow: 0 0 0 100vmax #fff;
    clip-path: inset(0 -100vmax);
}

/**
 * De shortcode-widget in archiefsjabloon #191774 heeft `margin: 20px 0`, waardoor er boven
 * én onder het blok een grijze strook van .site-content doorschijnt. Die ruimte hoort bij
 * het blok zelf (de padding hierboven), dus de marge kan weg.
 *
 * Elementor schrijft dat als `.elementor-191774 .elementor-element.elementor-element-c78b3da
 * > .elementor-widget-container` — vier klassen. Deze selector telt er vijf en wint dus
 * zonder !important, en raakt via :has() alleen de widget die dit blok bevat.
 */
.elementor .elementor-element.elementor-widget > .elementor-widget-container:has(> .elementor-shortcode > .awcf-merkverhaal) {
    margin-top: 0;
    margin-bottom: 0;
}

/**
 * De achtergrond loopt door tot de paginarand, de inhoud blijft in de container staan —
 * net als op de oude pagina's (buitenste sectie full_width, rijen boxed).
 *
 * Dat gebeurt met een box-shadow die ver buiten de rij doorschildert, horizontaal
 * afgesneden met clip-path. Bewust NIET met `width:100vw` + negatieve marges: 100vw telt
 * de schuifbalk mee en levert op desktop een horizontale schuifbalk van een pixel of 15 op.
 * Deze variant raakt de breedte van het element niet aan, dus dat kan niet gebeuren.
 */
.awcf-merkverhaal__rij {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    /* De ouder .archive .site-content .custom-shop is 1340px breed met zijpadding;
       de inhoud van de rij houden we daarbinnen op een eigen, smallere maat. */
    max-width: var(--awcf-merkverhaal-breedte);
    margin-inline: auto;
    background: #fff;
    box-shadow: 0 0 0 100vmax #fff;
    clip-path: inset(0 -100vmax);
}

/* Wit, grijs, wit, grijs — net als op de oude pagina's. */
.awcf-merkverhaal__rij:nth-child(even) {
    background: var(--awcf-merkverhaal-grijs);
    box-shadow: 0 0 0 100vmax var(--awcf-merkverhaal-grijs);
}

/* Alleen tekst, of alleen een foto: één kolom over de volle rijbreedte. */
.awcf-merkverhaal__rij--tekst,
.awcf-merkverhaal__rij--foto {
    grid-template-columns: 1fr;
}

.awcf-merkverhaal__beeld {
    margin: 0;
    line-height: 0;
}

.awcf-merkverhaal__foto {
    display: block;
    width: 100%;
    height: auto;
}

/* Fotocredits uit de oude teksten staan als bijschrift onder het beeld. */
.awcf-merkverhaal__bijschrift {
    padding: 8px 0 0;
    line-height: 1.4;
    font-size: 0.8em;
    opacity: 0.7;
}

.awcf-merkverhaal__tekst {
    padding: var(--awcf-merkverhaal-padding);
}

.awcf-merkverhaal__rij--tekst .awcf-merkverhaal__tekst {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.awcf-merkverhaal__kop {
    margin: 0 0 0.6em;
    color: #000;
    font-family: Cinzel, serif;
    font-weight: 600;
    letter-spacing: 1.3px;
}

.awcf-merkverhaal__tekst p:last-child {
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    :root {
        --awcf-merkverhaal-padding: 40px;
    }
}

@media (max-width: 767px) {
    .awcf-merkverhaal {
        padding-bottom: 30px;
    }

    .awcf-merkverhaal__rij {
        grid-template-columns: 1fr;
    }

    /* Foto altijd boven de tekst, ook bij stand "rechts" — zelfde volgorde als
       het oude ontwerp met reverse-mobile. */
    .awcf-merkverhaal__beeld {
        order: -1;
    }

    .awcf-merkverhaal__tekst {
        padding: 40px 15px 15px;
    }
}