/**
 * Partnerringe / Wedding Rings (CMS pages 13 de / 14 en, identifier "partnerringe", layout "Page -- Full Width").
 * Loaded only via Magento_Cms/layout/cms_page_view_id_partnerringe.xml, after the shared kz-brand.css.
 *
 * 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):
 * kz-pr + kz-pr-split (photo + text rows: opener, kz-pr-closing) | kz-pr-intro | kz-pr-promises | kz-pr-rings |
 * kz-pr-band (two-column rows: kz-pr-memoire = text on #111 + ring photo on white, kz-pr-fair = text),
 * column classes kz-pr-photo (column background image = photo), kz-pr-memoire-photo (Image element on white),
 * text classes kz-pr-kicker, kz-pr-lead, kz-pr-visit.
 * Light and calm: ivory and #111 (row background colours set in Page Builder), gold for kicker lines and numbers.
 * Phones: the text slides over the photo (sticky), like the pre-owned and service pages.
 */

.kz-pr {
    --kz-muted: #595959; /* secondary text on white and ivory, >= 6.5:1 */
    --kz-gold: #b39b5f;
    line-height: 1.7;

    & p {
        margin: 0 0 1rem;
        color: var(--kz-muted);
    }

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

    & h2 {
        margin: 0 0 1rem;
        font-size: clamp(1.75rem, 3vw, 2.5rem);
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-wrap: balance;
    }

    & h3 {
        margin: 0 0 0.5rem;
        font-size: 0.8125rem;
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }
}

/* Small uppercase line above a heading */
.kz-pr .kz-pr-kicker p {
    margin-bottom: 1rem;
    color: #111;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

[data-content-type="row"][data-appearance="contained"]:has(> .kz-pr) {
    margin-block: 0;
    padding-block: 0 4rem;
}

/* ---- Photo + text rows (opener, closing): photo first on phones ---- */
.kz-pr-split {
    & .kz-pr-photo {
        order: -1;
        aspect-ratio: 4 / 5;
        background-size: cover;
    }

    & .pagebuilder-column:not(.kz-pr-photo) {
        padding: 2.5rem var(--kz-edge) 3rem;
    }

    & .kz-pr-kicker::before {
        content: "";
        display: block;
        width: 3rem;
        height: 1px;
        margin-bottom: 1rem;
        background: var(--kz-gold);
    }

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

.kz-pr-closing .kz-pr-photo {
    aspect-ratio: 1;
}

/* opener on phones: the hands photo (portrait) needs more height for a good crop */
@media (max-width: 47.999rem) {
    .kz-pr-split:not(.kz-pr-closing) .kz-pr-photo {
        aspect-ratio: 3 / 4;
    }
}

/* Phones: the photo stays at the top of the screen while the ivory text block slides up over it
   (position: sticky, no script; off for reduced motion). The header is not sticky on phones (kz-header.css). */
@media (max-width: 47.999rem) and (prefers-reduced-motion: no-preference) {
    .kz-pr-split {
        & .kz-pr-photo {
            position: sticky;
            top: 0;
            z-index: 0;
        }

        & .pagebuilder-column:not(.kz-pr-photo) {
            position: relative;
            z-index: 1;
            background-color: #f6f3ed; /* the row's ivory, so the text block covers the photo */
        }
    }
}

/* ---- Intro: lead sentence + text ---- */
[data-content-type="row"][data-appearance="contained"]:has(> .kz-pr-intro) {
    padding-top: 4rem;
}

.kz-pr .kz-pr-lead p {
    color: #111;
    font-size: 1.25rem;
    line-height: 1.5;
}

.kz-pr-intro .pagebuilder-column-line {
    gap: 1.25rem;
}

/* ---- Promises: numbered 01-03 on a thin line ---- */
.kz-pr-promises {
    counter-reset: kz-pr-step;

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

    & .pagebuilder-column {
        padding-top: 1rem;
        border-top: 1px solid #e5e5e5;
        counter-increment: kz-pr-step;

        &::before {
            content: counter(kz-pr-step, decimal-leading-zero);
            margin-bottom: 0.5rem;
            color: var(--kz-gold);
            font-size: 0.75rem;
            letter-spacing: 0.15em;
        }
    }
}

/* ---- Ring pairs: heading centred, photos edge to edge without gaps, two per row on phones,
   no space below (the white photos lead straight into the next section) ---- */
.kz-pr-rings {
    padding-bottom: 0;
    text-align: center;

    & > h2 {
        margin-bottom: 2rem;
    }

    & .pagebuilder-column {
        flex-basis: 50%;
    }

    /* 4 ring photos: on very wide screens keep them at a calm size, centred */
    & .pagebuilder-column-group {
        max-width: 90rem;
        margin-inline: auto;
    }

    & figure {
        margin: 0;
    }

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

/* ---- Memoire (dark band) and Fairtrade: kicker + heading left, text right ---- */
.kz-pr-band .pagebuilder-column-line {
    gap: 0.25rem;
}

/* Memoire: text on #111, the white product photo in its own white column (phones: photo first, edge to edge) */
.kz-pr-memoire {
    color: #fff;

    & p {
        color: #c9c9c9;
    }

    & .pagebuilder-column-line {
        gap: 0;
    }

    & .pagebuilder-column:not(.kz-pr-memoire-photo) {
        padding: 3rem var(--kz-edge);
    }

    /* the photo sits on the lower edge of its white column (column alignment "bottom" in Page Builder) */
    & .kz-pr-memoire-photo {
        order: -1;
        align-items: center;
        padding: 2rem var(--kz-gutter) 0;
    }

    & figure {
        width: min(100%, 40rem);
        margin: 0;
    }

    & img {
        width: 100%;
    }
}

.kz-pr-memoire,
.kz-pr-fair {
    & .kz-pr-kicker p {
        color: var(--kz-gold);
    }
}

[data-content-type="row"][data-appearance="contained"]:has(> .kz-pr-fair) {
    padding-top: 4rem;
}

/* ---- Appointment: list with short gold dashes ---- */
.kz-pr-visit {
    margin-top: 1.5rem;

    & ul {
        display: grid;
        gap: 0.6rem;
        margin: 0;
        padding: 0;
        list-style: none;
        color: var(--kz-muted);
    }

    & li {
        display: grid;
        grid-template-columns: 1.25rem minmax(0, 1fr);

        &::before {
            content: "";
            width: 0.6rem;
            height: 1px;
            margin-top: 0.85em;
            background: var(--kz-gold);
        }
    }
}

@media (min-width: 48rem) {
    [data-content-type="row"][data-appearance="contained"]:has(> .kz-pr) {
        padding-bottom: 6rem;
    }

    [data-content-type="row"][data-appearance="contained"]:has(> .kz-pr-intro) {
        padding-top: 6rem;
    }

    /* Fairtrade: less height than the other sections; the text starts level with the heading,
       i.e. below the kicker line (0.75rem text, line height 1.7, 1rem margin) */
    [data-content-type="row"][data-appearance="contained"]:has(> .kz-pr-fair) {
        padding-block: 4rem;
    }

    .kz-pr-fair .pagebuilder-column:last-child {
        padding-top: calc(0.75rem * 1.7 + 1rem);
    }

    .kz-pr .kz-pr-lead p {
        font-size: 1.75rem;
        line-height: 1.35;
    }

    .kz-pr-intro .pagebuilder-column-line,
    .kz-pr-band .pagebuilder-column-line {
        gap: 6rem;
    }

    .kz-pr-promises .pagebuilder-column-line {
        gap: 3rem;
    }

    .kz-pr-rings {
        & .pagebuilder-column {
            flex-basis: auto;
        }
    }

    .kz-pr-memoire {
        & .pagebuilder-column-line {
            gap: 0;
        }

        & .pagebuilder-column:not(.kz-pr-memoire-photo) {
            padding: 6rem 5rem 6rem var(--kz-edge);

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

        & .kz-pr-memoire-photo {
            order: 0;
            padding: 3rem 3rem 0;
        }
    }

    /* photo and text side by side, text column at the page edge */
    .kz-pr-split {
        & .kz-pr-photo {
            order: 0;
            aspect-ratio: auto;
            min-height: 40rem;
        }

        &:not(.kz-pr-closing) .kz-pr-photo {
            min-height: min(66vw, 52rem); /* opener taller for the portrait photo: at most 832px */
        }

        & .pagebuilder-column:not(.kz-pr-photo) {
            padding: 4rem 5rem 4rem var(--kz-edge);

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

    .kz-pr-closing .pagebuilder-column:not(.kz-pr-photo) {
        padding: 4rem var(--kz-edge) 4rem 5rem;
    }
}