/*
 * Contact collage ("Start with the question") — shared by Home and Academy home.
 */

/* ── Contact (collage) ──────────────────────────────────────────────────── */
.contact { padding: 0 0 300px; }

.contact__stage {
    position: relative;
    height:   944px;
}

.contact__content {
    position:       absolute;
    z-index:        3; /* text above the photos */
    top:            156px;
    left:           calc((100% - 64px) / 5 + 16px);
    width:          calc((100% - 64px) / 5 * 3 + 32px);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            24px;
    text-align:     center;
}
.contact__tag { margin: 0 0 -8px; }
.contact__title {
    margin:      0;
    font-size:   clamp(88px, 9.444vw, 136px);
    letter-spacing: -0.04em;
}
.contact__text { max-width: 389px; margin: 0; }
.contact__actions {
    display:     flex;
    align-items: flex-start;
    gap:         24px;
}

/* Photos: columns 1–5 (slot 2 top-left, 5 top, 3 right, 1 lower-left, 4 bottom) */
.contact__figure {
    position: absolute;
    z-index:  1;
    width:    calc((100% - 64px) / 5);
    height:   320px;
    margin:   0;
    overflow: hidden;
    pointer-events: none;
}
.contact__img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}
.contact__figure--1 { left: calc(((100% - 64px) / 5 + 16px) * 1);        top: 534px; }
.contact__figure--2 { left: 0;                                          top: 0; }
.contact__figure--3 { left: calc(((100% - 64px) / 5 + 16px) * 4);        top: 272px; }
.contact__figure--4 { left: calc(((100% - 64px) / 5 + 16px) * 2);        top: 764px; height: 180px; }
.contact__figure--5 { left: calc(((100% - 64px) / 5 + 16px) * 3);        top: 0;     height: 180px; }

/* Desktop: the text block is centred vertically in the stage */
@media (min-width: 1024px) {
    .contact__content { top: 50%; translate: 0 -50%; }
}

@media (max-width: 1023px) {
    .contact { padding: 0 0 80px; }
    .contact__stage { height: 600px; }

    .contact__content {
        top:   127px;
        left:  0;
        width: 100%;
    }
    .contact__title { font-size: 64px; }
    .contact__text  { max-width: none; }
    .contact__actions {
        flex-direction: column;
        align-items:    stretch;
        gap:            16px;
        width:          100%;
    }
    .contact__actions .btn--link { justify-content: center; }

    .contact__figure--1,
    .contact__figure--2,
    .contact__figure--3,
    .contact__figure--4,
    .contact__figure--5 { left: auto; right: auto; width: 120px; height: 150px; }

    .contact__figure--2 { left: 0;                                        top: 0; }
    .contact__figure--5 { right: calc(var(--container-padding) * -1 + 16px); top: 28px; }
    .contact__figure--3 { left: -1px;  top: 453px; width: 121px; height: 86px; }
    .contact__figure--1 { right: calc(var(--container-padding) * -1 + 16px); top: 501px; width: 141px; height: 99px; }
    .contact__figure--4 { display: none; }
}

@media (max-width: 767px) {
    .contact__title { font-size: 48px; }
}

/* Wide variant (Academy pages): the title is wider than the text column */
.contact--wide { padding-top: 300px; }
.contact--wide .contact__title { margin-inline: calc(-1 * (100% + 16px) / 3); }

@media (max-width: 1023px) {
    .contact--wide { padding-top: 0; }
    .contact--wide .contact__title { margin-inline: 0; }
}

/* ── Desktop: the stage is pinned (CSS sticky) while an extra scroll length passes; contact-collage.js turns the scroll
      progress into the motion of the text (grows in the middle) and of the photos (fly in from outside, spread outwards).
      Reference: the pin-spacer gallery of 21oaks.org ── */
@media (min-width: 1024px) {
    /* photos that start outside the stage must not widen the page (clip, unlike hidden, keeps the sticky stage working) */
    body .contact { overflow-x: clip; }
    body .contact { padding-bottom: 80px; }
    /* extra scroll length = the time the stage stays pinned */
    body .contact > .container::after { content: ''; display: block; height: 200vh; }
    body .contact__stage {
        position: sticky;
        top:      8px;
        transform-origin: 50% 0;
    }
    /* photo 4 moves right, into the column under photo 5 */
    body .contact__figure--4 { left: calc(((100% - 64px) / 5 + 16px) * 3); }
    /* Vertical positions are compressed by --pin-k (set in JS) so the stage fits short screens; x stays on the grid lines */
    body .contact__stage { height: calc(764px * var(--pin-k, 1) + 180px); }
    body .contact__figure--3 { top: calc(272px * var(--pin-k, 1)); }
    body .contact__figure--1 { top: calc(534px * var(--pin-k, 1)); }
    body .contact__figure--4 { top: calc(764px * var(--pin-k, 1)); }
    body .contact__content { transform-origin: 50% 50%; will-change: scale, opacity; }
    body .contact__figure { will-change: translate, scale, opacity; }
}