/**
 * Team Block - Static Styles
 *
 * Static CSS cached by browser. Dynamic CSS (preset, color scheme, columns) inline.
 * BEM: boost-team, --style-{cards|bordered|overlay|minimal}
 *
 * Social icons styled via boost_render_social_links() helper (icon-style CPT).
 *
 * @package Boost Theme Framework
 * @since 3.6.0
 */

/* /blocks/team/style.css */

/* Section body text (below header). */
.boost-team__text {
    text-align: center;
    font-size: 1.05rem;
    color: var(--boost-text-muted, #64748b);
    line-height: 1.7;
    max-width: var(--boost-container-narrow, 700px);
    margin: -0.5rem auto 2rem;
}

/* =============================================================================
   BASE LAYOUT
   ============================================================================= */

.boost-team {
    position: relative;
    padding: 3rem 2rem;
    background: var(--boost-bg);
    container-type: inline-size;
}

.boost-team__container {
    margin: 0 auto;
    padding: 0 1rem;
}


/* =============================================================================
   GRID
   ============================================================================= */

.boost-team__grid {
    display: grid;
    gap: var(--boost-preset-item-gap, 2rem);
}


/* =============================================================================
   CARD BASE
   ============================================================================= */

.boost-team__card {
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}


/* =============================================================================
   STYLE: CARDS
   ============================================================================= */

.boost-team--style-cards .boost-team__card {
    background: var(--boost-preset-item-bg, var(--boost-card-bg, var(--boost-bg-alt, rgba(255, 255, 255, 0.8))));
    border: var(--boost-preset-item-border, 1px solid var(--boost-card-border, var(--boost-border, rgba(0, 0, 0, 0.08))));
    border-radius: var(--boost-preset-item-radius, 16px);
    padding: var(--boost-preset-item-padding, 2rem);
    box-shadow: var(--boost-preset-item-shadow, none);
}


/* =============================================================================
   STYLE: BORDERED
   ============================================================================= */

.boost-team--style-bordered .boost-team__card {
    border: var(--boost-preset-item-border, 1px solid var(--boost-card-border, var(--boost-border)));
    border-radius: var(--boost-preset-item-radius, 12px);
    padding: var(--boost-preset-item-padding, 1.5rem);
    background: var(--boost-preset-item-bg, transparent);
    box-shadow: var(--boost-preset-item-shadow, none);
}


/* =============================================================================
   STYLE: MINIMAL
   ============================================================================= */

.boost-team--style-minimal .boost-team__card {
    padding: var(--boost-preset-item-padding, 1rem);
    background: var(--boost-preset-item-bg, transparent);
    border: var(--boost-preset-item-border, none);
    border-radius: var(--boost-preset-item-radius, 0);
    box-shadow: var(--boost-preset-item-shadow, none);
}


/* =============================================================================
   STYLE: OVERLAY
   ============================================================================= */

.boost-team--style-overlay .boost-team__card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.boost-team--style-overlay .boost-team__photo-wrap {
    margin: 0;
    border-radius: 0;
    overflow: visible;
    display: block;
}

.boost-team--style-overlay .boost-team__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.boost-team__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem 1.5rem;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

.boost-team__overlay .boost-team__name,
.boost-team__overlay .boost-team__role {
    color: #fff;
}


/* =============================================================================
   HOVER (non-overlay styles)
   ============================================================================= */

.boost-team--style-cards .boost-team__card:hover,
.boost-team--style-bordered .boost-team__card:hover,
.boost-team--style-minimal .boost-team__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}


/* =============================================================================
   PHOTO (non-overlay)
   ============================================================================= */

.boost-team__photo-wrap {
    display: inline-block;
    margin: 0 auto 1.25rem;
    line-height: 0;
    border-radius: 50%;
    overflow: hidden;
}

.boost-team__photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}


/* =============================================================================
   MEMBER INFO
   ============================================================================= */

.boost-team__name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--boost-text);
    margin: 0 0 0.25rem;
}

.boost-team__role {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--boost-text-muted);
    margin: 0 0 0.75rem;
}

.boost-team__bio {
    font-size: 0.9rem;
    color: var(--boost-text-muted);
    line-height: 1.6;
    margin: 0 0 1rem;
}


/* =============================================================================
   SOCIAL LINKS (layout only, colors via boost_render_social_links helper)
   ============================================================================= */

.boost-team__socials {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}




/* =============================================================================
   CONTAINER QUERIES — respond to actual container width, not viewport.
   container-type is set on .boost-team (section) to avoid clipping.
   ============================================================================= */

@container (max-width: 1024px) {
    .boost-team__grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@container (max-width: 768px) {
    .boost-team__grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem;
    }
}

@container (max-width: 480px) {
    .boost-team__grid {
        grid-template-columns: 1fr !important;
    }
}

/* =============================================================================
   VIEWPORT FALLBACK — for browsers without container query support (< 2%)
   ============================================================================= */

@supports not (container-type: inline-size) {
    @media (max-width: 1024px) {
        .boost-team__grid {
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }

    @media (max-width: 768px) {
        .boost-team__grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 1.5rem;
        }
    }

    @media (max-width: 480px) {
        .boost-team__grid {
            grid-template-columns: 1fr !important;
        }
    }
}