/* Section: about cards — text column plus a card stack the scroll deals. */

.about-section {
    position: relative;
    z-index: 0;
    isolation: isolate;
    height: auto;
    padding: 4.125rem 0 15rem;
    background: var(--color-light-purple);
}

/* Clip, not hidden: hidden makes the section a scroll container of its own,
   and the sticky copy and cards would hold against it, which never scrolls,
   instead of the page. The element in the selector outranks home.css's
   `.home-page section`, which hides overflow on every home section. */
section.about-section {
    overflow: hidden;
    overflow: clip;
}

.about-section__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 519px) minmax(420px, 550px);
    align-items: center;
    justify-content: space-between;
    gap: clamp(4rem, 14vw, 15rem);
    min-height: min(100vh, 900px);
}

.about-section > .container {
    position: relative;
    z-index: 1;
}

.about-section__text {
    color: var(--color-dark-purple);
}

.about-section__heading {
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 4vw, var(--text-h2));
    font-weight: var(--fw-bold);
    line-height: var(--lh-h2);
    letter-spacing: 0;
    margin: 0 0 1.5rem;
}

.about-section__desc {
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-title6);
    line-height: var(--lh-title6);
    letter-spacing: 0;
    margin: 0;
    max-width: 519px;
}

.about-section__desc strong {
    color: var(--color-dark-purple);
    font-weight: var(--fw-bold);
}

.about-section__cards {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: min(550px, 100%);
    height: auto;
    margin: 0;
    isolation: isolate;
}

.about-card {
    position: relative;
    width: min(496px, 100%);
    border-radius: 32px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow: hidden;
    padding: 3rem;
    transform-origin: 50% 50%;
    transition: box-shadow 180ms ease;
}

.about-card:hover {
    box-shadow: 0 24px 50px rgba(45, 44, 108, 0.14);
}

.about-card--share:hover {
    box-shadow: 0 24px 50px rgba(45, 44, 108, 0.14);
}

.about-card--craft:hover {
    box-shadow: 0 24px 50px rgba(45, 44, 108, 0.14);
}

.about-card--live:hover {
    box-shadow: 0 24px 50px rgba(45, 44, 108, 0.14);
}

.about-card--share {
    background: var(--color-white);
}

.about-card--craft {
    background: var(--color-accent-01);
}

.about-card--live {
    background: var(--color-primary);
}

.about-card__img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 0;
    cursor: inherit;
    user-select: none;
    -webkit-user-drag: none;
}

.about-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8125rem;
    width: 100%;
    padding: 0;
    text-align: center;
}

.about-card__title {
    color: var(--color-dark-purple);
    font-family: var(--font-display);
    font-size: var(--text-title4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-title4);
    letter-spacing: 0;
    margin: 0;
}

.about-card__title em {
    font-style: italic;
}

.about-card__desc {
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: var(--text-copy);
    line-height: 1.3333;
    letter-spacing: 0;
    margin: 0;
}

.about-card__desc a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

.about-card--live .about-card__title,
.about-card--live .about-card__desc {
    color: var(--color-white);
}

.about-section__pattern {
    position: absolute;
    display: block;
    z-index: 0;
    right: 0;
    bottom: -13rem;
    width: min(522px, 40vw);
    height: auto;
    pointer-events: none;
    opacity: 0.55;
    object-fit: contain;
}

@media (max-width: 1100px) {
    .about-section {
        padding-bottom: 7rem;
    }

    .about-section__inner {
        grid-template-columns: 1fr;
        gap: 3rem;
        min-height: 0;
    }

    .about-section__cards {
        justify-self: center;
    }
}

/* The stack is a two-column pose: it reads because the copy holds still beside
   the cards while they climb past it. Once the layout stacks there is nothing
   beside them to hold, so the cards stay a plain list. */
@media (max-width: 1024px) {
    .about-section {
        padding-top: 3rem;
    }

    .about-section__cards {
        gap: 1.25rem;
    }

    .about-card {
        width: 100%;
    }

    .about-section__pattern {
        display: none;
    }
}

@media (max-width: 640px) {
    .about-card {
        padding: 1.5rem;
    }
}

/* Grid migration: the section sits on the shared 12-column track. */
.about-section.is-grid-migrated > .container.grid > .about-section__inner {
    grid-column: 1 / -1;
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 519px) minmax(0, 548px);
    justify-content: center;
    gap: var(--grid-gap);
    column-gap: clamp(6rem, 16.7vw, 15rem);
    min-height: min(100vh, 900px);
}

.about-section.is-grid-migrated > .container.grid > .about-section__inner > .about-section__text {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: 519px;
}

.about-section.is-grid-migrated .about-section__heading {
    font-size: clamp(2.5rem, 4vw, var(--text-h2));
    margin: 0 0 1.5rem;
    overflow-wrap: break-word;
}

.about-section.is-grid-migrated .about-section__desc {
    max-width: 519px;
}

.about-section.is-grid-migrated > .container.grid > .about-section__inner > .about-section__cards {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    min-width: 0;
    width: min(100%, 548px);
    max-width: 548px;
}

.about-section.is-grid-migrated .about-card {
    width: min(100%, 496px);
    padding: 3rem;
}

/* ── Desktop: the copy holds while the scroll deals the cards ─────────
   After "Fancy a taste?" on to-top.ch. The copy and every card are
   sticky. Each card stops a step lower than the one before, so the next
   one up covers all but a strip of it, and the last, with no room left
   in the column to stop in, rides on up over the pile and carries it
   out. Native sticky moves nothing the scroll does not, so it keeps
   pace with Lenis exactly. */
@media (min-width: 1025px) {
    .about-section {
        /* Clears the floating header's 94px. */
        --about-stack-top: 7rem;
        /* The strip of each card left showing under the next. */
        --about-stack-step: 4rem;
    }

    .about-section.is-grid-migrated > .container.grid > .about-section__inner {
        align-items: start;
    }

    .about-section.is-grid-migrated > .container.grid > .about-section__inner > .about-section__text {
        position: sticky;
        top: var(--about-stack-top);
    }

    .about-section.is-grid-migrated > .container.grid > .about-section__inner > .about-section__cards {
        align-self: start;
        align-items: center;
    }

    /* The index comes from the template, so the steps follow however many
       cards the section is given. */
    .about-section .about-card {
        position: sticky;
        top: calc(var(--about-stack-top) + var(--about-card-index, 0) * var(--about-stack-step));
        transform: rotate(var(--about-card-tilt, 0deg));
    }

    .about-section .about-card:nth-child(odd) {
        --about-card-tilt: 1.4deg;
    }

    .about-section .about-card:nth-child(even) {
        --about-card-tilt: -1.7deg;
    }

    /* Each card is only read whole in the moment it is the newest on the
       pile, before the next one climbs over it, so all of it has to fit
       below its step. The second card stops lowest of those that get
       covered: the top, one step, the card and a margin come to 26rem
       more than its art. Laptop screens run short of that, and taking it
       off the art alone keeps the copy on its full measure. The floor
       keeps the art from vanishing in a squat window. Height has to
       follow, or the markup's height="400" holds the art at 400px and
       the cover fit crops it to a strip. */
    .about-section .about-card__img {
        width: clamp(10rem, 100svh - 26rem, 100%);
        height: auto;
    }
}

@media (max-width: 1024px) {
    .about-section.is-grid-migrated > .container.grid > .about-section__inner > .about-section__text,
    .about-section.is-grid-migrated > .container.grid > .about-section__inner > .about-section__cards {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .about-section.is-grid-migrated > .container.grid > .about-section__inner {
        --about-stack-gap: clamp(2.5rem, 6vw, 4rem);

        grid-template-columns: 1fr;
        gap: var(--about-stack-gap);
    }

    .about-section.is-grid-migrated > .container.grid > .about-section__inner > .about-section__cards {
        justify-self: center;
    }
}

@media (max-width: 1024px) {
    .about-section.is-grid-migrated > .container.grid > .about-section__inner > .about-section__cards {
        display: flex;
        flex-direction: column;
        gap: clamp(1.25rem, 3vw, 2rem);
        max-width: 496px;
        min-height: 0;
    }

    .about-section.is-grid-migrated > .container.grid > .about-section__inner .about-card {
        width: 100%;
    }
}

/* A 48px inset leaves a 350px phone card barely 250px of content. */
@media (max-width: 640px) {
    .about-section.is-grid-migrated > .container.grid > .about-section__inner .about-card {
        padding: 1.5rem;
    }
}

/* ── Phones and tablets: the column becomes a slider ─────────────────
   The listed column costs a screen of scrolling per card to read one
   sentence each. On a snapping track the three cost one screen between
   them, and the autoplay in initAboutCardsSliders is what says there are
   two more behind the first. The poses hang off the attribute rather than
   the width because that script sets it: with it off, the column above is
   still the layout, and it still reads. */
@media (max-width: 1024px) {
    .about-section .about-section__cards[data-about-slider="on"],
    .about-section.is-grid-migrated > .container.grid > .about-section__inner > .about-section__cards[data-about-slider="on"] {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        /* home.css centres this row for the legacy layout. Centred items in a
           scroller spill half their overflow off the start edge, where no
           scroll position can reach it — the first card would never show. */
        justify-content: flex-start;
        gap: clamp(0.75rem, 3vw, 1.25rem);
        width: 100%;
        max-width: 496px;
        min-height: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        /* Sideways is the track's; up and down still belongs to the page. */
        touch-action: pan-x pan-y;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: default;
    }

    .about-section .about-section__cards[data-about-slider="on"]::-webkit-scrollbar {
        display: none;
    }

    /* Stacked, a card takes the width it is given; on the track that width is
       the snap unit, so it has to stop flexing. */
    .about-section .about-section__cards[data-about-slider="on"] > .about-card,
    .about-section.is-grid-migrated > .container.grid > .about-section__inner > .about-section__cards[data-about-slider="on"] > .about-card {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
}

/* The dots page a track that only exists under the breakpoint, and only
   once the script has one running. */
.about-section__dots {
    display: none;
}

.about-section__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-dark-purple);
    opacity: 0.28;
    cursor: pointer;
    transition:
        opacity 200ms ease,
        transform 200ms ease;
}

.about-section__dot.is-active {
    opacity: 1;
    transform: scale(1.4);
}

@media (max-width: 1024px) {
    .about-section[data-about-slider="on"] .about-section__dots {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
    }

    .about-section[data-about-slider="on"].is-grid-migrated > .container.grid > .about-section__inner > .about-section__dots {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: center;
        /* The inner's row gap is drawn for the space between the copy and the
           cards. The dots belong to the track they page, so most of it is
           taken back. */
        margin-top: calc(1.25rem - var(--about-stack-gap, 3rem));
    }
}