/*
 * Reusable candidate card
 * -----------------------------------------------------------------------------
 * Makes the avatar + identity header of a candidate card respond to the CARD's
 * own width instead of the viewport width (via CSS container queries). This lets
 * the same card sit in a narrow sidebar column or a wide panel and lay out
 * sensibly in both, regardless of screen size or browser zoom.
 *
 * Usage (add these classes to the existing Phoenix/Bootstrap markup):
 *   .card              -> add  candidate-info-card        (marks the card a size container)
 *   header d-flex row  -> add  candidate-info-card-head   (avatar + identity row)
 *   avatar wrapper     -> add  candidate-info-card-avatar (also keep flex-shrink-0)
 *   identity flex-1    -> add  min-w-0 (Phoenix utility)  so long name/title can shrink
 *
 * The class is deliberately namespaced (candidate-info-card, not candidate-card)
 * to avoid colliding with the unrelated pre-existing .candidate-card rules in the
 * candidate_search demo and the candidates list page, which are not meant to become
 * size containers.
 *
 * The wide/default layout uses plain theme classes (d-flex align-items-start,
 * avatar me-3, etc). This file only adds the narrow-card override.
 */

.candidate-info-card {
    container-type: inline-size;
}

/* When the card itself is narrow, stack the avatar above the identity and center.
 * !important is required because Bootstrap's align-items-start / me-3 utilities
 * are themselves !important and would otherwise win. */
@container (max-width: 260px) {
    .candidate-info-card-head {
        flex-direction: column;
        align-items: center !important;
        text-align: center;
    }

    .candidate-info-card-avatar {
        margin-right: 0 !important;
        margin-bottom: 0.5rem;
    }
}