/*
==========================================================================
TEAM — SECTION & GRID
==========================================================================
*/

.team-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var( --rw-team-row-gap, 50px ) var( --rw-team-col-gap, 30px );
}

.team-category-section {
    width: 100%;
}

.team-category-title {
    text-align: center;
}

/* Grid column widths */

.team-grid--2 .team-data-wrapper { flex: 0 0 calc( 50%      - 15px   ); }
.team-grid--3 .team-data-wrapper { flex: 0 0 calc( 33.333%  - 20px   ); }
.team-grid--4 .team-data-wrapper { flex: 0 0 calc( 25%      - 22.5px ); }
.team-grid--5 .team-data-wrapper { flex: 0 0 calc( 20%      - 24px   ); }


/*
==========================================================================
TEAM — CARD WRAPPER
==========================================================================
*/

.team-data-wrapper {
    display: flex;
    flex-direction: column;
    text-align: center;
}


/*
==========================================================================
TEAM — IMAGE WRAP
Padding creates room for the accent box ::before to peek behind the photo.
==========================================================================
*/

.team-image-wrap {
    position: relative;
    padding-top:  var( --rw-team-offset, 14px );
    padding-left: var( --rw-team-offset, 14px );
}

/* Accent box — sits behind the photo at top-left */

.team-image-wrap::before {
    content: '';
    position: absolute;
    top:    0;
    left:   0;
    width:  calc( 100% - var( --rw-team-offset, 14px ) );
    height: calc( 100% - var( --rw-team-offset, 14px ) );
    background:    var( --rw-team-card-accent, #65D1DE );
    border-radius: var( --rw-team-border-radius, 10px );
    z-index: 0;
}


/*
==========================================================================
TEAM — IMAGE LINK & PHOTO
==========================================================================
*/

.team-image-wrap > a {
    position: relative;
    z-index: 1;
    display: block;
    border-radius: var( --rw-team-border-radius, 10px );
    overflow: hidden;
    line-height: 0; /* removes inline gap beneath img */
}

.team-photo {
    width: 100%;
    height: auto;
    aspect-ratio: var( --rw-team-aspect-ratio, 1 / 1 );
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.4s ease;
}

.team-image-wrap > a:hover .team-photo {
    transform: scale( 1.04 );
}


/*
==========================================================================
TEAM — HOVER OVERLAY
Renders only when hover_kid_ques + bio_team are both filled.
==========================================================================
*/

.team-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba( 246, 253, 49, 0.80 ); /* #F6FD31 @ 80% */
    border-radius: var( --rw-team-border-radius, 10px );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 20px;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 2;
}

.team-image-wrap > a:hover .team-hover-overlay {
    opacity: 1;
}

.team-hover-question {
    font-family: var( --rw-font-secondary, Montserrat, sans-serif );
    font-weight: 600;
    font-size: var( --rw-team-hover-q-size, 11px );
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var( --rw-team-hover-text-color, #1a3a5c );
    margin-bottom: 10px;
    line-height: 1.4;
}

.team-hover-answer {
    font-family: var( --rw-font-primary, 'IvyPresto Display', Georgia, serif );
    font-weight: 700;
    font-style: italic;
    font-size: var( --rw-team-hover-answer-size, clamp( 26px, 4vw, 46px ) );
    color: var( --rw-team-hover-text-color, #1a3a5c );
    margin-bottom: 16px;
    line-height: 1.1;
}

.team-hover-learn {
    font-family: var( --rw-font-secondary, Montserrat, sans-serif );
    font-weight: 600;
    font-size: var( --rw-team-hover-learn-size, 12px );
    color: var( --rw-team-hover-text-color, #1a3a5c );
    margin-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}


/*
==========================================================================
TEAM — CARD CONTENT
==========================================================================
*/

.team-content-wrapper {
    padding: 18px 4px 0;
    text-align: center;
}

/* Name */

.team-data-name {
    font-family: var( --rw-font-primary, 'IvyPresto Display', Georgia, serif );
    font-weight: 700;
    font-style: italic;
    color: var( --rw-team-name-color, #65D1DE );
    margin-bottom: 4px;
    font-size: var( --rw-team-name-size, clamp( 20px, 2.5vw, 28px ) );
    line-height: 1.2;
}

/* Title */

.team-title-all {
    margin-bottom: 10px;
    font-size: var( --rw-team-title-size, 15px );
    color: var( --rw-team-title-color, inherit );
    font-weight: 400;
}


/*
==========================================================================
TEAM — CARD TEXT LINKS (REVIEWS | BIO | LINKEDIN)
==========================================================================
*/

.team-card-links {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.team-card-link {
    font-family: var( --rw-font-secondary, Montserrat, sans-serif );
    font-weight: 700;
    font-size: var( --rw-team-link-size, 12px );
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var( --rw-team-link-color, #65D1DE );
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    line-height: 1;
}

/* BIO always gets the yellow underline */

.team-link-bio {
    border-bottom-color: var( --rw-team-bio-underline, #E2E735 );
}

.team-card-link:hover {
    color: var( --rw-team-link-color-hover, var( --rw-main-primary ) );
    text-decoration: none;
}


/*
==========================================================================
TEAM SOCIAL — SINGLE PAGE ICON LINKS
==========================================================================
*/

.team-links {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var( --rw-team-social-radius, 50% );
    background: var( --rw-team-social-bg, #ffffff );
    color: var( --rw-team-social-icon-color ) !important;
    text-decoration: none;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
}

.team-links:hover {
    background: var( --rw-team-social-bg-hover );
    border-color: var( --rw-team-social-border-hover ) !important;
    color: var( --rw-team-social-icon-color-hover ) !important;
    text-decoration: none;
}

.team-links i {
    line-height: 1;
    pointer-events: none;
}

.team-single-social .team-links {
    width: var( --rw-team-social-single-btn-size, 38px );
    height: var( --rw-team-social-single-btn-size, 38px );
    font-size: var( --rw-team-social-single-icon-size, 16px );
    border: var( --rw-team-social-single-border-width, 2px ) solid var( --rw-team-social-border-color );
}


/*
==========================================================================
TEAM SINGLE
==========================================================================
*/

/* Layout */

.team-single-wrapper {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.team-single-image-col {
    flex: 0 0 30%;
    max-width: 30%;
}

.team-single-content-col {
    flex: 1;
    min-width: 0;
}

.team-single-content-col .rw-btns {
    margin-top: 30px;
}

/* Single image */

.team-single-image-col .team-image,
.team-single-image-col .team-single-img {
    border-radius: var( --rw-team-border-radius, 10px );
    overflow: hidden;
}

.team-single-image-col .team-photo {
    width: 100%;
    aspect-ratio: var( --rw-team-aspect-ratio, 4 / 3 );
    object-fit: cover;
    object-position: center top;
    border-radius: var( --rw-team-border-radius, 10px );
    display: block;
}

/* Header row */

.team-single-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
}

.team-single-identity {
    flex: 1;
    min-width: 0;
}

/* Name */

.team-single-name {
    margin-bottom: 4px;
    font-family: var( --rw-font-primary, 'IvyPresto Display', Georgia, serif );
    font-weight: 700;
    font-size: var( --rw-team-single-name-size, clamp( 28px, 3vw, 42px ) );
}

/* Title */

.team-single-title {
    margin-bottom: 0;
    font-weight: 400;
    color: var( --rw-team-single-text-title-color );
}

/* Social icons row */

.team-single-social {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    padding-top: 6px;
}

/* Bio */

.team-single-bio {
    line-height: 1.7;
}

.team-single-bio p:last-child {
    margin-bottom: 0;
}


/*
==========================================================================
TEAM RESPONSIVE
==========================================================================
*/

/* 1200px — 4-col and 5-col drop to 3 */

@media screen and ( max-width: 1200px ) {
    .team-grid--4 .team-data-wrapper,
    .team-grid--5 .team-data-wrapper {
        flex: 0 0 calc( 33.333% - 20px );
    }
}

/* 900px — 3-col, 4-col, 5-col drop to 2 */

@media screen and ( max-width: 900px ) {
    .team-grid--3 .team-data-wrapper,
    .team-grid--4 .team-data-wrapper,
    .team-grid--5 .team-data-wrapper {
        flex: 0 0 calc( 50% - 15px );
    }
}

/* 600px — all grids go single column */

@media screen and ( max-width: 600px ) {
    .team-grid--2 .team-data-wrapper,
    .team-grid--3 .team-data-wrapper,
    .team-grid--4 .team-data-wrapper,
    .team-grid--5 .team-data-wrapper {
        flex: 0 0 100%;
    }

    .team-single-wrapper {
        flex-direction: column;
        gap: 24px;
    }

    .team-single-image-col {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .team-single-header {
        flex-direction: column;
        gap: 16px;
    }
}