/* ==========================================================================
   pds-process — sticky stage + scroll-synced steps
   ========================================================================== */

.pds-process {
    /* How far below the viewport top the stage parks. Shared by the sticky
       offset and by the height cap that keeps it on screen. */
    --pds-process-stick: clamp(5rem, 12vh, 8rem);

    position: relative;
    padding-block: var(--pds-section-y);
    /* `overflow: hidden` would make this section the scrollport for its own
       subtree, and a sticky element only sticks inside its nearest scrollport —
       so the stage below would never stick. `clip` contains overflow on the
       inline axis without establishing one. */
    overflow-x: clip;
}

.pds-process__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(2.75rem, 5vw, 4.5rem);
}

/* --- Head ----------------------------------------------------------------- */

.pds-process__head {
    display: grid;
    /* The title carries the width here: capping the copy column at a measure
       squeezed it into four short lines and left a hole between the two
       columns. Letting each column take its share of the bed keeps the pair
       reading as one line of type across the section. */
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: end;
    gap: 1.75rem clamp(2rem, 4vw, 4rem);
}

.pds-process__head-copy {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-inline-size: 0;
}

.pds-process__intro {
    max-inline-size: 42ch;
    padding-block-end: .375rem;
}

/* --- Body ----------------------------------------------------------------- */

.pds-process__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

/* --- Sticky stage ---------------------------------------------------------- */

.pds-process__sticky {
    position: sticky;
    /* Parks the stage a little below the viewport top so a fixed site header
       never covers it. */
    inset-block-start: var(--pds-process-stick);
    /* A 4/5 stage in a half-width column is easily taller than a laptop
       screen. Capping the column to what is left below the header keeps the
       whole thing — stage, ring and counter — in view for the entire scroll. */
    max-block-size: calc(100vh - var(--pds-process-stick) - 2rem);
    max-block-size: calc(100svh - var(--pds-process-stick) - 2rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.pds-process__stage {
    position: relative;
    /* A preference, not a promise: on short screens the flex line shrinks the
       stage past it. The media is object-fit: cover, so it still reads. */
    aspect-ratio: 4 / 5;
    flex: 1 1 auto;
    min-block-size: 0;
    border-radius: var(--pds-r-xl);
    background: var(--pds-ink-soft);
    box-shadow: var(--pds-shadow-lg);
}

.pds-process__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    /* Slides cross-fade with a slow drift, so the swap reads as a camera move
       rather than a hard cut. */
    transform: scale(1.06);
    transition: opacity .75s var(--pds-ease-out), transform 1.1s var(--pds-ease-out),
                visibility .75s;
}

.pds-process__slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    .pds-process__slide {
        transform: none;
        transition-duration: .01ms;
    }
}

.pds-process__slide img,
.pds-process__slide video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

.pds-process__placeholder {
    color: rgba(255, 255, 255, .22);
}

.pds-process__stage-foot {
    position: absolute;
    inset-inline: 1rem;
    inset-block-end: 1rem;
    z-index: 3;
}

.pds-process__stage-label {
    display: inline-block;
    padding: .625rem 1.125rem;
    border-radius: 999px;
    background: rgba(23, 9, 42, .58);
    backdrop-filter: blur(14px);
    color: #fff;
    font-size: var(--pds-fs-small);
    font-weight: 600;
    letter-spacing: -.01em;
}

/* --- Gauge ----------------------------------------------------------------- */

.pds-process__gauge {
    display: flex;
    align-items: center;
    gap: .875rem;
}

.pds-process__ring {
    inline-size: 3rem;
    block-size: 3rem;
    flex: none;
    color: var(--pds-orange);
    transform: rotate(-90deg);
}

.pds-process__ring-fill {
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - (var(--pds-ring, 0) * 100));
    transition: stroke-dashoffset .7s var(--pds-ease-out);
}

/* While the ring is scrubbed frame by frame the transition would only add
   lag behind the scrollbar, so the scrubbed state drops it. */
.pds-process__sticky.is-scrubbed .pds-process__ring-fill {
    transition: none;
}

.pds-process__counter {
    display: flex;
    align-items: baseline;
    gap: .25rem;
    margin: 0;
    font-family: var(--pds-display);
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -.03em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.pds-process__counter-sep,
.pds-process__counter span:last-child {
    color: var(--pds-on-ink-faint);
}

/* --- Steps ----------------------------------------------------------------- */

.pds-process__steps {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: pds-process;
}

.pds-process__step {
    --pds-step-pad: clamp(2rem, 4vw, 3.25rem);

    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 1.5rem;
    padding-block: var(--pds-step-pad);
}

.pds-process__step + .pds-process__step {
    border-block-start: 1px solid var(--pds-line-ink);
}

/* --- Marker rail ----------------------------------------------------------- */

.pds-process__marker {
    position: relative;
    display: flex;
    justify-content: center;
}

/* The rail runs the full height of the step and is drawn behind the dot. It
   bleeds into both paddings so neighbouring segments meet on the divider
   instead of leaving a gap the height of one padding. */
.pds-process__marker::before {
    content: "";
    position: absolute;
    inset-block: calc(var(--pds-step-pad) * -1) calc(var(--pds-step-pad) * -1);
    inset-inline-start: 50%;
    inline-size: 1px;
    transform: translateX(-50%);
    background: var(--pds-line-ink);
}

/* Caps: the rail starts and ends on a dot centre, never in mid-air. */
.pds-process__step:first-child .pds-process__marker::before {
    inset-block-start: 1.5rem;
}

.pds-process__step:last-child .pds-process__marker::before {
    inset-block-end: calc(100% - 1.5rem);
}

.pds-process__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 50%;
    border: 1px solid var(--pds-line-ink);
    background: var(--pds-ink);
    color: var(--pds-on-ink-faint);
    transition: background-color .5s var(--pds-ease), color .5s var(--pds-ease),
                border-color .5s var(--pds-ease), transform .5s var(--pds-ease-out);
}

.pds-process__step.is-past .pds-process__dot {
    border-color: rgba(255, 127, 13, .45);
    color: var(--pds-orange);
}

.pds-process__step.is-active .pds-process__dot {
    background: var(--pds-orange);
    border-color: var(--pds-orange);
    color: #1B0C05;
    transform: scale(1.1);
}

@media (prefers-reduced-motion: no-preference) {

    .pds-process__step.is-active .pds-process__dot::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: 50%;
        border: 2px solid var(--pds-orange);
        animation: pds-process-pulse 2.4s var(--pds-ease-out) infinite;
    }
}

@keyframes pds-process-pulse {
    0%   { transform: scale(1); opacity: .65; }
    100% { transform: scale(1.75); opacity: 0; }
}

/* --- Step content ---------------------------------------------------------- */

.pds-process__content {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    /* Inactive steps recede rather than disappear: the whole list stays
       readable, the active one just carries more weight. */
    opacity: .48;
    transition: opacity .6s var(--pds-ease);
}

.pds-process__step.is-active .pds-process__content,
.pds-process__step.is-past .pds-process__content {
    opacity: 1;
}

.pds-process__meta {
    display: flex;
    align-items: center;
    gap: .875rem;
    margin: 0;
    color: var(--pds-on-ink-faint);
}

.pds-process__index {
    font-family: var(--pds-display);
    font-size: var(--pds-fs-eyebrow);
    font-weight: 600;
    letter-spacing: .14em;
    color: var(--pds-orange);
}

.pds-process__time {
    font-size: var(--pds-fs-eyebrow);
    letter-spacing: .04em;
    white-space: nowrap;
}

.pds-process__title {
    color: #fff;
}

.pds-process__text {
    max-inline-size: 52ch;
    color: var(--pds-on-ink-soft);
}

/* Mobile-only per-step media */
.pds-process__inline-media {
    display: none;
    margin: .5rem 0 0;
    aspect-ratio: 16 / 10;
    border-radius: var(--pds-r);
}

/* --- CTA -------------------------------------------------------------------- */

.pds-process__cta {
    display: flex;
    justify-content: center;
    padding-block-start: clamp(.5rem, 2vw, 1.5rem);
}

/* --- Responsive ------------------------------------------------------------- */

@media (max-width: 1023px) {

    .pds-process__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .pds-process__body {
        grid-template-columns: minmax(0, 1fr);
    }

    /* The stage cannot stick to anything useful once it is stacked above the
       list, so each step shows its own media instead. */
    .pds-process__sticky {
        display: none;
    }

    .pds-process__inline-media {
        display: block;
    }
}

@media (max-width: 599px) {

    .pds-process__step {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        gap: 1rem;
    }

    .pds-process__dot {
        inline-size: 2.5rem;
        block-size: 2.5rem;
    }
}