/* ================================================================
    SPOON - TEAM PAGE STYLESHEET
    Minimal, modern, mobile-first design
    Inspired by clean YC/startup team pages
   ================================================================ */

/* ====================
   1. IMPORT DESIGN SYSTEM
   ==================== */
@import url('cart.css');
/* Imports base theme, header, and bottom nav styles */


/* ====================
   2. TEAM PAGE CONTENT
   ==================== */

/**
 * TEAM CONTENT CONTAINER
 * Spacious, breathable layout with generous padding
 * Mobile-first with premium typography
 */
.team-content {
    padding: var(--spacing-xl) var(--spacing-lg);
    padding-bottom: 120px; /* Space for bottom nav */
    max-width: 640px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .team-content {
        padding: 48px var(--spacing-xl);
    }
}


/* ====================
   3. MISSION SECTION
   ==================== */

/**
 * MISSION STATEMENT
 * Large, impactful typography with soft spacing
 * Premium feel with careful line-height and letter-spacing
 */
.mission-section {
    margin-bottom: 56px;
    text-align: left;
}

.mission-title {
    font-size: clamp(26px, 6vw, 32px);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: -0.6px;
    margin-bottom: var(--spacing-lg);
}

.mission-subtitle {
    font-size: clamp(16px, 3.5vw, 18px);
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.65;
    letter-spacing: -0.1px;
    max-width: 580px;
}


/* ====================
   4. TEAM SECTION
   ==================== */

/**
 * TEAM SECTION TITLE
 * Subtle, minimal section label
 * Doesn't compete with team member names
 */
.team-section {
    margin-top: 48px;
}

.team-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: var(--spacing-lg);
}


/* ====================
   5. TEAM GRID & CARDS
   ==================== */

/**
 * TEAM GRID
 * Single column on mobile, responsive grid on larger screens
 * Generous spacing between cards
 */
.team-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-xl);
    }
}

/**
 * TEAM CARD
 * Clean, minimal card with soft elevation
 * Centered avatar with clear hierarchy
 */
.team-card {
    background: var(--background-white);
    border-radius: var(--radius-medium);
    border: 1px solid var(--border-color);
    padding: var(--spacing-xl) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s ease;
}

.team-card:hover {
    border-color: #d0d0d0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/**
 * TEAM CARD AVATAR
 * Simple user icon matching bottom nav style
 * Clean, minimal design with soft colored backgrounds
 */
.team-card__avatar {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    flex-shrink: 0;
    position: relative;
}

/* Founder 1 - Soft Blue Background */
.team-card:nth-child(1) .team-card__avatar {
    background: #a8d5e2;
}

/* Founder 2 - Soft Purple Background */
.team-card:nth-child(2) .team-card__avatar {
    background: #c5b3d5;
}

/**
 * USER ICON
 * Same icon style as bottom navigation Account tab
 * Simple, clean, and consistent with app UI
 */
.team-card__avatar i {
    font-size: 48px;
    color: #6b7280;
    display: block;
}

/**
 * TEAM CARD INFO
 * Clear typographic hierarchy
 * Name → Role → Bio → Link
 */
.team-card__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.team-card__name {
    font-size: clamp(18px, 3.5vw, 20px);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.team-card__role {
    font-size: 14px;
    font-weight: 500;
    color: var(--brand-primary);
    margin-bottom: 2px;
}

/**
 * TEAM CARD LINK
 * Subtle connect/contact link
 * Appears below bio for founders with external links
 */
.team-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--brand-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    align-self: center;
}

.team-card__link:hover {
    gap: 8px;
    opacity: 0.8;
}

.team-card__link i {
    font-size: 12px;
}


/* ====================
   6. RESPONSIVE ADJUSTMENTS
   ==================== */

/**
 * Tablet and Desktop Refinements
 * Slightly larger spacing and typography
 */
@media (min-width: 768px) {
    .mission-section {
        margin-bottom: 64px;
    }

    .team-section {
        margin-top: 56px;
    }

    .team-card {
        padding: 40px var(--spacing-lg);
    }

    .team-card__avatar {
        width: 140px;
        height: 140px;
        margin-bottom: 24px;
    }

    /* Scale up the icon proportionally for desktop */
    .team-card__avatar i {
        font-size: 56px;
    }
}