/* =============================================================================
   The collections page.

   Rebuilt from the reference's all-collections route: an intro band, then one
   panel per collection, each a film with the collection's copy laid over it
   beside a grid of five watches and a tile that is the link.

   The tokens, the twelve-column .vc-grid, the brand faces and the .vc-icon
   glyphs all come from justintime-home.css, which is loaded on every page.
   Nothing here redeclares them.

   Two layouts, not one layout with tweaks:

     below 1281px   the panels are ordinary sections, stacked. No pinning, no
                    transforms, no hover - the source drops all of it here, and
                    a rest-state transform with no hover to undo it would leave
                    copy parked off the bottom of a card on a touch device.

     1281px and up  the block pins and scrolling advances one collection at a
                    time. Panels are absolutely positioned over each other and
                    move in two independent parts.
   ========================================================================== */

/* --- 1. the intro band -------------------------------------------------- */

/* This route has no hero, so nothing sits under the fixed header to absorb
   it. The band carries the clearance itself. */
.vcc-intro {
    padding-top: 73px;
    background: var(--jt-ground, #f8f0e5);
}

@media (min-width: 769px) {
    .vcc-intro { padding-top: 150px; }
}

.vcc-intro .vc-grid {
    padding-block: 40px;
}

@media (min-width: 769px) {
    .vcc-intro .vc-grid { padding-block: 56px; }
}

.vcc-intro__copy {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

@media (min-width: 769px) {
    /* Eight of the twelve columns, centred - which is the reference's
       879.328px at 1440 expressed so it holds at every width rather than at
       one. */
    .vcc-intro__copy { grid-column: 3 / span 8; }
}

.vcc-intro__eyebrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 24px;
}

.vcc-intro__eyebrow .vc-icon { padding-bottom: 16px; font-size: 12px; line-height: 12px; }

.vcc-intro__heading {
    margin: 0;
    font-family: 'Prelo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 32px;
    line-height: 35.2px;
    font-weight: 400;
    color: var(--jt-ink-strong, #181818);
}

@media (min-width: 769px) {
    .vcc-intro__heading { font-size: 48px; line-height: 50.4px; }
}

/* --- 2. the track ------------------------------------------------------- */

.vcc-track { position: relative; }

/* Height is written by the script, one viewport per panel. It is not in the
   stylesheet because the number of collections belongs to the shop. */
@media (min-width: 1281px) {
    .vcc-pin {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 100%;
        overflow: hidden;
    }
}

/* --- 3. one panel ------------------------------------------------------- */

.vcc-panel {
    display: block;
    background: var(--jt-ground, #f8f0e5);
}

@media (min-width: 1281px) {
    .vcc-panel {
        position: absolute;
        inset: 0;
        display: flex;
        height: 100%;
        width: 100%;
        z-index: 0;
        pointer-events: none;
    }

    .vcc-panel[data-state='active'] {
        z-index: 1;
        pointer-events: auto;
    }
}

/* --- 3a. the film half -------------------------------------------------- */

.vcc-panel__media { position: relative; }

@media (min-width: 1281px) {
    .vcc-panel__media { height: 100%; flex: 1; }
}

.vcc-panel__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    background: #0a0a0c;
}

@media (min-width: 769px) {
    .vcc-panel__frame { aspect-ratio: 16 / 10; }
}

@media (min-width: 1281px) {
    .vcc-panel__frame {
        aspect-ratio: auto;
        height: 100%;
        transition: opacity 800ms var(--vc-ease, cubic-bezier(0.65, 0, 0.35, 1));
        opacity: 0;
    }

    .vcc-panel[data-state='active'] .vcc-panel__frame { opacity: 1; }
}

.vcc-panel__film,
.vcc-panel__still {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* A category whose only picture is a packshot - which is every category in
   this shop until somebody photographs a scene - is shown whole and dimmed
   rather than cropped to fill, because cropping a packshot to a half-screen
   frame cuts the watch in half. */
.vcc-panel__still {
    object-fit: contain;
    padding: clamp(24px, 6vw, 96px);
    opacity: 0.9;
}

/* Two gradients, one down from the top and one up from the foot: the copy
   sits at the bottom and the header crosses the top, and a single gradient
   cannot serve both. */
.vcc-panel__scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 50%),
        linear-gradient(360deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0) 55%);
}

/* Maltese-cross line art, bottom-left of the film. The reference suppresses
   it below 1281px rather than scaling it down, so it is not drawn at all. */
.vcc-panel__mark {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: 505px;
    width: 506px;
    pointer-events: none;
    opacity: 0.16;
    background: url("../img/collections/maltese-pattern.svg") bottom left / contain no-repeat;
}

@media (min-width: 1281px) {
    .vcc-panel__mark { display: block; }
}

.vcc-panel__copy {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    z-index: 2;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-end;
    padding: 32px;
    color: var(--vc-white, #fffdfb);
}

@media (min-width: 1281px) {
    .vcc-panel__copy {
        width: 66%;
        justify-content: center;
        padding: 40px 48px;
        transition: opacity 800ms var(--vc-ease, cubic-bezier(0.65, 0, 0.35, 1)),
                    transform 800ms var(--vc-ease, cubic-bezier(0.65, 0, 0.35, 1));
        opacity: 0;
        transform: translateY(16px);
    }

    .vcc-panel[data-state='active'] .vcc-panel__copy {
        opacity: 1;
        transform: translateY(0);
    }
}

.vcc-panel__name {
    margin: 0 0 2px;
    font-family: 'Prelo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 400;
    color: var(--vc-white, #fffdfb);
}

@media (min-width: 769px) {
    .vcc-panel__name { font-size: 64px; }
}

.vcc-panel__text {
    margin: 24px 0;
    max-width: 54ch;
    font-family: 'Sohne Buch', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: var(--vc-white, #fffdfb);
}

@media (min-width: 1281px) {
    .vcc-panel__text { font-size: 14px; }
}

.vcc-panel__count {
    margin: 0 0 24px;
    color: rgba(255, 253, 251, 0.66);
}

/* The CTA is pushed to the foot of the tall stacked frame; inside the slider
   the copy column is only two-thirds wide and it sits under the paragraph. */
.vcc-panel__cta { margin-top: auto; }

@media (min-width: 1281px) {
    .vcc-panel__cta { margin-top: 0; }
}

/* The glyph is not an inline prefix. At rest it is rotated a quarter turn and
   parked a glyph-width to the left, out of sight behind the start of the
   label; hovering settles it upright while the label slides right into the
   room it leaves. */
.vcc-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding-bottom: 12px;
    font-family: 'Sohne Kraftig', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 13.2px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--vc-white, #fffdfb);
    transition: padding-inline-start 800ms var(--vc-ease, cubic-bezier(0.65, 0, 0.35, 1));
}

.vcc-cta::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 1px;
    background: currentColor;
    opacity: 0.3;
}

.vcc-cta .jt-index {
    position: absolute;
    inset-inline-start: 0;
    top: 1px;
    font-size: 12px;
    transform: translateX(-13.2px) rotate(-90deg);
    transition: transform 800ms var(--vc-ease, cubic-bezier(0.65, 0, 0.35, 1));
}

.vcc-cta:hover,
.vcc-cta:focus-visible { padding-inline-start: 1rem; color: var(--vc-white, #fffdfb); }

.vcc-cta:hover .jt-index,
.vcc-cta:focus-visible .jt-index { transform: none; }

/* --- 3b. the card grid half --------------------------------------------- */

.vcc-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 24px;
    list-style: none;
}

@media (min-width: 1281px) {
    /* The header is fixed and the pinned panel starts at y=0 underneath it,
       so the top row of watches was sitting behind the navigation. The film
       half needs no such clearance - its copy is vertically centred in a
       column two-thirds as wide, and the photograph is meant to run under the
       header. */
    .vcc-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        flex: 1;
        align-self: stretch;
        height: 100vh;
        max-height: 100vh;
        /* 24px of grid padding plus the header. justintime.css sets the bar
           to min-height 64px above 769px and 62px once it condenses on
           scroll, so the taller of the two is the one to clear. */
        padding-top: 88px;
        transition: transform 800ms var(--vc-ease, cubic-bezier(0.65, 0, 0.35, 1));
    }

    .vcc-panel[data-state='active'] .vcc-cards { transform: translateY(0); }
    .vcc-panel[data-state='before'] .vcc-cards { transform: translateY(-100%); }
    .vcc-panel[data-state='after']  .vcc-cards { transform: translateY(100%); }
}

.vcc-cards__item {
    position: relative;
    display: flex;
    overflow: hidden;
}

/* The fourth and fifth watches only appear once there are three columns to
   put them in. */
.vcc-cards__item--wide { display: none; }

@media (min-width: 1281px) {
    .vcc-cards__item {
        height: 100%;
        min-height: 100%;
        transition: transform 800ms var(--vc-ease, cubic-bezier(0.65, 0, 0.35, 1));
    }

    .vcc-cards__item--wide { display: flex; }

    /* A tenth of its own height against the grid's full panel height. This is
       the whole trick: the grid moves as a board and the cards lag, so the
       half reads as depth rather than as one rigid slab. */
    .vcc-panel[data-state='active'] .vcc-cards__item { transform: translateY(0); }
    .vcc-panel[data-state='before'] .vcc-cards__item { transform: translateY(-10%); }
    .vcc-panel[data-state='after']  .vcc-cards__item { transform: translateY(10%); }
}

/* --- 4. one watch ------------------------------------------------------- */

.vcc-card {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    background: var(--jt-ground-raised, #f3e9dc);
    padding: 8px;
}

@media (min-width: 769px) {
    .vcc-card { padding: 16px; }
}

.vcc-card__hit {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.vcc-card__hit:focus-visible {
    outline: 2px solid var(--jt-ink, #181818);
    outline-offset: -4px;
}

.vcc-card__shot {
    display: flex;
    min-height: 0;
    flex: 1;
    padding: 0;
    transition: transform 0.6s var(--vc-ease-card, cubic-bezier(0, 0, 0, 0.95));
}

@media (min-width: 769px) {
    .vcc-card__shot { padding: 24px; }
}

.vcc-card__shot figure {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    align-items: center;
    justify-content: center;
}

/* width and height auto so a small photograph is never blown up, and the cap
   on the image itself rather than on the figure - a percentage max-height
   resolves against a definite height, and figure's is auto. */
.vcc-card__shot img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    /* No blend mode: the cut-out is transparent, and multiply dulled the
       watch into the card. It glows in its own colour instead. */
    filter: drop-shadow(0 0 24px color-mix(in srgb, var(--jt-glow, #e8c89a) 60%, transparent))
            drop-shadow(0 20px 18px rgba(40, 28, 16, 0.14));
    transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1), filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* An auto margin, not a fixed one: it absorbs whatever room is left, pins the
   caption to the card's bottom edge and contributes nothing to the intrinsic
   height - which is what leaves the details line just past the clipped edge,
   and is precisely why it only appears on hover. A px or % margin grows the
   row and the details line is always visible. */
.vcc-card__copy {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 8px;
    text-align: center;
}

.vcc-card__pair,
.vcc-card__detail {
    transition: transform 600ms var(--vc-ease-card, cubic-bezier(0, 0, 0, 0.95));
}

.vcc-card__maker {
    display: block;
    font-family: 'Sohne Kraftig', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    line-height: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--jt-ink-muted, #776251);
}

.vcc-card__name {
    display: block;
    padding-block: 8px;
    font-family: 'Sohne Buch', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    text-transform: capitalize;
    color: var(--jt-ink-strong, #181818);
    transition: opacity 0.6s var(--vc-ease-card, cubic-bezier(0, 0, 0, 0.95)),
                color 0.6s var(--vc-ease-card, cubic-bezier(0, 0, 0, 0.95));
}

@media (min-width: 769px) { .vcc-card__name { font-size: 13px; } }
@media (min-width: 1281px) { .vcc-card__name { font-size: 14px; } }

.vcc-card__detail span {
    display: block;
    font-family: 'Sohne Leicht', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    line-height: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--jt-ink-muted, #776251);
}

/* The inverted rest state, and the hover that undoes it. Scoped to 769px and
   up because below that there is no hover to undo it with, and the details
   line would sit permanently off the bottom of the card. */
@media (min-width: 769px) and (hover: hover) {
    .vcc-card__pair   { transform: translate3d(0, 12px, 0); }

    /* Its own height plus the card's bottom padding, which is exactly the
       distance from where it sits to the clipped edge. The reference's flat
       32px works there because its cards are a known height; on a grid row
       that sizes itself, 32px left six pixels of the line showing - enough to
       read as a rendering fault rather than as a hidden detail. */
    .vcc-card__detail { transform: translate3d(0, calc(100% + 16px), 0); }

    .vcc-card:hover .vcc-card__pair,
    .vcc-card:focus-within .vcc-card__pair,
    .vcc-card:hover .vcc-card__detail,
    .vcc-card:focus-within .vcc-card__detail { transform: translateZ(0); }

    .vcc-card:hover .vcc-card__shot,
    .vcc-card:focus-within .vcc-card__shot { transform: scale3d(1.05, 1.05, 1.05); }
    .vcc-card:hover .vcc-card__shot img,
    .vcc-card:focus-within .vcc-card__shot img {
        transform: translateY(-8px);
        filter: drop-shadow(0 0 36px color-mix(in srgb, var(--jt-glow, #e8c89a) 85%, transparent))
                drop-shadow(0 30px 24px rgba(40, 28, 16, 0.18));
    }
}

/* --- 5. the tile that is the collection --------------------------------- */

.vcc-tile {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    background: var(--jt-ground-raised, #f3e9dc);
    padding: 16px;
}

.vcc-tile__frame {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 24px;
    text-align: center;
    border: 1px solid rgba(119, 98, 81, 0.5);
    transition: border-color 0.6s var(--vc-ease-card, cubic-bezier(0, 0, 0, 0.95));
}

@media (min-width: 1281px) {
    .vcc-tile__frame { justify-content: center; }
    .vcc-tile:hover .vcc-tile__frame,
    .vcc-tile:focus-within .vcc-tile__frame { border-color: rgb(119, 98, 81); }
}

/* The two arrows are the wide-screen affordance; narrow screens get the
   spelled-out call to action instead, because a touch user never sees a
   hover and needs to be told. */
.vcc-tile__arrow { display: none; }
.vcc-tile__cta   { display: block; }
.vcc-tile__label { display: none; }

@media (min-width: 1281px) {
    .vcc-tile__arrow {
        display: flex;
        justify-content: center;
        height: 12px;
        transition: transform 0.6s var(--vc-ease-card, cubic-bezier(0, 0, 0, 0.95));
    }

    .vcc-tile__arrow .vc-icon { font-size: 0.4375rem; color: var(--jt-ink-muted, #776251); }

    .vcc-tile__cta   { display: none; }
    .vcc-tile__label { display: block; }

    .vcc-tile:hover .vcc-tile__arrow--top,
    .vcc-tile:focus-within .vcc-tile__arrow--top { transform: translateY(30px); }

    .vcc-tile:hover .vcc-tile__arrow--bottom,
    .vcc-tile:focus-within .vcc-tile__arrow--bottom { transform: translateY(-30px); }
}

.vcc-tile__label {
    margin-top: 48px;
    font-family: 'Sohne Leicht', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 10px;
    line-height: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--jt-ink, #181818);
    opacity: 0.5;
}

.vcc-tile__name {
    font-family: 'Prelo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    line-height: 1.1;
    color: var(--jt-ink-strong, #181818);
}

@media (min-width: 1281px) {
    .vcc-tile__name { font-size: 32px; margin-block: 24px 48px; }
}

.vcc-tile__cta {
    font-family: 'Sohne Kraftig', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--jt-ink-strong, #181818);
}

/* --- 6. reduced motion --------------------------------------------------- */

/* The pinning stays - it is layout, and removing it would drop eight screens
   of page in on somebody who asked for less movement, which is more motion
   rather than less. What goes is everything that travels. */
@media (prefers-reduced-motion: reduce) {
    .vcc-panel__frame,
    .vcc-panel__copy,
    .vcc-cards,
    .vcc-cards__item,
    .vcc-card__shot,
    .vcc-card__pair,
    .vcc-card__detail,
    .vcc-card__name,
    .vcc-tile__frame,
    .vcc-tile__arrow,
    .vcc-cta,
    .vcc-cta .jt-index {
        transition: none !important;
        transform: none !important;
    }

    .vcc-panel__film { display: none; }
}


/* --- the progress rail and the scroll cue -------------------------------- */

/* Only where the track pins. Stacked, the page scrolls like any other. */
.vcc-progress,
.vcc-scroll-cue { display: none; }

@media (min-width: 1281px) {
    .vcc-progress {
        display: block;
        position: absolute;
        z-index: 3;
        left: 48px;
        top: 104px;
        pointer-events: none;
    }

    .vcc-progress__steps {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 22px;
    }

    .vcc-progress__jump {
        pointer-events: auto;
        position: relative;
        display: flex;
        align-items: baseline;
        gap: 10px;
        min-height: 28px;
        padding: 0;
        border: 0;
        background: none;
        color: rgba(255, 255, 255, 0.55);
        font-family: 'Sohne Leicht', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 11px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        cursor: pointer;
        transition: color 400ms ease;
    }

    .vcc-progress__jump::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 1px;
        background: #fff;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .vcc-progress__num { font-variant-numeric: tabular-nums; }

    .vcc-progress__name {
        max-width: 0;
        overflow: hidden;
        white-space: nowrap;
        opacity: 0;
        transition: max-width 600ms cubic-bezier(0.22, 1, 0.36, 1), opacity 400ms ease;
    }

    .vcc-progress__step[aria-current='step'] .vcc-progress__jump { color: #fff; }
    .vcc-progress__step[aria-current='step'] .vcc-progress__jump::before { transform: scaleX(1); }
    .vcc-progress__step[aria-current='step'] .vcc-progress__name,
    .vcc-progress__jump:hover .vcc-progress__name,
    .vcc-progress__jump:focus-visible .vcc-progress__name { max-width: 14em; opacity: 1; }
    .vcc-progress__jump:hover,
    .vcc-progress__jump:focus-visible { color: #fff; }
    .vcc-progress__jump:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }

    /* Bottom centre of the film half: a word, and a line that draws down
       again and again until the last collection is reached. */
    .vcc-scroll-cue {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        position: absolute;
        z-index: 3;
        left: 25%;
        bottom: 28px;
        transform: translateX(-50%);
        color: #fff;
        font-family: 'Sohne Leicht', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 10px;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        pointer-events: none;
        transition: opacity 500ms ease;
    }

    .vcc-scroll-cue.is-done { opacity: 0; }

    .vcc-scroll-cue__line {
        position: relative;
        width: 1px;
        height: 44px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.25);
    }

    .vcc-scroll-cue__line::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 100%;
        background: #fff;
        transform: translateY(-100%);
    }
}

@media (min-width: 1281px) and (prefers-reduced-motion: no-preference) {
    .vcc-scroll-cue__line::after { animation: vcc-cue 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
}

@keyframes vcc-cue {
    0%   { transform: translateY(-100%); }
    60%  { transform: translateY(0); }
    100% { transform: translateY(100%); }
}