/* =====================================================
   ENKLEANA AESTHETICS — ABOUT PAGE
===================================================== */


/* =====================================================
   HERO — portrait bleeds left, type sits bottom right.
   Mirror of the home hero: the portrait dissolves to the
   right into the studio tone, then into paper under the
   copy.
===================================================== */

.about-hero {
    height: clamp(36rem, calc(100svh - var(--header-h)), 56rem);

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    background:
        linear-gradient(180deg, rgba(251, 249, 245, 0) 80%, var(--c-white) 100%),
        linear-gradient(
            90deg,
            var(--c-tone-wall) 0%,
            var(--c-tone-wall) 38%,
            var(--c-tone-wall-soft) 54%,
            var(--c-white) 70%
        );
}

.about-hero__image {
    height: 100%;
    --zoom: 1.26;
    --focus-y: 70%;

    background: transparent;

    -webkit-mask-image:
        linear-gradient(90deg, #000 0%, #000 68%, rgba(0, 0, 0, 0.55) 85%, transparent 100%),
        linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, #000 0%, #000 68%, rgba(0, 0, 0, 0.55) 85%, transparent 100%),
        linear-gradient(180deg, #000 0%, #000 86%, transparent 100%);
    mask-composite: intersect;
}

.about-hero__image img {
    object-position: 50% 58%;
}

.about-hero__content {
    min-width: 0;
    padding:
        var(--space-l)
        var(--edge)
        clamp(2.5rem, 7vh, 5rem)
        clamp(2rem, 5vw, 6rem);

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.about-hero h1 {
    max-width: 11ch;
    font-size: var(--fs-display);
    line-height: 1;
}

.about-hero__content > p {
    max-width: 26rem;
    margin-top: var(--space-m);

    color: var(--c-muted);

    font-size: var(--fs-lead);
}


/* =====================================================
   DER ANSPRUCH (dark)
===================================================== */

.about-editorial {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;
}

.about-editorial__image {
    grid-column: 1 / span 5;
    aspect-ratio: var(--ratio-portrait);
    --zoom: 1.5;
    --focus-y: 70%;
}

.about-editorial__image img {
    object-position: 50% 62%;
}

.about-editorial__content {
    grid-column: 7 / span 6;
}

.about-editorial h2 {
    font-size: var(--fs-h1);
}

.about-editorial p {
    max-width: 28rem;
    margin-top: var(--space-m);

    color: var(--c-on-dark-muted);
}


/* =====================================================
   STORY — large portrait + text + small detail
===================================================== */

.about-story {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: end;
}

.about-story__large {
    grid-column: 1 / span 6;
    aspect-ratio: var(--ratio-portrait);
    --zoom: 1.3;
    --focus-y: 72%;
}

.about-story__large img {
    object-position: 50% 58%;
}

.about-story__side {
    grid-column: 8 / span 5;
}

.about-story__lead {
    font-family: var(--serif);
    font-size: var(--fs-h3);
    line-height: 1.22;
}

.about-story__text p:not(.about-story__lead) {
    max-width: 26rem;
    margin-top: var(--space-s);

    color: var(--c-muted);
}

.about-story__small {
    width: 58%;
    margin-top: var(--space-l);
    margin-left: auto;
    aspect-ratio: 1 / 1;
}

.about-story__small img {
    object-position: 50% 50%;
    transform-origin: 50% 62%;
}

.about-story__small img,
html.js-enabled .about-story__small img,
html.js-enabled .about-story__small.visible img {
    transform: scale(1.7);
}


/* =====================================================
   LOCATION
===================================================== */

.about-location {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: end;
}

.about-location__content {
    grid-column: 1 / span 6;
}

.about-location__content h2 {
    max-width: 12ch;
}

.about-location__content p {
    max-width: 24rem;
    margin-top: var(--space-s);

    color: var(--c-muted);
}

.about-location__content .text-button {
    margin-top: var(--space-m);
}

.about-location__details {
    grid-column: 8 / span 5;
    border-top: 1px solid var(--c-text);
}

.about-location__details div {
    padding-block: 1.1rem;

    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 1rem;

    border-bottom: 1px solid var(--c-line);
}

.about-location__details dt {
    padding-top: 0.2rem;

    color: var(--c-muted);

    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.about-location__details dd {
    line-height: 1.6;
}


/* =====================================================
   CTA (dark)
===================================================== */

.about-cta {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;
}

.about-cta__content {
    grid-column: 1 / span 6;
}

.about-cta__content h2 {
    font-size: var(--fs-h1);
}

.about-cta__content p {
    max-width: 24rem;
    margin-top: var(--space-m);

    color: var(--c-on-dark-muted);
}

.about-cta__content .button {
    margin-top: var(--space-l);
}

.about-cta__image {
    grid-column: 9 / span 4;
    aspect-ratio: 1 / 1;
}

.about-cta__image img {
    object-position: 50% 50%;
    transform-origin: 50% 62%;
}

.about-cta__image img,
html.js-enabled .about-cta__image img,
html.js-enabled .about-cta__image.visible img {
    transform: scale(1.75);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 900px) {

    .about-hero {
        height: auto;
        grid-template-columns: 1fr;

        background:
            linear-gradient(
                180deg,
                var(--c-tone-wall) 0%,
                var(--c-tone-wall-soft) 38%,
                var(--c-white) 58%
            );
    }

    .about-hero__image {
        height: min(62svh, 36rem);

        -webkit-mask-image:
            linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, 0.5) 88%, transparent 100%);
        mask-image:
            linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, 0.5) 88%, transparent 100%);
    }

    .about-hero__content {
        padding: var(--space-m) var(--edge) 0;
    }

    .about-editorial__image {
        grid-column: 1 / span 6;
    }

    .about-editorial__content {
        grid-column: 7 / -1;
    }

    .about-story__large {
        grid-column: 1 / span 7;
    }

    .about-story__side {
        grid-column: 8 / -1;
    }

    .about-location__content,
    .about-location__details {
        grid-column: 1 / -1;
    }

    .about-location__details {
        margin-top: var(--space-l);
    }
}

@media (max-width: 760px) {

    .about-hero__image {
        height: min(58svh, 32rem);
    }

    .about-editorial__image,
    .about-editorial__content,
    .about-story__large,
    .about-story__side,
    .about-cta__content,
    .about-cta__image {
        grid-column: 1 / -1;
    }

    .about-editorial__image {
        width: 82%;
    }

    .about-editorial__content {
        margin-top: var(--space-l);
    }

    .about-story__large {
        margin-inline: calc(var(--edge) * -1);
    }

    .about-story__side {
        margin-top: var(--space-l);
    }

    .about-story__small {
        width: 56%;
    }

    .about-location__details div {
        grid-template-columns: 7rem minmax(0, 1fr);
    }

    .about-cta__image {
        width: 62%;
        margin-top: var(--space-l);
        margin-left: auto;
    }

    .about-cta__content .button {
        width: 100%;
    }
}