/* =============================================
   TEAM PAGE
   ============================================= */

/* Page heading */
.team-hero {
    padding-block: var(--space-16) var(--space-10);
    text-align: center;
}
.team-hero__heading {
    font-size: var(--text-5xl);
    font-weight: 700;
    color: var(--color-text);
}

@media (max-width: 768px) {
    .team-hero__heading { font-size: var(--text-3xl); }
}

/* =============================================
   TABS
   ============================================= */
.team-tabs {
    display: flex;
    gap: var(--space-8);
    padding: var(--space-12) 0 var(--space-4) 0;
}

.team-tab {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--color-text-muted);
    padding: 0 0 var(--space-3);
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
    position: relative;
}
.team-tab:hover { color: var(--color-text-secondary); }

.team-tab.is-active {
    color: var(--color-primary-light);
    font-weight: 600;
    border-bottom-color: var(--color-primary-light);
}

.team-tabs__underline {
    height: 1px;
    background: var(--color-border-light);
    margin-bottom: var(--space-16);
}

/* =============================================
   CAROUSEL
   ============================================= */
.team-section { padding-bottom: var(--space-20); }

.team-carousel {
    position: relative;
    padding-inline: var(--space-16);
    /* .team-carousel isn't wrapped in .container, so on wide viewports it
       stretched edge-to-edge while .team-carousel__stage capped itself at
       max-width: 1100px and centered — leaving the arrows (inset from this
       element's own edges) stranded far from the actual photo cards. Capping
       this to the stage's width plus its own padding keeps the arrows
       snug against the cards at any viewport width. */
    max-width: calc(1100px + 2 * var(--space-16));
    margin-inline: auto;
}

/* Back and forward arrows — on left and right sides, inside carousel */
.team-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-primary-light);
    background: var(--color-white);
    color: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    z-index: 3;
    padding: 0;
}
.team-carousel__arrow:hover:not(:disabled) {
    background: var(--color-primary-light);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
    transform: translateY(-50%) scale(1.1);
}
.team-carousel__arrow:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}
.team-carousel__arrow:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.team-carousel__arrow--prev {
    left: var(--space-3);
}
.team-carousel__arrow--next {
    right: var(--space-3);
}

/* Stage: 3-column grid — preview (left) | featured (center) | preview (right) */
.team-carousel__stage {
    display: grid;
    grid-template-columns: 0.85fr 1.3fr 0.85fr;
    gap: var(--space-12);
    align-items: center;
    overflow: hidden;
    min-height: 320px;
    max-width: 1100px;
    margin: 0 auto;
}

/* =============================================
   TEAM CARDS
   ============================================= */
.team-card {
    display: flex;
    flex-direction: column;
    transition: opacity var(--transition);
    background: var(--color-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Side cards — grayscale, reduced opacity, clickable */
.team-card--prev,
.team-card--next,
.team-card--next2 {
    opacity: 0.7;
    transition: opacity var(--transition), transform var(--transition);
    cursor: pointer;
}
.team-card--prev:hover,
.team-card--next:hover,
.team-card--next2:hover {
    opacity: 1;
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Photo container — fills top of card */
.team-card__photo {
    width: 100%;
    aspect-ratio: 20/21;
    border-radius: 0;
    overflow: hidden;
    background: var(--color-surface-mid);
    margin: 0;
    flex-shrink: 0;
}

/* Featured card has taller photo */
.team-card--active .team-card__photo {
    aspect-ratio: 15/14;
}
.team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: filter var(--transition);
}

/* Photo sizing is now controlled by card width and aspect ratio */

/* Grayscale on side cards */
.team-card--prev .team-card__photo img,
.team-card--next .team-card__photo img,
.team-card--next2 .team-card__photo img {
    filter: grayscale(100%);
}

/* Placeholder when no photo set */
.team-card__photo-placeholder {
    width: 100%;
    height: 100%;
    background: var(--color-surface-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-placeholder);
    font-size: var(--space-16);
}

/* Text content */
.team-card__body {
    text-align: center;
    padding: var(--space-5);
}

.team-card__name {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.team-card--active .team-card__name {
    font-size: var(--text-xl);
}

.team-card--prev .team-card__name,
.team-card--next .team-card__name,
.team-card--next2 .team-card__name {
    font-size: var(--text-base);
}

.team-card__role {
    font-size: var(--text-sm);
    color: var(--color-primary-light);
    font-weight: 500;
    margin-bottom: var(--space-4);
}

.team-card__bio {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-5);
}

.team-card__linkedin {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-primary-light);
    transition: opacity var(--transition);
}
.team-card__linkedin:hover { opacity: 0.8; }

/* Empty state */
.team-empty {
    padding-block: var(--space-16);
    color: var(--color-text-muted);
    font-size: var(--text-md);
}

/* =============================================
   CAROUSEL ENTER ANIMATION
   ============================================= */
@keyframes team-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.team-card { animation: team-fade-in 0.25s ease both; }
.team-card--prev { animation-delay: 0.05s; }
.team-card--active { animation-delay: 0.1s; }
.team-card--next { animation-delay: 0.15s; }
.team-card--next2 { animation-delay: 0.2s; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1024px) {
    .team-carousel__stage {
        grid-template-columns: 0.8fr 1.2fr 0.8fr;
        gap: var(--space-10);
        max-width: 900px;
        min-height: 300px;
    }
    .team-carousel { padding-inline: var(--space-12); }
    .team-carousel__arrow--prev { left: var(--space-2); }
    .team-carousel__arrow--next { right: var(--space-2); }
}

@media (max-width: 640px) {
    .team-carousel__stage {
        grid-template-columns: 1fr;
    }
    /* On mobile only show the active card */
    .team-card--next,
    .team-card--next2 { display: none; }

    /* Arrows positioned inside the carousel on mobile */
    .team-carousel__arrow {
        width: 40px;
        height: 40px;
        border-width: 1.5px;
    }
    .team-carousel__arrow--prev {
        left: var(--space-3);
        top: 35%;
    }
    .team-carousel__arrow--next {
        right: var(--space-3);
        top: 35%;
    }

    .team-carousel {
        padding-inline: var(--space-12);
    }
}