/**
 * Montblanc brand page (category 51 "montblanc", display mode "Static block only",
 * CMS blocks "montblanc-markenseite-de" / "montblanc-markenseite-en"). Loaded only via Magento_Catalog/layout/catalog_category_view_id_51.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-mb + kz-mb-intro | kz-mb-range | kz-mb-craft | kz-mb-visit, text class kz-mb-item (collection name + one line).
 * Classic and calm: black and white, light large headings; all four collections are shown as equal tiles.
 */

.kz-mb {
    --kz-photo: #f2f2f2; /* background of the product photos */
    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.75rem, 3.5vw, 2.75rem);
        font-weight: 300;
        line-height: 1.15;
        text-wrap: balance;
    }

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

/* ---- Intro: headline left, text right (desktop) ---- */
[data-content-type="row"][data-appearance="contained"]:has(> .kz-mb-intro) {
    margin-block: 0 3rem;
}

.kz-mb-intro {
    & h2 {
        margin: 0;
        font-size: clamp(2.5rem, 5vw, 4.5rem);
        line-height: 1;
    }

    & .pagebuilder-column-line {
        gap: 1rem;
    }

    & p {
        color: #525252;
        font-size: clamp(1rem, 1.3vw, 1.0625rem);
    }
}

/* ---- Range: four equal collections (writing instruments, leather goods, cufflinks, watches) ---- */
[data-content-type="row"][data-appearance="contained"]:has(> .kz-mb-range) {
    margin-block: 0 clamp(3.5rem, 6vw, 5rem);
}

.kz-mb-range {
    & .pagebuilder-column-line {
        gap: 2rem 1rem;
    }

    & figure {
        margin: 0;
    }

    & img {
        aspect-ratio: 1;
        object-fit: cover;
        background: var(--kz-photo);
    }
}

.kz-mb-item {
    margin-top: 0.75rem;

    & p {
        margin: 0;
        color: #525252;
        font-size: 0.9375rem;
        line-height: 1.5;
    }

    & p:first-child {
        margin-bottom: 0.25rem;
        color: var(--color-fg, #111);
        font-size: 1.0625rem;
        font-weight: 600;
    }
}

/* ---- Craft: dark text band (heading left, text right) ---- */
.kz-mb-craft {
    padding: clamp(3.5rem, 6vw, 6rem) var(--kz-edge);
    color: var(--kz-light);

    & .pagebuilder-column-line {
        gap: 1.5rem;
    }

    & h2 {
        margin: 0;
    }

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

/* ---- Visit: light grey band (row background colour set in Page Builder), theme buttons ---- */
.kz-mb-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: collections 2x2 */
@media (max-width: 47.999rem) {
    .kz-mb-range .pagebuilder-column {
        flex-basis: calc(50% - 0.5rem);
    }
}

@media (min-width: 48rem) {
    [data-content-type="row"][data-appearance="contained"]:has(> .kz-mb-intro) {
        margin-block: 1rem 3.5rem;
    }

    .kz-mb-intro .pagebuilder-column-line {
        gap: 6rem;
    }

    .kz-mb-range .pagebuilder-column-line {
        gap: 2rem;
    }

    .kz-mb-craft .pagebuilder-column-line {
        gap: 5rem;
    }
}