/*
 * Recruiter Directory section.
 *
 * Paired with views/sections/recruiter_directory.twig and the Baker Recruiter
 * Directory plugin. Scoped to .section-recruiter_directory so nothing here can
 * leak into other sections.
 */

.section-recruiter_directory .recruiter-directory-intro {
    margin-bottom: 2rem;
}

.section-recruiter_directory .recruiter-group {
    margin-bottom: 2.5rem;
}

/* Inter Bold, orange. Michroma is reserved for graphic/accent use, so the
   heading takes the theme's standard heading stack via .ff-inter in the twig. */
.section-recruiter_directory .recruiter-group-title {
    margin-bottom: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
}

.section-recruiter_directory .recruiter-card {
    margin-bottom: 2.5rem;
}

/* Centred on small screens, left-aligned from lg up -- mirrors the live cards,
   which are marked up as "text-center text-lg-left". */
.section-recruiter_directory .recruiter-card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

@media screen and (min-width: 992px) {
    .section-recruiter_directory .recruiter-card-inner {
        align-items: flex-start;
        text-align: left;
    }
}

.section-recruiter_directory .recruiter-photo {
    width: 180px;
    height: 180px;
    margin-bottom: 1rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: #e4e6e8;
    flex-shrink: 0;
}

.section-recruiter_directory .recruiter-photo img {
    width: 100%;
    height: 100%;
    /* Guarantees the circle regardless of the source image's aspect ratio, so
       headshots uploaded before the bcrd_headshot crop existed still look right. */
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* The default headshot is a full-bleed branded tile, not a line icon, so it fills
   the circle exactly like a real photo does -- letterboxing it would show the grey
   frame around a floating orange square. */
.section-recruiter_directory .recruiter-photo.is-placeholder img {
    object-fit: cover;
    object-position: center;
}

.section-recruiter_directory .recruiter-name {
    font-size: 1.15rem;
    line-height: 1.3;
}

.section-recruiter_directory .recruiter-coverage {
    font-size: 0.95rem;
    line-height: 1.45;
    max-width: 32ch;
}

/* Contact row: envelope icon, then the phone number if there is one. */
.section-recruiter_directory .recruiter-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 1rem;
}

@media screen and (min-width: 992px) {
    .section-recruiter_directory .recruiter-contact {
        justify-content: flex-start;
    }
}

/* Colour and underline are the theme's job: a.color-orange-link already sets
   #f48f24, removes text-decoration, and draws a 2px bottom border that turns
   teal on hover. Setting text-decoration here as well produced two underlines
   at once, so only the weight is set locally. */
.section-recruiter_directory .recruiter-contact-link {
    font-weight: bold;
    white-space: nowrap;
}

.section-recruiter_directory .recruiter-contact-link .fal {
    font-size: 1.15rem;
    vertical-align: middle;
}

/* Matches .recruiter-coverage so the number reads as part of the card's body copy
   rather than jumping to the theme's base size. The icon keeps its own 1.15rem
   from the rule above -- that is set in rem, so it does not inherit this. */
.section-recruiter_directory .recruiter-contact-phone {
    font-size: 0.95rem;
    line-height: 1.45;
}

.section-recruiter_directory .recruiter-contact-phone .fal {
    margin-right: 0.4rem;
}

/* Neither contact link is underlined: the theme's a.color-orange-link draws a 2px
   bottom border on hover, which under the bare envelope glyph read as a stray dash
   and under the phone number competed with the card's body copy. The colour shift
   to teal carries the affordance instead. */
.section-recruiter_directory .recruiter-contact-link,
.section-recruiter_directory .recruiter-contact-link:hover,
.section-recruiter_directory .recruiter-contact-link:focus {
    border-bottom-color: transparent;
    padding-bottom: 0;
}

/* The theme turns a.color-orange-link teal on hover but pins any span inside it to
   orange with `color:#f48f24!important` and ships no matching :hover span rule --
   so the icon changed colour and the number did not. Only !important can beat that.
   Hover only: on keyboard focus the icon stays orange, so the number should too, and
   the outline below is the indicator there. */
.section-recruiter_directory .recruiter-contact-phone:hover .recruiter-phone-number {
    color: #00819e !important;
}

/* The underline used to double as the keyboard focus indicator. With it gone, both
   links take the same outline -- a hover-only colour shift is not a focus style. */
.section-recruiter_directory .recruiter-contact-link:focus-visible {
    outline: 2px solid #00819e;
    outline-offset: 2px;
}

@media screen and (max-width: 575px) {
    .section-recruiter_directory .recruiter-photo {
        width: 140px;
        height: 140px;
    }

    .section-recruiter_directory .recruiter-card {
        margin-bottom: 2rem;
    }
}