/* ==========================================================================
   pds-team — the stage
   One portrait at a time, held on a lit stage, with the rest of the team
   waiting in a roster beside it. The roster drives the stage: pointer,
   keyboard, the arrows in the head, or the auto-advance timer that runs
   along the active row.
   ========================================================================== */

.pds-team {
    --pds-team-duration: 6000ms;
    --pds-team-radius: clamp(var(--pds-r-lg), 3.4vw, var(--pds-r-xl));
    position: relative;
    padding-block: var(--pds-section-y);
    isolation: isolate;
    overflow: clip;
}

/* The grain belongs over the whole section here, photographs included, not
   just over the background lights. */
.pds-team.pds__grain::before {
    z-index: 5;
    opacity: .2;
}

.pds-team__inner {
    position: relative;
    z-index: 1;
}

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

.pds-team__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 1.75rem clamp(2.5rem, 6vw, 6rem);
    margin-block-end: clamp(2.5rem, 4.5vw, 4rem);
}

.pds-team__head-copy {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* The grid column already sets the measure; a ch cap on the wrapper would be
   read against the body size, not the heading's, and break the headline into
   a stack of single words. */
.pds-team__head-copy .pds__h2 {
    max-inline-size: 15ch;
}

.pds-team__aside {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    max-inline-size: 34rem;
}

.pds-team__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.75rem;
}

/* --- Controls ------------------------------------------------------------------ */

.pds-team__nav {
    display: flex;
    gap: .625rem;
    flex: none;
}

.pds-team__arrow {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    padding: 0;
    border: 1px solid var(--pds-line-ink);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background-color .35s var(--pds-ease), border-color .35s var(--pds-ease),
                color .35s var(--pds-ease), transform .35s var(--pds-ease);
}

.pds-team__arrow:hover {
    background: var(--pds-orange);
    border-color: var(--pds-orange);
    color: #1B0C05;
}

/* The counter reads like a film slate: current frame over total. */
.pds-team__count {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--pds-display);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--pds-on-ink-faint);
    font-variant-numeric: tabular-nums;
}

.pds-team__count b {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}

.pds-team__count i {
    display: block;
    inline-size: 1.5rem;
    block-size: 1px;
    background: currentColor;
    transform: rotate(-58deg);
    opacity: .7;
}

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

.pds-team__body {
    display: grid;
    /* The portrait gets a fixed, modest column; the roster takes the rest. */
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: stretch;
}

/* --- Stage -----------------------------------------------------------------------
   Without JavaScript this is a plain column and every member is on the page,
   readable in order. The script turns it into a single stacked cell where one
   slide shows at a time. */

.pds-team__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 5vw, 4rem);
}

.pds-js .pds-team__stage {
    display: grid;
    gap: 0;
}

.pds-js .pds-team__slide {
    grid-area: 1 / 1;
}

.pds-team__slide {
    display: flex;
    flex-direction: column;
    gap: clamp(1.25rem, 2vw, 1.75rem);
}

/* visibility, not display: the grid cell keeps the height of the tallest slide
   so the stage never jumps between members, and a hidden slide drops out of
   the tab order and the accessibility tree on its own. */
.pds-js .pds-team__slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s var(--pds-ease), visibility .5s;
}

.pds-js .pds-team__slide.is-active {
    opacity: 1;
    visibility: visible;
}

/* --- Portrait ---------------------------------------------------------------------
   The wrapper exists so the quote can be positioned against the photograph
   without living inside the frame, which clips its overflow. */

.pds-team__portrait {
    position: relative;
}

.pds-team__photo {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--pds-team-radius);
    background: var(--pds-ink-soft);
    box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
}

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

.pds--ink .pds-team__tag.pds__pill--accent {
    background: var(--pds-orange);
    border-color: transparent;
    color: #1B0C05;
}

.pds-team__tag {
    position: absolute;
    z-index: 3;
    inset-block-start: clamp(.875rem, 1.4vw, 1.25rem);
    inset-inline-start: clamp(.875rem, 1.4vw, 1.25rem);
}

/* --- Rotating seal -----------------------------------------------------------------
   The house mark set inside a ring of type. Decorative only: hidden from
   assistive tech, and it stops turning when motion is not wanted. */

.pds-team__seal {
    position: absolute;
    z-index: 4;
    inset-block-start: clamp(.875rem, 1.4vw, 1.25rem);
    inset-inline-end: clamp(.875rem, 1.4vw, 1.25rem);
    display: grid;
    place-items: center;
    inline-size: clamp(4.25rem, 6vw, 5.75rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(23, 9, 42, .5);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    pointer-events: none;
}

@supports (backdrop-filter: blur(1px)) {

    .pds-team__seal {
        background: rgba(23, 9, 42, .3);
        backdrop-filter: blur(12px);
    }
}

.pds-team__seal-ring {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
}

.pds-team__seal-ring text {
    font-family: var(--pds-text);
    font-size: 7.6px;
    font-weight: 700;
    letter-spacing: .22em;
    fill: rgba(255, 255, 255, .8);
}

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

    .pds-team__seal-ring {
        animation: pds-team-spin 28s linear infinite;
    }
}

@keyframes pds-team-spin {
    to { transform: rotate(360deg); }
}

.pds-team__seal-icon {
    display: grid;
    place-items: center;
    inline-size: 38%;
    color: #fff;
}

/* --- Quote ---------------------------------------------------------------------------
   The frosted panel resting on the foot of the portrait. It is a layer over the
   photograph, not a disclosure: the words are always in the DOM. */

.pds-team__quote {
    position: absolute;
    z-index: 3;
    inset-inline: clamp(.75rem, 1.2vw, 1.125rem);
    inset-block-end: clamp(.75rem, 1.2vw, 1.125rem);
    margin: 0;
    padding: clamp(1.125rem, 1.8vw, 1.5rem) clamp(1.25rem, 2vw, 1.625rem);
    border-radius: calc(var(--pds-team-radius) - .75rem);
    display: flex;
    gap: 1rem;
}

.pds-team__quote-mark {
    flex: none;
    display: block;
    color: var(--pds-orange);
}

.pds-team__quote p {
    font-size: var(--pds-fs-small);
    line-height: 1.55;
    color: rgba(255, 255, 255, .94);
    text-wrap: pretty;
}

/* --- Identity ---------------------------------------------------------------------- */

.pds-team__ident {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: .5rem 1.5rem;
}

.pds-team__name {
    grid-column: 1;
    font-family: var(--pds-display);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: #fff;
    margin: 0;
}

.pds-team__role {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-size: var(--pds-fs-small);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--pds-orange);
}

.pds-team__role::before {
    content: "";
    inline-size: 1.75rem;
    block-size: 2px;
    border-radius: 2px;
    background: currentColor;
    flex: none;
}

.pds-team__ident .pds__link {
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* --- Roster ---------------------------------------------------------------------------
   A list of buttons, one per member, each carrying its own timer rule. */

.pds-team__roster {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-inline-size: 28rem;
    border-block-start: 1px solid var(--pds-line-ink);
}

/* With the smaller portrait the roster has room for two columns, which also
   brings its height in line with the photograph. */
@media (min-width: 1100px) {

    .pds-team__roster {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: column;
        grid-template-rows: repeat(5, auto);
        align-content: start;
        column-gap: clamp(1.5rem, 3vw, 2.5rem);
        max-inline-size: none;
    }
}

.pds-team__tab {
    position: relative;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 1rem;
    inline-size: 100%;
    padding: 1.125rem .875rem;
    border: 0;
    border-block-end: 1px solid var(--pds-line-ink);
    border-radius: 0;
    background: transparent;
    font-family: var(--pds-text);
    text-align: start;
    color: inherit;
    cursor: pointer;
    transition: background-color .4s var(--pds-ease), padding-inline-start .4s var(--pds-ease);
}

.pds-team__tab:hover,
.pds-team__tab.is-active {
    background: rgba(255, 255, 255, .05);
    padding-inline-start: 1.25rem;
}

.pds-team__tab-index {
    font-family: var(--pds-display);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--pds-on-ink-faint);
    font-variant-numeric: tabular-nums;
    transition: color .4s var(--pds-ease);
}

.pds-team__tab.is-active .pds-team__tab-index {
    color: var(--pds-orange);
}

.pds-team__tab-thumb {
    position: relative;
    display: block;
    inline-size: 2.875rem;
    block-size: 2.875rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--pds-ink-soft);
    box-shadow: 0 0 0 1px var(--pds-line-ink);
    transition: box-shadow .4s var(--pds-ease), transform .5s var(--pds-ease-out);
}

.pds-team__tab-thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    /* Off-stage members read as a muted line-up; the active one is in colour. */
    filter: grayscale(1) contrast(.94);
    opacity: .62;
    transition: filter .5s var(--pds-ease), opacity .5s var(--pds-ease);
}

.pds-team__tab:hover .pds-team__tab-thumb img,
.pds-team__tab.is-active .pds-team__tab-thumb img {
    filter: none;
    opacity: 1;
}

.pds-team__tab.is-active .pds-team__tab-thumb {
    box-shadow: 0 0 0 2px var(--pds-orange);
    transform: scale(1.06);
}

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

.pds-team__tab-name {
    font-family: var(--pds-display);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pds-team__tab-role {
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--pds-on-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pds-team__tab-arrow {
    display: grid;
    place-items: center;
    color: var(--pds-orange);
    opacity: 0;
    transform: translate3d(-8px, 0, 0);
    transition: opacity .4s var(--pds-ease), transform .4s var(--pds-ease-out);
}

.pds-team__tab:hover .pds-team__tab-arrow,
.pds-team__tab.is-active .pds-team__tab-arrow {
    opacity: 1;
    transform: none;
}

/* Timer rule — the auto-advance is visible, so nothing moves unannounced. */
.pds-team__tab-line {
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    block-size: 2px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.pds-team__tab.is-active .pds-team__tab-line {
    opacity: 1;
}

.pds-team__tab-line span {
    display: block;
    block-size: 100%;
    background: var(--pds-orange);
    transform: scaleX(0);
    transform-origin: left center;
}

/* With autoplay off the rule is simply a marker under the active row. */
.pds-team:not([data-pds-autoplay="1"]) .pds-team__tab.is-active .pds-team__tab-line span {
    transform: scaleX(1);
}

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

    .pds-js .pds-team[data-pds-autoplay="1"] .pds-team__tab.is-active .pds-team__tab-line span {
        animation: pds-team-timer var(--pds-team-duration) linear forwards;
    }

    /* Anything that says the visitor is reading — a pointer over the section or
       the section being off screen — holds the timer rather than advancing past
       them. */
    .pds-team:hover .pds-team__tab-line span,
    .pds-team.is-offscreen .pds-team__tab-line span {
        animation-play-state: paused;
    }

    /* Keyboard focus holds it too, but only keyboard focus: a mouse click also
       focuses the button it hit, and :focus-within would then stop the section
       for good once the pointer moved away. Kept in its own rule so that a
       browser without :has() drops this one alone. */
    .pds-team:has(:focus-visible) .pds-team__tab-line span {
        animation-play-state: paused;
    }
}

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

    .pds-team__tab.is-active .pds-team__tab-line span {
        transform: scaleX(1);
    }
}

@keyframes pds-team-timer {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* --- Slide entrance -------------------------------------------------------------------
   Gated on .is-ready, which the script sets the first time the section comes
   into view, so the opening slide plays on arrival instead of during load. */

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

    .pds-js .pds-team.is-ready .pds-team__slide.is-active .pds-team__photo img {
        animation: pds-team-wipe 1.25s var(--pds-ease-out) both;
    }

    .pds-js .pds-team.is-ready .pds-team__slide.is-active .pds-team__tag {
        animation: pds-team-rise .7s var(--pds-ease-out) .3s both;
    }

    .pds-js .pds-team.is-ready .pds-team__slide.is-active .pds-team__seal {
        animation: pds-team-rise .7s var(--pds-ease-out) .36s both;
    }

    .pds-js .pds-team.is-ready .pds-team__slide.is-active .pds-team__quote {
        animation: pds-team-rise .85s var(--pds-ease-out) .22s both;
    }

    .pds-js .pds-team.is-ready .pds-team__slide.is-active .pds-team__name {
        animation: pds-team-rise .75s var(--pds-ease-out) .1s both;
    }

    .pds-js .pds-team.is-ready .pds-team__slide.is-active .pds-team__role {
        animation: pds-team-rise .75s var(--pds-ease-out) .18s both;
    }

    .pds-js .pds-team.is-ready .pds-team__slide.is-active .pds-team__ident .pds__link {
        animation: pds-team-rise .75s var(--pds-ease-out) .26s both;
    }
}

@keyframes pds-team-wipe {
    from {
        clip-path: inset(0 0 100% 0);
        transform: scale(1.07);
    }
    to {
        clip-path: inset(0 0 0 0);
        transform: none;
    }
}

@keyframes pds-team-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

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

@media (max-width: 1099px) {

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

    .pds-team__head-copy {
        max-inline-size: none;
    }

    .pds-team__photo {
        aspect-ratio: 5 / 4;
    }

    .pds-team__stage {
        inline-size: 100%;
        max-inline-size: 30rem;
    }

    .pds-team__roster {
        max-inline-size: none;
    }

    /* The roster turns into a rail, so a long team never pushes the stage off
       the screen. */
    .pds-js .pds-team__roster {
        flex-direction: row;
        justify-content: flex-start;
        gap: .75rem;
        border-block-start: 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        /* Without this the first snap position sits flush against the viewport
           edge and eats the gutter the rail just paid for. */
        scroll-padding-inline-start: var(--pds-gutter);
        scrollbar-width: none;
        padding-block-end: .25rem;
        margin-inline: calc(var(--pds-gutter) * -1);
        padding-inline: var(--pds-gutter);
    }

    .pds-js .pds-team__roster::-webkit-scrollbar {
        display: none;
    }

    .pds-js .pds-team__tab {
        flex: none;
        inline-size: min(18.5rem, 76vw);
        scroll-snap-align: start;
        border: 1px solid var(--pds-line-ink);
        border-radius: var(--pds-r);
        padding: .875rem;
    }

    .pds-js .pds-team__tab:hover,
    .pds-js .pds-team__tab.is-active {
        padding-inline-start: .875rem;
    }

    .pds-js .pds-team__tab.is-active {
        border-color: rgba(255, 127, 13, .5);
    }

    .pds-js .pds-team__tab-line {
        inset-inline: .875rem;
        inset-block-end: .5rem;
    }
}

@media (max-width: 599px) {

    .pds-team__photo {
        aspect-ratio: 1;
    }

    /* Below this width the quote covers too much of the face, so it steps out
       of the frame and only overlaps its bottom edge. */
    .pds-team__quote {
        position: static;
        margin-block-start: -2.5rem;
        margin-inline: .75rem;
    }

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

    .pds-team__ident .pds__link {
        grid-column: 1;
        grid-row: auto;
        margin-block-start: .5rem;
    }
}

/* --- Grid layout -------------------------------------------------------------
   The compact alternative to the stage: every member at the same small
   portrait size, name and role only. Built for uniform team photos in
   company clothing, so the row reads as one team rather than ten profiles. */

.pds-team--grid .pds-team__head {
    margin-block-end: clamp(2rem, 3.5vw, 3rem);
}

.pds-team__grid {
    display: grid;
    /* Five across: ten people land as two even rows. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(1.25rem, 2.2vw, 2rem) clamp(1rem, 1.8vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pds-team__card {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-inline-size: 0;
}

.pds-team__card-photo {
    aspect-ratio: 4 / 5;
    margin: 0 0 .625rem;
    border-radius: var(--pds-r);
    overflow: hidden;
    background: var(--pds-ink-soft);
}

.pds-team__card-photo img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: 50% 20%;
    transition: transform .6s var(--pds-ease-out);
}

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

.pds .pds-team__card-name {
    margin: 0;
    font-family: var(--pds-display);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--pds-on-ink);
}

.pds .pds-team__card-role {
    margin: 0;
    font-size: .875rem;
    line-height: 1.4;
    color: var(--pds-on-ink-soft);
}

@media (max-width: 1023px) {

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

@media (max-width: 767px) {

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

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

    .pds-team__card-photo img {
        transition: none;
    }
}