/**
 * Diamonds by Michael Kruzik brand page (category 34 "diamonds-by-michael-kruzik", display mode "Static block only",
 * CMS blocks "dbmk-markenseite-de" / "dbmk-markenseite-en"). Loaded only via Magento_Catalog/layout/catalog_category_view_id_34.xml.
 *
 * Content is native Page Builder. Styling hooks are the row CSS classes set in Page Builder
 * (full-bleed rows: on the row, contained rows: on its inner element - where Page Builder stores them):
 * kz-dbmk + kz-dbmk-hero | kz-dbmk-intro | kz-dbmk-lookbook | kz-dbmk-craft | kz-dbmk-statement | kz-dbmk-visit,
 * text class kz-dbmk-label, image class kz-dbmk-dark. Parallax = native Page Builder row background (hero, statement).
 */

.kz-dbmk {
    --kz-gold: #b39b5f;
    line-height: 1.7;

    & p {
        margin: 0 0 1rem;
    }

    & p:last-child {
        margin-bottom: 0;
    }

    & h2 {
        margin: 0 0 1.25rem;
        font-size: clamp(1.5rem, 3vw, 2.25rem);
        font-weight: 300;
        line-height: 1.15;
        text-wrap: balance;
    }

    & img {
        display: block;
        width: 100%;
    }
}

[data-content-type="row"][data-appearance="contained"]:has(> .kz-dbmk) {
    margin-block: 2rem 3.5rem;
}

/* ---- Hero + statement: text on the (parallax) background image, gradient for contrast ---- */
.kz-dbmk-hero,
.kz-dbmk-statement {
    position: relative;
    justify-content: flex-end;
    padding: 3rem var(--kz-edge);
    color: var(--kz-light);

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgb(0 0 0 / 0.75) 0%, rgb(0 0 0 / 0.1) 75%);
    }

    & > [data-content-type] {
        position: relative;
        max-width: 30rem;
    }
}

.kz-dbmk-hero {
    min-height: clamp(26rem, 52vw, 40rem);

    & > [data-content-type] {
        max-width: 38rem;
    }

    & h2 {
        margin: 0;
        font-size: clamp(2.25rem, 5vw, 4rem);
        overflow-wrap: normal; /* never break inside a word */
    }
}

.kz-dbmk-statement {
    min-height: 34rem;

    &::before {
        background: linear-gradient(0deg, rgb(0 0 0 / 0.9) 0%, rgb(0 0 0 / 0.75) 45%, rgb(0 0 0 / 0.1) 80%);
    }

    & p:first-child {
        font-size: clamp(1.5rem, 3vw, 2.25rem);
        font-weight: 300;
        line-height: 1.25;
        text-wrap: balance;
    }

    & p + p {
        color: rgb(244 241 234 / 0.85);
    }
}

/* ---- Intro: text on the page grid, image runs to the right edge ---- */
.kz-dbmk-intro {
    & .pagebuilder-column:first-child {
        padding: clamp(3rem, 6vw, 5rem) var(--kz-edge);
        color: #525252;
    }

    & p:first-child {
        color: var(--color-fg, #111);
        font-size: clamp(1.25rem, 2.2vw, 1.75rem);
        font-weight: 300;
        line-height: 1.4;
    }
}

/* ---- Lookbook: large product photo + 2x2, captions only type and metal ---- */
.kz-dbmk-lookbook {
    & .pagebuilder-column-line,
    & .pagebuilder-column {
        gap: 1.25rem;
    }

    & figure {
        display: grid;
        gap: 0.75rem;
        margin: 0;
    }

    & img {
        aspect-ratio: 1;
        object-fit: contain;
    }

    & figcaption {
        color: #525252;
        font-size: 0.6875rem;
        letter-spacing: 0.15em;
        text-align: center;
        text-transform: uppercase;
    }

    & .kz-dbmk-dark img {
        object-fit: cover;
        object-position: 50% 88%;
        background: #000;
    }
}

/* ---- Craft: image + dark text panel ---- */
.kz-dbmk-craft {
    color: var(--kz-light);

    & img {
        min-height: 22rem;
        object-fit: cover;
        object-position: 35% 60%;
    }

    & .pagebuilder-column:last-child {
        padding: clamp(2.5rem, 6vw, 5rem) var(--kz-edge);

        & > * {
            max-width: 32rem;
        }
    }

    & h2 {
        font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    }

    & p {
        color: rgb(244 241 234 / 0.85);
    }
}

.kz-dbmk-label p {
    margin-bottom: 1.25rem;
    color: var(--kz-gold);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* ---- Visit: light grey band (row background colour set in Page Builder), theme buttons ---- */
.kz-dbmk-visit {
    padding: clamp(3rem, 6vw, 5rem) var(--kz-edge);

    & > [data-content-type] {
        max-width: 40rem;
    }

    & p {
        color: #525252;
    }

    & [data-content-type="buttons"] {
        margin-top: 1.5rem;
    }
}

/* Phones: large product photo edge to edge */
@media (max-width: 47.999rem) {
    .kz-dbmk-lookbook .pagebuilder-column:first-child figure {
        margin-inline: calc(-1 * var(--kz-gutter));
    }

    .kz-dbmk-lookbook .pagebuilder-column:not(:first-child) {
        flex-basis: calc(50% - 0.625rem); /* 2x2 instead of stacking */
    }
}

@media (min-width: 48rem) {
    .kz-dbmk-hero {
        min-height: clamp(26rem, 48vw, 46rem);
        padding-block: 4rem;

        &::before {
            background: linear-gradient(20deg, rgb(0 0 0 / 0.75) 0%, rgb(0 0 0 / 0.3) 40%, rgb(0 0 0 / 0) 65%);
        }
    }

    .kz-dbmk-statement {
        justify-content: center;
        align-items: flex-end;
        min-height: clamp(22rem, 45vw, 34rem);

        &::before {
            background: linear-gradient(270deg, rgb(0 0 0 / 0.7) 0%, rgb(0 0 0 / 0.2) 55%, rgb(0 0 0 / 0) 80%);
        }

        & > [data-content-type] {
            max-width: 28rem;
        }
    }

    .kz-dbmk-intro .pagebuilder-column:first-child {
        padding-right: 4rem;
    }

    .kz-dbmk-craft .pagebuilder-column:last-child {
        padding-left: 4rem;
    }

    .kz-dbmk-intro figure,
    .kz-dbmk-craft figure,
    .kz-dbmk-intro img,
    .kz-dbmk-craft img {
        height: 100%;
    }

    .kz-dbmk-intro img {
        object-fit: cover;
    }

    .kz-dbmk-craft img {
        min-height: 34rem;
        max-height: 46rem; /* portrait photo would make the band too tall on wide screens */
    }

    .kz-dbmk-lookbook {
        & .pagebuilder-column-line,
        & .pagebuilder-column {
            gap: 1.5rem;
        }

        & .pagebuilder-column:first-child figure {
            flex: 1;
            grid-template-rows: 1fr auto;
        }

        & .pagebuilder-column:first-child img {
            height: 100%;
            aspect-ratio: auto;
        }
    }
}