/*
 * KPT Production — Team System Styles
 * Covers the three Team surfaces ONLY:
 *   1. Homepage Team carousel (continuous right→left marquee, glow cards)
 *   2. All Team page grid (distinct centered glow cards with socials)
 *   3. Team Member details page (animated glow portrait, prev/next nav)
 * Scoped to .kpt-team-* classes — never touches global styling.
 * All colors reuse the existing theme tokens (style.css).
 *
 * v1.2 bug-fix pass (Team scope only — desktop-safe):
 *   - Parent-scoped selectors + !important where late-loaded theme CSS
 *     (premium-overrides.css, layout.css) was overriding mobile fixes.
 *   - Homepage card name: complete, no ellipsis/clipping, stable 3-line area.
 *   - Team page photos: every member renders inside the SAME fixed 3/4
 *     responsive frame (object-fit:cover) — no stretched/tall images on desktop.
 *   - Details page: fully centered column (max-width:760px, margin-inline:auto)
 *     with compact Prev / All Team / Next controls (32px) that wrap cleanly.
 *   - Carousel animation, roster order, looping navigation untouched.
 */

/* ============================================================
   1. HOMEPAGE TEAM CAROUSEL — continuous marquee (CSS-driven)
   ============================================================ */
.kpt-team-carousel {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.kpt-team-carousel__track {
    display: flex;
    width: max-content;
    gap: var(--kpt-space-md, 18px);
    padding-inline: 0;
    animation: kpt-team-scroll var(--kpt-team-speed, 32s) linear infinite !important;
    will-change: transform;
}
.kpt-team-carousel__item {
    flex: 0 0 auto !important;
    width: 210px !important;
}
@keyframes kpt-team-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
.kpt-team-carousel:hover .kpt-team-carousel__track,
.kpt-team-carousel:focus-within .kpt-team-carousel__track { animation-play-state: paused; }
.kpt-team-carousel.is-paused .kpt-team-carousel__track { animation-play-state: paused; }

/* ---------- Homepage Team Card (glow design) ---------- */
.kpt-team-carousel .kpt-team-card,
.kpt-team-grid .kpt-team-card {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: var(--kpt-radius-md, 12px) !important;
    background: var(--kpt-surface, #1a1a26) !important;
    border: 1px solid var(--kpt-border-subtle, #2a2a3a) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    isolation: isolate;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    /* card height stays stable across 1-line and 2-line names */
    min-height: 320px;
}

.kpt-team-carousel .kpt-team-card__glow,
.kpt-team-grid .kpt-team-card__glow {
    position: absolute !important;
    inset: -40% !important;
    z-index: -1 !important;
    background: radial-gradient(circle at 50% 30%, rgba(201, 168, 76, 0.22), transparent 60%) !important;
    opacity: 0.55 !important;
    animation: kpt-team-glow 5.5s ease-in-out infinite !important;
    pointer-events: none !important;
}
@keyframes kpt-team-glow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.06); }
}
.kpt-team-carousel .kpt-team-card:hover,
.kpt-team-carousel .kpt-team-card:focus-visible,
.kpt-team-grid .kpt-team-card:hover,
.kpt-team-grid .kpt-team-card:focus-visible {
    transform: translateY(-6px) scale(1.02) !important;
    border-color: rgba(201, 168, 76, 0.55) !important;
    box-shadow: 0 14px 38px rgba(201, 168, 76, 0.18), 0 0 0 1px rgba(201, 168, 76, 0.25) !important;
}
.kpt-team-carousel .kpt-team-card:hover .kpt-team-card__glow,
.kpt-team-carousel .kpt-team-card:focus-visible .kpt-team-card__glow,
.kpt-team-grid .kpt-team-card:hover .kpt-team-card__glow,
.kpt-team-grid .kpt-team-card:focus-visible .kpt-team-card__glow { opacity: 1 !important; }

/* ---- Homepage team photo: locked proportion for every card ---- */
.kpt-team-carousel .kpt-team-card__photo,
.kpt-team-grid .kpt-team-card__photo {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    background: var(--kpt-bg-tertiary, #14141e) !important;
}
.kpt-team-carousel .kpt-team-card__photo img,
.kpt-team-grid .kpt-team-card__photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.4s ease 0s !important;
}
.kpt-team-carousel .kpt-team-card:hover .kpt-team-card__photo img,
.kpt-team-grid .kpt-team-card:hover .kpt-team-card__photo img { transform: scale(1.05) !important; }
.kpt-team-carousel .kpt-team-card__placeholder,
.kpt-team-grid .kpt-team-card__placeholder {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 52px !important;
    color: var(--kpt-gold-dim, #8a6f2e) !important;
}

/* ---- Homepage card body + name + role ----
   Parent-scoped + !important so premium-overrides / layout.css never
   clip long names again on desktop. */
.kpt-team-carousel .kpt-team-card__body,
.kpt-team-grid .kpt-team-card__body {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    padding: var(--kpt-space-sm, 10px) var(--kpt-space-sm, 10px) var(--kpt-space-md, 18px) !important;
    text-align: center !important;
    flex: 0 0 auto !important;
}
.kpt-team-carousel .kpt-team-card__name,
.kpt-team-grid .kpt-team-card__name {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    font-weight: var(--kpt-weight-bold, 700) !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    color: var(--kpt-text-primary, #f5f5f8) !important;
    /* BUG #1/#2 fix — complete name visible, no truncation, no overflow */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: center !important;
    /* Stable 2-line area: cards keep the same height for short & long names */
    min-height: 2.6em !important;
}
.kpt-team-carousel .kpt-team-card__role,
.kpt-team-grid .kpt-team-card__role {
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--kpt-gold-light, #e0c06a) !important;
    display: block !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

@media (min-width: 768px) {
    .kpt-team-carousel__item { width: 230px !important; }
}
@media (min-width: 1200px) {
    .kpt-team-carousel__item { width: 240px !important; }
    .kpt-team-carousel .kpt-team-card__name,
    .kpt-team-grid .kpt-team-card__name { font-size: 16px !important; }
}

/* Reduced motion: stop the marquee, allow manual horizontal scrolling */
@media (prefers-reduced-motion: reduce) {
    .kpt-team-carousel__track { animation: none !important; overflow-x: auto; scroll-snap-type: x proximity; }
    .kpt-team-carousel { -webkit-mask-image: none !important; mask-image: none !important; }
    .kpt-team-carousel .kpt-team-card__glow,
    .kpt-team-grid .kpt-team-card__glow { animation: none !important; opacity: 0.5 !important; }
}

/* ============================================================
   2. ALL TEAM PAGE — premium centered glow grid (distinct design)
   ============================================================ */
.kpt-team-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
    gap: var(--kpt-space-lg, 24px) !important;
    width: 100% !important;
}
@media (max-width: 480px) {
    .kpt-team-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: var(--kpt-space-md, 16px) !important; }
}

.kpt-team-grid .kpt-team-grid-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    padding: var(--kpt-space-md, 18px) var(--kpt-space-md, 18px) var(--kpt-space-lg, 24px) !important;
    border-radius: var(--kpt-radius-lg, 16px) !important;
    background: linear-gradient(160deg, var(--kpt-surface-elevated, #1f1f2e) 0%, var(--kpt-surface, #1a1a26) 100%) !important;
    border: 1px solid var(--kpt-border-subtle, #2a2a3a) !important;
    overflow: hidden !important;
    isolation: isolate;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    min-height: 380px;
}

.kpt-team-grid .kpt-team-grid-card__glow {
    position: absolute !important;
    inset: -50% !important;
    z-index: -1 !important;
    background: radial-gradient(circle at 50% 20%, rgba(74, 47, 170, 0.30), transparent 62%),
                radial-gradient(circle at 50% 95%, rgba(201, 168, 76, 0.20), transparent 55%) !important;
    opacity: 0.6 !important;
    animation: kpt-team-glow 6s ease-in-out infinite !important;
    pointer-events: none !important;
}
.kpt-team-grid .kpt-team-grid-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(201, 168, 76, 0.5) !important;
    box-shadow: 0 16px 44px rgba(74, 47, 170, 0.28), 0 0 0 1px rgba(201, 168, 76, 0.22) !important;
}
.kpt-team-grid .kpt-team-grid-card:hover .kpt-team-grid-card__glow { opacity: 1 !important; }

/* Stretched permalink: WHOLE card navigates; socials sit above it */
.kpt-team-grid .kpt-team-grid-card__link {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    border-radius: inherit !important;
}
.kpt-team-grid .kpt-team-grid-card__link:focus-visible {
    outline: 2px solid var(--kpt-gold, #c9a84c);
    outline-offset: 2px;
}

/* ---- BUG #3/#4 fix: Team-page images now identical visual size ----
   Removed width:min(58%,150px) — now full-width responsive + aspect-ratio
   3/4 + object-fit:cover. Portrait, landscape and square uploads all
   render in the SAME visual box, evenly across the grid. */
.kpt-team-grid .kpt-team-grid-card__photo {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4 !important;
    margin-bottom: var(--kpt-space-md, 16px) !important;
    border-radius: var(--kpt-radius-md, 12px) !important;
    overflow: hidden !important;
    border: 1px solid rgba(201, 168, 76, 0.25) !important;
    background: var(--kpt-bg-tertiary, #14141e) !important;
}
.kpt-team-grid .kpt-team-grid-card__photo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    transition: transform 0.4s ease 0s !important;
}
.kpt-team-grid .kpt-team-grid-card:hover .kpt-team-grid-card__photo img { transform: scale(1.05) !important; }
.kpt-team-grid .kpt-team-grid-card__placeholder {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 44px !important;
    color: var(--kpt-gold-dim, #8a6f2e) !important;
}

.kpt-team-grid .kpt-team-grid-card__name {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 800 !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    color: var(--kpt-text-primary, #f5f5f8) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 2.9em !important;          /* stable 2-line area — equal cards */
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    text-align: center !important;
}
.kpt-team-grid .kpt-team-grid-card__role {
    margin-top: 4px !important;
    font-size: 12.5px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: var(--kpt-gold-light, #e0c06a) !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

.kpt-team-grid .kpt-team-grid-card__socials {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: var(--kpt-space-md, 16px) !important;
    padding-top: 6px !important;            /* keep socials clear of the stretched overlay */
}

/* Shared social icon style (grid cards + details page) */
.kpt-team-social {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    color: var(--kpt-text-primary, #f5f5f8) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease, border-color 0.25s ease !important;
}
.kpt-team-social svg { width: 16px !important; height: 16px !important; }
.kpt-team-social:hover,
.kpt-team-social:focus-visible {
    background: var(--kpt-gold, #c9a84c) !important;
    color: var(--kpt-bg-primary, #0a0a0f) !important;
    border-color: var(--kpt-gold, #c9a84c) !important;
    transform: translateY(-2px) !important;
}

@media (prefers-reduced-motion: reduce) {
    .kpt-team-grid .kpt-team-grid-card__glow { animation: none !important; opacity: 0.5 !important; }
    .kpt-team-grid .kpt-team-grid-card,
    .kpt-team-social,
    .kpt-team-carousel .kpt-team-card { transition: none !important; }
}

/* ============================================================
   3. TEAM MEMBER DETAILS PAGE — glow portrait, big name, nav
   ============================================================ */
.kpt-team-single {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: block !important;
}

/* Profile image with continuously animated theme glow ring */
.kpt-team-single__photo-wrap {
    position: relative !important;
    width: min(300px, 78vw) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: var(--kpt-space-lg, 24px) !important;
    border-radius: var(--kpt-radius-lg, 16px) !important;
    padding: 3px !important;
    background: linear-gradient(135deg, rgba(201, 168, 76, 0.75), rgba(74, 47, 170, 0.55), rgba(201, 168, 76, 0.75)) !important;
    background-size: 220% 220% !important;
    animation: kpt-team-ring 6s ease-in-out infinite !important;
    display: block !important;
}
@keyframes kpt-team-ring {
    0%, 100% { background-position: 0% 50%; box-shadow: 0 10px 34px rgba(201, 168, 76, 0.18); }
    50%      { background-position: 100% 50%; box-shadow: 0 14px 48px rgba(74, 47, 170, 0.35); }
}
.kpt-team-single__photo {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: calc(var(--kpt-radius-lg, 16px) - 3px) !important;
    background: var(--kpt-bg-tertiary, #14141e) !important;
}

.kpt-team-single__name {
    font-size: clamp(28px, 5vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    color: var(--kpt-text-primary, #f5f5f8) !important;
    margin: 0 auto var(--kpt-space-xs, 6px) !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
}
.kpt-team-single__role {
    display: inline-block !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--kpt-gold-light, #e0c06a) !important;
    padding: 6px 16px !important;
    border: 1px solid rgba(201, 168, 76, 0.35) !important;
    border-radius: 999px !important;
    background: rgba(201, 168, 76, 0.08) !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.kpt-team-single__socials {
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: var(--kpt-space-md, 18px) !important;
}

/* BUG #7 fix: bio content STAYS INSIDE the centered column,
   no sidebar/layout shift, max-width 720, margins auto. */
.kpt-team-single__bio {
    width: 100% !important;
    max-width: 720px !important;
    margin-top: var(--kpt-space-lg, 24px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: var(--kpt-text-secondary, #c9c9d4) !important;
    overflow-wrap: anywhere !important;
}
.kpt-team-single__bio p { margin: 0 0 1em !important; }

/* Old Prev/All Team/Next nav CSS removed — bottom navigation now reuses the homepage carousel (.kpt-team-carousel) styles above. */

@media (prefers-reduced-motion: reduce) {
    .kpt-team-single__photo-wrap { animation: none !important; }
}