/* ==========================================================================
   Team Section — shared intro heading (grid + slider)
   ========================================================================== */

.rw-team-grid-section,
.rw-team-slider-section {
    padding-top:    var( --pad-top,    30px );
    padding-bottom: var( --pad-bottom, 30px );
    padding-left:   20px;
    padding-right:  20px;
}

.rw-team-section__intro {
    text-align:    center;
    margin-bottom: 20px;
}

/* ==========================================================================
   Team Filter Buttons
   ========================================================================== */

.rw-team-filter {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    flex-wrap:       wrap;
    margin-bottom:   60px;
}

.rw-team-filter__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         18px 28px;
    border-radius:   999px;
    border:          1px solid #F3F2F2;
    background:      #F3F2F2;
    color:           #333333;
    font-size:       14px;
    font-weight:     600;
    cursor:          pointer;
    transition:      background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    line-height:     1;
}

.rw-team-filter__btn:hover,
.rw-team-filter__btn.is-active {
    background:  var(--rw-primary);
    color:       #ffffff;
    border:      1px solid var(--rw-primary);
}

.rw-team-filter__btn:focus,
.rw-team-filter__btn:focus-visible {
    outline:        2px solid var(--rw-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Team Grid
   ========================================================================== */

.rw-team-grid {
    display: grid;
    gap:     80px 24px;
    grid-template-columns: repeat( 4, 1fr );
}

/* ==========================================================================
   Team Card
   ========================================================================== */

.rw-team-card {
    text-align: center;
}

.rw-team-card__inner {
    display:         block;
    text-decoration: none;
    color:           inherit;
}

.rw-team-card__inner:hover,
.rw-team-card__inner:focus,
.rw-team-card__inner:visited {
    color:           inherit;
    text-decoration: none;
}

/* Circle image — fluid, maintains 1:1 ratio */
.rw-team-card__image {
    position:      relative;
    width:         100%;
    aspect-ratio:  1;
    border-radius: 50%;
    overflow:      hidden;
    margin:        0 auto 20px;
}

/* Grid only — cap circle at 340px */
.rw-team-grid .rw-team-card__image {
    max-width: 340px;
}

.rw-team-card__image img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.4s ease;
}

/* Overlay base — hidden by default, triggered by --linked modifier */
.rw-team-card__overlay {
    position:       absolute;
    inset:          0;
    border-radius:  50%;
    background:     rgba( 0, 0, 0, 0 );
    transition:     background 0.3s ease;
    pointer-events: none;
    z-index:        1;
}

/* Arrow base — hidden by default, triggered by --linked modifier */
.rw-team-card__arrow {
    position:        absolute;
    top:             50%;
    left:            50%;
    transform:       translate( -50%, -50% );
    width:           60px;
    height:          60px;
    border-radius:   50%;
    border:          2px solid #ffffff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           #ffffff;
    font-size:       24px;
    opacity:         0;
    transition:      opacity 0.3s ease;
    pointer-events:  none;
    z-index:         2;
}

/* Zoom on hover — linked cards only */
.rw-team-card--linked:hover .rw-team-card__image img {
    transform: scale( 1.05 );
}

/* Overlay — linked cards only */
.rw-team-card--linked:hover .rw-team-card__overlay {
    background: rgba( 0, 0, 0, 0.4 );
}

/* Arrow — linked cards only */
.rw-team-card--linked:hover .rw-team-card__arrow {
    opacity: 1;
}

/* Card body */
.rw-team-card__body {
    text-align: center;
}

.rw-team-card__role {
    margin:      0 0 6px;
    font-size:   18px;
    font-weight: 600;
    color:       var( --rw-primary );
}

.rw-team-card__name {
    margin:      0;
    font-weight: 700;
    color:       #000000;
}

/* ==========================================================================
   Team Slider wrapper — flanking arrows
   ========================================================================== */

.rw-team-slider-wrap {
    display:     flex;
    align-items: center;
    gap:         16px;
}

.rw-team-slider {
    flex:      1;
    min-width: 0;
}

/* Arrow color override for white background context */
.rw-team-slider-section .rw-slider-nav__btn {
    color:        #000;
    flex-shrink:  0;
    border: 2px solid #000;
}

.rw-team-slider-section .rw-slider-nav__btn:hover {
    background: var( --rw-secondary );
    border: 2px solid var( --rw-secondary );
    color:      #ffffff;
}

/* Slick overrides for team slider — no peek, full cards */
.rw-team-slider .slick-slide {
    padding: 0 12px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media ( max-width: 1200px ) {
    .rw-team-grid {
        grid-template-columns: repeat( 3, 1fr );
    }
}

@media ( max-width: 992px ) {
    .rw-team-grid {
        grid-template-columns: repeat( 2, 1fr );
        gap: 60px 24px;
    }

    .rw-team-grid-section,
    .rw-team-slider-section {
        padding-top: calc( var( --pad-top, 40px ) / 2 );
        padding-bottom: calc( var( --pad-bottom, 40px ) / 2 );
    }
}

@media ( max-width: 640px ) {
    .rw-team-grid {
        grid-template-columns: repeat( 2, 1fr );
        gap: 40px 20px;
    }

    .rw-team-filter {
        gap: 8px;
    }
}