/* ==========================================================================
   Team Page Styles — Meet Our Team
   Matches approved mockup: alternating two-col sections, dark overlay hero,
   connection card, centered story block, and responsive team grid.
   ========================================================================== */

/* ==========================================================================
   1. (Removed) "Meet Dr. Kelly" overlay — section no longer in template.
   ========================================================================== */

/* ==========================================================================
   2. Two-column layout enhancements for team page
   ========================================================================== */

/*
 * .two-col is defined globally in sections.css.
 * These scoped overrides add the mockup's 60px headings, 20px body text,
 * feature lists with icons, and proper spacing.
 */
.two-col__title {
    font-family: var(--font-heading);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-medium);
    line-height: var(--lh-snug);
    color: var(--color-text-dark);
    margin: 0 0 var(--space-lg);
}

.two-col__description {
    font-family: var(--font-body);
    font-size: var(--fs-lg);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--color-text-dark);
    margin: 0 0 var(--space-xl);
}

/* Feature list — plain text items (credentials). */
.two-col__list {
    list-style: none;
    margin: 0 0 var(--space-xl);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.two-col__list li {
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: var(--fw-regular);
    line-height: var(--lh-relaxed);
    color: var(--color-text-dark);
}

/* Feature list variant with leading icons. */
.two-col__list--icons li {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.two-col__list--icons svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--color-text-dark);
}

/* Action buttons row. */
.two-col__actions {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.two-col__actions--center {
    justify-content: center;
    margin-bottom: var(--space-4xl);
}

/* Image container: rounded + cover-fit. */
.two-col__image {
    border-radius: var(--border-radius);
    overflow: hidden;
}

.two-col__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Desktop: match mockup 60px headings & side-by-side 640px tall images. */
@media (min-width: 1024px) {
    .two-col {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4xl);
        align-items: center;
    }

    /* Reverse: image appears on the left at desktop. */
    .two-col--reverse .two-col__image {
        order: -1;
    }

    .two-col__title {
        font-size: 6rem;
        line-height: 1.2;
    }

    .two-col__image img {
        height: 640px;
    }
}

/* Tablet: stack but keep images at a reasonable aspect ratio. */
@media (max-width: 1023px) {
    .two-col__image img {
        aspect-ratio: 3 / 2;
    }
}

/* ==========================================================================
   3. Connection — now uses standard .two-col (image left, text right)
   Connection-card styles removed; layout handled by two-col + two-col--reverse.
   ========================================================================== */

/* ==========================================================================
   4. Story section — blurred background image with text overlay
   ========================================================================== */
.section--story {
    position: relative;
    overflow: hidden;
    padding-top: var(--space-5xl);
    padding-bottom: var(--space-5xl);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Background image fills section with blur. */
.story__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.story__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: blur(6px);
    /* Scale slightly to prevent blur edge artifacts. */
    transform: scale(1.05);
}

/* Dark overlay for text legibility. */
.story__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.50);
}

/* Elevate content above the overlay. */
.section--story .container {
    position: relative;
    z-index: 2;
}

/* Override scheme-3 colors — force white text over dark overlay. */
.section--story .section__label,
.section--story .section__title,
.section--story .section__subtitle {
    color: var(--color-white);
}

.section--story .section__header--center {
    max-width: var(--container-sm);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--space-xl);
}

/* ==========================================================================
   5. Full Team Grid
   ========================================================================== */
.section--full-team .section__header--center {
    max-width: var(--container-sm);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: var(--space-4xl);
}

.team-full-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

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

@media (min-width: 1024px) {
    .team-full-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   6. Section header overrides for team page
   ========================================================================== */

/* Labels in team page use body font, sentence case. */
.section--welcome .section__label,
.section--credentials .section__label,
.section--philosophy .section__label,
.section--connection .section__label,
.section--story .section__label,
.section--personal .section__label,
.section--community .section__label {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-normal);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text-dark);
}

/* Override story label for white text on blurred dark background. */
.section--story .section__label {
    color: var(--color-white);
}

/* Centered section headers — constrained & spaced per mockup. */
.section--story .section__header--center {
    max-width: var(--container-sm);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: 0;
}

.section--story .section__title {
    font-size: var(--fs-3xl);
    margin-bottom: var(--space-lg);
}

@media (min-width: 1024px) {
    .section--story .section__title {
        font-size: 6rem;
        line-height: 1.2;
    }
}

/* ==========================================================================
   7. Mobile responsive adjustments
   ========================================================================== */
@media (max-width: 639px) {
    .two-col__title {
        font-size: var(--fs-2xl);
        line-height: var(--lh-tight);
    }

    .section--story .section__title {
        font-size: var(--fs-2xl);
    }
}