/* ===================================
   Our Team Page - Unique Design
   VISUAL STYLES ONLY - Bootstrap handles all spacing/layout
   =================================== */

/* Decorative gradient circles for depth */
.team-page-circle-top {
    width: clamp(20rem, 25vw, 28rem);
    height: clamp(20rem, 25vw, 28rem);
    position: absolute;
    top: 2rem;
    left: -5rem;  /* Reduced from -10rem to prevent overflow */
    background: radial-gradient(
        circle,
        rgba(var(--ipn-primary-rgb), 0.12) 0%,
        rgba(var(--ipn-primary-rgb), 0) 70%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

.team-page-circle-bottom {
    width: clamp(20rem, 25vw, 28rem);
    height: clamp(20rem, 25vw, 28rem);
    position: absolute;
    bottom: 2rem;
    right: -5rem;  /* Reduced from -10rem to prevent overflow */
    background: radial-gradient(
        circle,
        rgba(var(--ipn-secondary-dark-rgb), 0.15) 0%,
        rgba(var(--ipn-secondary-dark-rgb), 0) 70%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* Team header — full width with overlay */
.team-page-header {
    min-height: 32em;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url('../images/Overlays%20misc/Overlay%201.webp') no-repeat 50% 50% / cover;
}

/* Team member card with gradient border - NO LAYOUT PROPERTIES */
.team-member-card {
    background: var(--ipn-bg-light);
    border-radius: 1rem;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Gradient border effect using ::before + mask */
.team-member-card::before {
    position: absolute;
    content: "";
    inset: 0;
    border-radius: 1rem;
    z-index: -1;
    border: 0.125rem solid transparent;
    background: linear-gradient(135deg, var(--ipn-accent), var(--ipn-primary-shade)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.team-member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.team-member-card:hover::before {
    background: linear-gradient(135deg, var(--ipn-primary-shade), var(--ipn-accent)) border-box;
}

/* Avatar images - circular */
.team-avatar {
    border-radius: 50%;
    width: 120px;
    height: 120px;
    object-fit: cover;
    object-position: center;
}

.team-avatar--large {
    width: 150px;
    height: 150px;
}

/* Responsive avatar sizing */
@media (max-width: 768px) {
    .team-avatar {
        width: 100px;
        height: 100px;
    }

    .team-avatar--large {
        width: 120px;
        height: 120px;
    }

    .team-page-circle-top,
    .team-page-circle-bottom {
        display: none;
    }
}