/*
 * Single-teacher card (partials/teacher-spotlight.php), used by
 * sections/course-teachers.php when a course has exactly one teacher. The
 * portrait is shown clean - no scrim, no blur - and the text sits on the
 * white plate next to it. Tags are the same pill look as the client's
 * reference card.
 */

.teacher-spotlight {
    --bs-gutter-x: 3.33vw;
    --bs-gutter-y: 0;
    margin: 0;
    padding: 2.08vw;
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.teacher-spotlight__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius);
}

.teacher-spotlight__label {
    margin: 0 0 0.63vw;
    font-size: 0.83vw;
    font-weight: 700;
    letter-spacing: 0.1vw;
    text-transform: uppercase;
    color: var(--color-accent);
}

.teacher-spotlight__name {
    margin: 0 0 1.04vw;
    font-size: 2.08vw;
    font-weight: 700;
    color: var(--color-primary);
}

.teacher-spotlight__bio {
    margin: 0 0 1.46vw;
    font-size: 1.15vw;
    line-height: 1.6;
    color: var(--color-text);
}

.teacher-spotlight__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.52vw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.teacher-spotlight__tag {
    padding: 0.42vw 0.83vw;
    border-radius: 0.52vw;
    background: var(--color-surface-muted);
    font-size: 0.83vw;
    color: var(--color-text-muted);
}

@media only screen and (max-width: 767.98px) {
    .teacher-spotlight__body {
        margin-top: 5.33vw;
    }

    .teacher-spotlight {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        padding: 4.27vw;
    }

    .teacher-spotlight__label {
        margin: 0 0 2.13vw;
        font-size: 3.2vw;
        letter-spacing: 0.4vw;
    }

    .teacher-spotlight__name {
        margin: 0 0 3.2vw;
        font-size: 6.4vw;
    }

    .teacher-spotlight__bio {
        margin: 0 0 4.27vw;
        font-size: 4vw;
    }

    .teacher-spotlight__tags {
        gap: 2.13vw;
    }

    .teacher-spotlight__tag {
        padding: 1.6vw 3.2vw;
        border-radius: 2.13vw;
        font-size: 3.47vw;
    }
}