/*
 * The studio tour on the Life at CAN page.
 *
 * Linked only from life-at-can.html. The chapters inside it are written by the
 * content panel (Renderer::lifeTour()); the closing invitation is part of the
 * page itself. After editing this file, bump the ?v on its link in
 * life-at-can.html, or returning visitors keep the old copy.
 *
 * The photo widths below are repeated in the sizes attributes written by
 * Renderer::lifePhoto(), so the browser picks the right file. Change the two
 * together.
 *
 * Colours come from the site's theme variables, so the tour follows the
 * light / dark switch like the rest of the page.
 *
 * The words of each chapter stay beside its photos while they scroll past.
 * That is done by a ScrollTrigger pin in the page, not position: sticky,
 * because the page scrolls through ScrollSmoother, which sticky cannot see.
 */

@font-face {
    font-family: "CAN Tartuffo Italic";
    src: url("../fonts/Tartuffo_Trial-LightItalic.otf");
    font-style: italic;
    font-weight: 300;
    font-display: swap;
}

.life-tour {
    padding: 20px 0 140px;
}

/* ------------------------------------------------------------ a chapter */

.life-chapter {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 40px clamp(40px, 5vw, 110px);
    align-items: start;
    padding: 110px 0;
    border-top: 1px solid var(--border);
}

.life-chapter:first-child {
    border-top: 0;
    padding-top: 50px;
}

.life-chapter__number {
    display: block;
    font-family: var(--font_thunder);
    font-weight: 600;
    font-size: clamp(120px, 11vw, 210px);
    line-height: .78;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--action);
}

.life-chapter__title {
    font-family: var(--font_sequelsansromanbody);
    font-weight: 400;
    font-size: clamp(42px, 4.2vw, 76px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--primary);
    margin: 26px 0 20px;
}

.life-chapter__title em,
.life-tour__cta-title em {
    font-family: "CAN Tartuffo Italic", var(--font_tartuffotrial), serif;
    font-style: italic;
    font-weight: 300;
}

.life-chapter__text {
    font-family: var(--font_dmsans);
    font-size: 19px;
    line-height: 1.6;
    color: var(--secondary);
    max-width: 440px;
    margin: 0 0 22px;
}

.life-chapter__count {
    font-family: var(--font_dmsans);
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--secondary);
    margin: 0;
}

/* ------------------------------------------------------------ its photos */

.life-chapter__photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.life-photo {
    position: relative;
    margin: 0;
    border-radius: 20px;
    overflow: hidden;
    background: var(--border);
}

.life-photo--full {
    grid-column: 1 / -1;
}

.life-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.life-photo--full img {
    aspect-ratio: 16 / 9;
}

.life-photo--upright img {
    aspect-ratio: 3 / 4;
}

.life-photo:hover img {
    transform: scale(1.04);
}

.life-photo figcaption {
    position: absolute;
    left: 16px;
    bottom: 14px;
    max-width: calc(100% - 32px);
    font-family: var(--font_dmsans);
    font-size: 14px;
    line-height: 1.3;
    color: #fff;
    background: rgba(17, 17, 17, .62);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding: 6px 12px;
    border-radius: 999px;
    pointer-events: none;
}

/* ------------------------------------------------------------ the invitation */

.life-tour__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
    margin-top: 30px;
    padding: clamp(32px, 5vw, 76px);
    border-radius: 30px;
    background: var(--action);
    color: #111;
}

.life-tour__cta-title {
    font-family: var(--font_sequelsansromanbody);
    font-weight: 400;
    font-size: clamp(40px, 5vw, 88px);
    line-height: 1;
    letter-spacing: -0.03em;
    color: #111;
    margin: 0;
}

.life-tour__cta-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.life-tour__btn {
    display: inline-block;
    font-family: var(--font_dmsans);
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    padding: 18px 28px;
    border-radius: 999px;
    border: 1.5px solid #111;
    background: #111;
    color: #fff;
    transition: background .25s, color .25s;
}

.life-tour__btn:hover {
    background: transparent;
    color: #111;
}

.life-tour__btn--ghost {
    background: transparent;
    color: #111;
}

.life-tour__btn--ghost:hover {
    background: #111;
    color: #fff;
}

/* ------------------------------------------------------------ smaller screens */

@media only screen and (max-width: 1199px) {
    .life-chapter {
        padding: 80px 0;
    }
}

/* The words go above the photos instead of beside them, and stop being pinned. */
@media only screen and (max-width: 991px) {
    .life-chapter {
        grid-template-columns: 1fr;
        padding: 64px 0;
    }

    .life-chapter__title {
        margin: 18px 0 14px;
    }
}

@media only screen and (max-width: 767px) {
    .life-tour {
        padding-bottom: 90px;
    }

    .life-chapter {
        gap: 28px;
        padding: 52px 0;
    }

    .life-chapter__text {
        font-size: 17px;
    }

    /* One photo to a row: two side by side are too small to read on a phone. */
    .life-chapter__photos {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .life-photo {
        border-radius: 14px;
    }

    .life-photo--half img {
        aspect-ratio: 4 / 3;
    }

    .life-tour__cta {
        border-radius: 22px;
    }

    .life-tour__btn {
        padding: 16px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .life-photo img {
        transition: none;
    }

    .life-photo:hover img {
        transform: none;
    }
}