/* Responsive: Overlay/expansion for tablets and small desktops, but keep 3 slides */


/* Responsive: Adjust carousel nav for mobile */
@media (max-width: 700px) {

    .carousel-nav {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
        position: absolute;
        top: auto;
        bottom: 0.5rem;
        padding: 0;
        margin: 0;
        transform: none;
    }

    .carousel-nav:hover {
        background: var(--carousel-nav-bg);
        border: 2px solid var(--carousel-nav-border);
        color: var(--carousel-nav-text);
        transform: none;
    }

    .carousel-nav:active {
        transform: none;
        background: var(--carousel-nav-hover-bg);
        color: var(--carousel-nav-hover-text);
    }

    .member-profile-extended {
        display: none;
        max-height: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        opacity: 0;
        transition: all 0.3s ease;
    }

    .team-slide {
        min-width: 100%;
        max-width: 100%;
        height: 75vh;
        margin: 0;
        padding: 0;
    }

    .team-slide .member-overlay .member-name-role h3 {
        font-size: 1.4rem;
        padding: 0;
        margin: 0;
        line-height: normal;
    }

    .team-slide .member-overlay .member-name-role p {
        font-size: 1rem;
        white-space: normal;
        padding: 0;
        margin: 0;
    }

    /* Remove extra margin/padding from team content and carousel */
    .team-content {
        padding-inline: 1rem;
        height: auto;
    }

    .team-carousel {
        height: auto;
        overflow: hidden;
        min-width: 100%;
        max-width: 100%;
    }

    .team-track {
        margin: 0;
        padding: 0;
        gap: 0;
        transition: none;
        height: 75vh;
        will-change: auto;
    }

    .team-slide,
    .team-slide:hover {
        box-sizing: border-box;
        margin: 0;
        display: flex;
        flex-direction: column;
        box-shadow: none;
        height: auto;
        overflow: hidden;
        pointer-events: auto;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .team-slide .member-photo {
        position: absolute;
        top: 0;
        opacity: 1;
        z-index: 1;
        transition: none;
        pointer-events: auto;
        cursor: pointer;
    }

    .team-slide .member-overlay {
        position: absolute;
        bottom: 0;
        margin: 0;
        height: auto;
        opacity: 1;
        display: flex;
        flex-direction: column;
        background: transparent;
        backdrop-filter: none;
        transition: all 0.3s ease;
        z-index: 2;
    }

    .team-slide .member-overlay .member-name-role {
        position: relative;
        background: linear-gradient(var(--team-gradient-start), var(--team-gradient-end));
        padding: 1rem;
        transition: all 0.3s ease;
    }

    .team-slide .member-overlay .member-name-role * {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 1);
        pointer-events: none;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .team-slide .member-overlay .member-name-role a {
        opacity: 0;
        font-size: 0rem;
        pointer-events: none;
        cursor: pointer;
        display: block;
        text-decoration: underline;
        transition: all 0.3s ease;
    }

    .team-slide .member-overlay .member-info {
        opacity: 1;
        display: block;
        margin: 0 1rem 1rem 1rem;
        overflow-y: auto;
        flex-grow: 1;
    }

    /* Hover/Active state - move name to top, expand profile */
    .team-slide:hover .member-photo,
    .team-slide:active .member-photo {
        opacity: 0.3;
    }

    .team-slide:hover .member-overlay,
    .team-slide:active .member-overlay {
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 100%;
        background: var(--team-overlay-bg);
        backdrop-filter: blur(2px);
        overflow-y: auto;
    }

    .team-slide:hover .member-overlay .member-name-role,
    .team-slide:active .member-overlay .member-name-role {
        position: relative;
        background: transparent;
    }

    .team-slide:hover .member-overlay .member-name-role *,
    .team-slide:active .member-overlay .member-name-role * {
        text-shadow: none;
    }

    .team-slide:hover .member-overlay .member-name-role a,
    .team-slide:active .member-overlay .member-name-role a {
        opacity: 1;
        font-size: 1rem;
        pointer-events: auto;
    }

    .team-slide:hover .member-profile-extended,
    .team-slide:active .member-profile-extended {
        display: block;
        max-height: none;
        opacity: 1;
        padding: 1rem;
        overflow-y: auto;
    }
    
    /* Last slide expands to the left on hover without overlapping previous slide */
    .team-slide:last-child:hover {
        margin-left: 0;
        margin-right: 0;
    }
}