/**
 * Team Component Styles
 *
 * Shared styles for WellSpring Team (Elementor widget & WordPress template part)
 *
 * @package WellSpring
 * @since 1.0.0
 * @version 1.3.1
 */

/* ================================
   Team Component Styles
   ================================ */

.wellspring-team-section {
    margin-bottom: var(--ws-spacing-80);
}

/* Team Grid Container */
.wellspring-team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ws-grid-gap-large);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 768px) {
    .wellspring-team-grid {
        grid-template-columns: 1fr;
        gap: var(--ws-grid-gap-medium);
    }
    
    .wellspring-team-section {
        margin-bottom: var(--ws-spacing-60);
    }
}

/* Team Member Card */
.wellspring-team-card {
    border: 1px solid var(--ws-card-border);
    border-radius: var(--ws-border-radius-xl);
    padding: var(--ws-spacing-20);
    transition: var(--ws-transition-transform), var(--ws-transition-shadow);
    background: var(--ws-card-background);
    overflow: hidden;
}

.wellspring-team-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ws-shadow-hover);
}

/* Team Card Content - Main Grid */
.wellspring-team-card-content {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--ws-spacing-20);
    height: 100%;
}

/* Team Card Header (Image + Info) */
.wellspring-team-header {
    display: grid;
    grid-template-columns: var(--ws-image-size-team) 1fr;
    gap: var(--ws-spacing-20);
    align-items: center;
}

@media (max-width: 768px) {
    .wellspring-team-header {
        grid-template-columns: 200px 1fr;
        gap: var(--ws-spacing-15);
    }
}

@media (max-width: 480px) {
    .wellspring-team-header {
        grid-template-columns: 1fr;
        gap: var(--ws-spacing-15);
        text-align: center;
    }
}

/* Team Member Image */
.wellspring-team-card .wellspring-team-image {
    width: var(--ws-image-size-team);
    height: var(--ws-image-height-team);
    max-width: var(--ws-image-size-team); /* Override Elementor's max-width: 100% */
    object-fit: cover;
    border-radius: var(--ws-border-radius-large);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .wellspring-team-card .wellspring-team-image {
        width: 200px;
        max-width: 200px; /* Override Elementor's max-width: 100% */
        height: var(--ws-image-height-team-mobile);
    }
}

@media (max-width: 480px) {
    .wellspring-team-card .wellspring-team-image {
        width: 100%;
        max-width: var(--ws-image-size-team);
        height: var(--ws-image-height-team);
        margin: 0 auto;
    }
}

/* Team Member Image Placeholder */
.wellspring-team-image-placeholder {
    width: var(--ws-image-size-team);
    height: var(--ws-image-height-team);
    background: linear-gradient(135deg, var(--ws-placeholder-start) 0%, var(--ws-placeholder-end) 100%);
    border-radius: var(--ws-border-radius-large);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ws-text-lighter);
    font-size: var(--ws-font-size-small);
    text-align: center;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .wellspring-team-image-placeholder {
        width: 200px;
        height: var(--ws-image-height-team-mobile);
    }
}

@media (max-width: 480px) {
    .wellspring-team-image-placeholder {
        width: 100%;
        max-width: var(--ws-image-size-team);
        height: var(--ws-image-height-team);
        margin: 0 auto;
    }
}

/* Team Member Info */
.wellspring-team-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

/* Team Member Name */
.wellspring-team-name {
    margin: 0;
}

/* Team Member Position */
.wellspring-team-position {
    margin: 0;
}


/* Team Member Description */
.wellspring-team-description {
    margin: 0;
}

.wellspring-team-description p {
    margin: 0 0 var(--ws-spacing-15) 0;
}

.wellspring-team-description p:last-child {
    margin-bottom: 0;
}


/* Team Widget Title (if displayed above grid) */
.wellspring-team-widget-title {
    text-align: center;
    margin: 0 0 var(--ws-grid-gap-large) 0;
}

@media (max-width: 768px) {
    .wellspring-team-widget-title {
        margin-bottom: var(--ws-grid-gap-medium);
    }
}

/* Empty State */
.wellspring-team-empty {
    text-align: center;
    padding: var(--ws-grid-gap-large) var(--ws-spacing-20);
    color: var(--ws-text-light);
    font-style: italic;
    grid-column: 1 / -1;
}

/* Loading State */
.wellspring-team-loading {
    text-align: center;
    padding: var(--ws-grid-gap-large) var(--ws-spacing-20);
    color: var(--ws-text-light);
    grid-column: 1 / -1;
}

.wellspring-team-loading::before {
    content: "⟳";
    display: inline-block;
    animation: spin 1s linear infinite;
    margin-right: 8px;
    font-size: 1.2em;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}