/**
 * Team widget.
 *
 * Scoped to `.goxom-tm`, which only this widget outputs. The Style tab writes
 * custom properties on the root, so every card retunes at once and the
 * variants below only swap tokens.
 *
 * Click model: a hidden `__hit` link covers the card at the bottom of the
 * stack, the media above it ignores the pointer, and only the name link and
 * the social buttons take it back. That keeps the social links clickable
 * inside a card that is itself a link, without nesting anchors.
 */

.goxom-tm {
    --tm-ink: var(--color-black, #0C2338);
    --tm-body: var(--color-body, #5A7387);
    --tm-accent: var(--color-primary, #1273C4);
    --tm-surface: #fff;
    --tm-line: var(--color-border, #D5E3EF);
    --tm-shade: rgba(6, 23, 38, 0.6);

    --tm-cols: 3;
    --tm-gap: 24px;
    --tm-radius: 24px;
    --tm-ratio: 4 / 5;
    --tm-inset: 14px;
    --tm-social: 38px;
    --tm-ease: cubic-bezier(0.22, 1, 0.36, 1);

    position: relative;
}

.goxom-tm *,
.goxom-tm *::before,
.goxom-tm *::after {
    box-sizing: border-box;
}

/* ───────────────────────────────────────── layouts */

.goxom-tm--grid .goxom-tm__track {
    display: grid;
    grid-template-columns: repeat(var(--tm-cols), minmax(0, 1fr));
    gap: var(--tm-gap);
}

/* A working carousel before any script runs: swipe, trackpad and arrow keys
   all scroll it natively. The padding/negative-margin pair gives the hover
   lift and its shadow room inside the scroll clip. */
.goxom-tm--slider .goxom-tm__track {
    display: flex;
    gap: var(--tm-gap);
    margin: -16px -4px -28px;
    padding: 16px 4px 28px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.goxom-tm--slider .goxom-tm__track::-webkit-scrollbar {
    display: none;
}

.goxom-tm--slider .goxom-tm__track:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 4px;
    border-radius: 8px;
}

.goxom-tm--slider .goxom-tm__card {
    flex: 0 0 calc((100% - (var(--tm-cols) - 1) * var(--tm-gap)) / var(--tm-cols));
    scroll-snap-align: start;
}

/* ───────────────────────────────────────── card */

.goxom-tm__card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--tm-radius);
    transition: transform 0.55s var(--tm-ease), box-shadow 0.55s ease;
}

.goxom-tm--lift .goxom-tm__card:hover,
.goxom-tm--lift .goxom-tm__card.is-hold,
.goxom-tm--lift .goxom-tm__card:focus-within {
    transform: translateY(-8px);
}

.goxom-tm--below .goxom-tm__card {
    padding: 8px;
    border: 1px solid rgba(12, 35, 56, 0.06);
    background: var(--tm-surface);
    box-shadow: 0 1px 2px rgba(6, 23, 38, 0.04), 0 20px 44px -30px rgba(6, 23, 38, 0.35);
}

.goxom-tm--below .goxom-tm__card:hover {
    box-shadow: 0 6px 14px rgba(6, 23, 38, 0.05), 0 34px 60px -30px rgba(6, 23, 38, 0.42);
}

.goxom-tm__hit {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
}

/* ───────────────────────────────────────── media */

.goxom-tm__media {
    position: relative;
    isolation: isolate;
    aspect-ratio: var(--tm-ratio);
    overflow: hidden;
    border-radius: var(--tm-radius);
    background: color-mix(in srgb, var(--tm-accent) 10%, #EEF4FB);
    /* Clicks fall through to the card link underneath; the pieces that are
       themselves interactive opt back in below. */
    pointer-events: none;
    transform: perspective(1100px) rotateX(var(--tm-rx, 0deg)) rotateY(var(--tm-ry, 0deg));
    transition: transform 0.6s var(--tm-ease);
    box-shadow: 0 24px 48px -32px rgba(6, 23, 38, 0.55);
}

.goxom-tm--below .goxom-tm__media {
    border-radius: calc(var(--tm-radius) - 8px);
    box-shadow: none;
}

.goxom-tm__card.is-tilting .goxom-tm__media {
    transition-duration: 0.12s;
}

.goxom-tm__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50% 20%;
    transform: scale(1.001);
    transition: transform 1s var(--tm-ease), filter 0.7s ease;
}

.goxom-tm__card:hover .goxom-tm__img {
    transform: scale(1.06);
}

.goxom-tm--fx-mono .goxom-tm__img {
    filter: grayscale(1) contrast(1.05);
}

.goxom-tm--fx-soft .goxom-tm__img {
    filter: saturate(0.5) brightness(1.04);
}

.goxom-tm--fx-mono .goxom-tm__card:hover .goxom-tm__img,
.goxom-tm--fx-soft .goxom-tm__card:hover .goxom-tm__img {
    filter: none;
}

.goxom-tm__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--tm-shade) 0%, transparent 48%);
    opacity: 0.55;
    transition: opacity 0.5s ease;
}

.goxom-tm__card:hover .goxom-tm__shade {
    opacity: 0.9;
}

.goxom-tm--below .goxom-tm__shade {
    opacity: 0;
}

.goxom-tm--below .goxom-tm__card:hover .goxom-tm__shade {
    opacity: 0.45;
}

/* The light that follows the pointer while the photo tilts. */
.goxom-tm__glare {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--tm-mx, 50%) var(--tm-my, 0%), rgba(255, 255, 255, 0.5), transparent 46%);
    opacity: 0;
    mix-blend-mode: soft-light;
    transition: opacity 0.5s ease;
}

.goxom-tm--tilt .goxom-tm__card:hover .goxom-tm__glare {
    opacity: 1;
}

/* ───────────────────────────────────────── badge */

.goxom-tm__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px 7px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--tm-ink);
    font-family: var(--font-title, inherit);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}

.goxom-tm__badge::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--tm-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-accent) 22%, transparent);
}

/* ───────────────────────────────────────── social rail */

.goxom-tm__social {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.goxom-tm__social li {
    margin: 0;
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 0.35s ease, transform 0.5s var(--tm-ease);
    transition-delay: calc(var(--tm-s, 0) * 60ms);
}

.goxom-tm__card:hover .goxom-tm__social li,
.goxom-tm__card:focus-within .goxom-tm__social li {
    opacity: 1;
    transform: none;
}

.goxom-tm__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tm-social);
    height: var(--tm-social);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--tm-ink);
    text-decoration: none;
    pointer-events: auto;
    box-shadow: 0 6px 16px -8px rgba(6, 23, 38, 0.45);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s var(--tm-ease);
}

.goxom-tm__social a:hover,
.goxom-tm__social a:focus-visible {
    background: var(--tm-accent);
    color: #fff;
    transform: scale(1.1);
}

.goxom-tm__social a:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.goxom-tm__social svg {
    width: 16px;
    height: 16px;
}

/* No hover on touch screens, so the rail is simply there. */
@media (hover: none) {
    .goxom-tm__social li {
        opacity: 1;
        transform: none;
    }
}

/* ───────────────────────────────────────── name plate */

.goxom-tm__plate {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.goxom-tm--overlay .goxom-tm__plate {
    position: absolute;
    right: var(--tm-inset);
    bottom: var(--tm-inset);
    left: var(--tm-inset);
    padding: 16px 16px 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: max(8px, calc(var(--tm-radius) - var(--tm-inset) + 4px));
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    box-shadow: 0 14px 34px -16px rgba(6, 23, 38, 0.45);
    transition: transform 0.55s var(--tm-ease), background-color 0.4s ease;
}

.goxom-tm--overlay.goxom-tm--tone-dark .goxom-tm__plate {
    --tm-ink: #fff;
    --tm-body: rgba(255, 255, 255, 0.72);
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(9, 24, 40, 0.55);
}

.goxom-tm--below .goxom-tm__plate {
    padding: 20px 12px 12px 14px;
}

.goxom-tm__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.goxom-tm__who {
    min-width: 0;
}

.goxom-tm__name {
    margin: 0;
    font-family: var(--font-title, inherit);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--tm-ink);
}

.goxom-tm__name a {
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1.5px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.45s var(--tm-ease);
}

.goxom-tm__card:hover .goxom-tm__name a,
.goxom-tm__name a:focus-visible {
    background-size: 100% 1.5px;
}

.goxom-tm__name a:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.goxom-tm__role {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--tm-body);
}

.goxom-tm__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--tm-ink);
    color: #fff;
    transition: background-color 0.35s ease, transform 0.5s var(--tm-ease);
}

.goxom-tm--overlay.goxom-tm--tone-dark .goxom-tm__arrow {
    background: #fff;
    color: var(--color-black, #0C2338);
}

.goxom-tm__arrow svg {
    width: 18px;
    height: 18px;
    transition: transform 0.5s var(--tm-ease);
}

.goxom-tm__card:hover .goxom-tm__arrow,
.goxom-tm--overlay.goxom-tm--tone-dark .goxom-tm__card:hover .goxom-tm__arrow {
    background: var(--tm-accent);
    color: #fff;
    transform: scale(1.06);
}

.goxom-tm__card:hover .goxom-tm__arrow svg {
    transform: rotate(45deg);
}

/* Bio: collapsed on the glass plate and opened on hover by animating the grid
   row, so it grows to its real height with no measured max-height. */
.goxom-tm__more {
    display: grid;
    grid-template-rows: 1fr;
}

.goxom-tm__bio {
    min-height: 0;
    margin: 0;
    padding-top: 12px;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tm-body);
}

.goxom-tm--overlay .goxom-tm__more {
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.55s var(--tm-ease), opacity 0.4s ease;
}

.goxom-tm--overlay .goxom-tm__card:hover .goxom-tm__more,
.goxom-tm--overlay .goxom-tm__card:focus-within .goxom-tm__more {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* Centred plate: the arrow moves under the name instead of beside it. */
.goxom-tm--center .goxom-tm__plate {
    text-align: center;
}

.goxom-tm--center .goxom-tm__row {
    flex-direction: column;
    gap: 12px;
}

.goxom-tm--center .goxom-tm__arrow {
    width: 38px;
    height: 38px;
}

/* ───────────────────────────────────────── slider controls */

.goxom-tm__controls {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
}

.goxom-tm.is-static .goxom-tm__controls {
    display: none;
}

.goxom-tm__count {
    flex: none;
    font-family: var(--font-title, inherit);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--tm-body);
}

.goxom-tm__now {
    font-size: 22px;
    font-weight: 700;
    color: var(--tm-ink);
}

.goxom-tm__sep {
    margin: 0 6px;
    opacity: 0.5;
}

.goxom-tm__progress {
    position: relative;
    flex: 1 1 auto;
    height: 3px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(12, 35, 56, 0.1);
}

.goxom-tm__thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 33%;
    border-radius: inherit;
    background: var(--tm-accent);
    transition: width 0.3s ease;
}

.goxom-tm__navs {
    display: flex;
    flex: none;
    gap: 10px;
}

.goxom-tm__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--tm-line);
    border-radius: 50%;
    background: transparent;
    color: var(--tm-ink);
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.35s var(--tm-ease);
}

.goxom-tm__nav svg {
    width: 20px;
    height: 20px;
}

.goxom-tm__nav:hover:not([disabled]),
.goxom-tm__nav:focus-visible {
    border-color: var(--tm-accent);
    background: var(--tm-accent);
    color: #fff;
}

.goxom-tm__nav--prev:hover:not([disabled]) {
    transform: translateX(-2px);
}

.goxom-tm__nav--next:hover:not([disabled]) {
    transform: translateX(2px);
}

.goxom-tm__nav:focus-visible {
    outline: 2px solid var(--tm-accent);
    outline-offset: 3px;
}

.goxom-tm__nav[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* ───────────────────────────────────────── entrance
   Only once the script has added `goxom-tm--js`; without it the cards are
   simply there. A keyframe filled backwards hands `transform` straight back
   to the hover lift once it lands. */

.goxom-tm--js:not(.is-in) .goxom-tm__card {
    opacity: 0;
}

.goxom-tm--js.is-in .goxom-tm__card {
    animation: goxom-tm-rise 0.9s var(--tm-ease) backwards;
    animation-delay: calc(min(var(--tm-i, 0), 5) * 90ms);
}

@keyframes goxom-tm-rise {
    from {
        opacity: 0;
        transform: translateY(36px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ───────────────────────────────────────── responsive */

@media (max-width: 767px) {
    .goxom-tm__name {
        font-size: 18px;
    }

    .goxom-tm__controls {
        gap: 16px;
        margin-top: 28px;
    }

    .goxom-tm__nav {
        width: 44px;
        height: 44px;
    }
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .goxom-tm__media {
        background: #EEF4FB;
    }

    .goxom-tm__badge::before {
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .goxom-tm *,
    .goxom-tm *::before,
    .goxom-tm *::after,
    .goxom-tm__card {
        transition: none !important;
        animation: none !important;
    }

    .goxom-tm--slider .goxom-tm__track {
        scroll-behavior: auto;
    }

    .goxom-tm__card:hover,
    .goxom-tm__card:hover .goxom-tm__img {
        transform: none !important;
    }
}