/* ===================================================================
   doctors-dept.css — the search band on Find a Doctor.

   The consultant cards themselves stay in doctors.css. This file holds
   the breadcrumb, the labelled speciality and name fields, and the note
   shown under the grid.
   =================================================================== */

/* ---------- breadcrumb ---------- */
.xp-crumb {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: .85rem;
    font-weight: 600;
    color: var(--adv-ink-muted);
}

.xp-crumb a {
    color: var(--adv-crimson-700);
}

.xp-crumb a:hover {
    text-decoration: underline;
}

.xp-crumb i {
    font-size: .7rem;
    color: var(--adv-ink-muted);
}

.xp-crumb span {
    color: var(--adv-ink);
}

/* ---------- the search band ---------- */
.xp-head {
    align-items: flex-end;
}

.xp-tools {
    gap: 14px;
}

/* a stacked label needs the field to become a column; the icon then
   sits against the control rather than the label */
.xp-field {
    position: relative;
    flex-direction: column;
    align-items: stretch;
}

.xp-field>i {
    top: auto;
    bottom: 18px;
}

.xp-field-label {
    display: block;
    margin-bottom: 7px;
    font-family: var(--adv-font-head);
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--adv-ink-muted);
}

/* speciality is the main control, as on a hospital's find-a-doctor page */
.xp-field.is-lead {
    min-width: 320px;
}

.xp-field.is-lead select {
    font-weight: 600;
}

@media (max-width: 720px) {
    .xp-field.is-lead {
        min-width: 0;
        width: 100%;
    }
}

/* ---------- note under the grid ---------- */
.dept-note {
    margin-top: 26px;
    padding: 16px 18px;
    border-radius: var(--adv-radius);
    background: var(--adv-blush);
    border: 1px dashed rgba(142, 27, 46, .25);
    color: var(--adv-ink-body);
    font-size: .9rem;
    line-height: 1.6;
}

/* Dr. Kapoor's card uses the full-length coat portrait: it is taller than
   the old head-and-shoulders crop, so it is anchored on her face rather
   than centred, and sized to sit in the circular frame the same way. */
/* Her portrait is a tall 2:3 studio shot, so a square crop loses either
   the top of her head or the logo on her sleeve. The whole frame is shown
   instead, on a ground sampled from the photo's own backdrop so the join
   is invisible. */
#dr-deeksha-kapoor .xp-photo {
    background: linear-gradient(160deg, #EDF1F7 0%, #FCFBFE 45%, #DDE4EE 100%);
}

#dr-deeksha-kapoor .xp-photo img {
    width: 100%;
    height: 100%;
    bottom: 0;
    object-fit: contain;
    object-position: 50% 50%;
}

#dr-deeksha-kapoor:hover .xp-photo img {
    transform: translate(-50%, 0) scale(1.04);
}

/* Dr. Agniva Mukhopadhyay: same treatment as Dr. Deeksha Kapoor -- the
   portrait is contained in the square and centred, so nothing is clipped.
   The ground stays sampled from the photo's own white backdrop. */
#dr-agniva-mukhopadhyay .xp-photo {
    background: linear-gradient(160deg, #F4F6FA 0%, #FCFBFE 45%, #E7EBF2 100%);
}

#dr-agniva-mukhopadhyay .xp-photo img {
    width: 100%;
    height: 100%;
    bottom: 0;
    object-fit: contain;
    object-position: 50% 50%;
    transform: translate(-50%, 0);
}

#dr-agniva-mukhopadhyay:hover .xp-photo img {
    transform: translate(-50%, 0) scale(1.04);
}

/* Dr. Ratan Naskar: same treatment as Dr. Deeksha Kapoor -- portrait contained and
   centred in the square tile, on a ground sampled from its white backdrop. */
#dr-ratan-naskar .xp-photo {
    background: linear-gradient(160deg, #F4F6FA 0%, #FCFBFE 45%, #E7EBF2 100%);
}

#dr-ratan-naskar .xp-photo img {
    width: 100%;
    height: 100%;
    bottom: 0;
    object-fit: contain;
    object-position: 50% 50%;
    transform: translate(-50%, 0);
}

#dr-ratan-naskar:hover .xp-photo img {
    transform: translate(-50%, 0) scale(1.04);
}

/* Dr. Alapan Halder: same treatment as the other white-ground cut-outs --
   portrait contained and centred so the square tile never clips the head. */
#dr-alapan-halder .xp-photo {
    background: linear-gradient(160deg, #F4F6FA 0%, #FCFBFE 45%, #E7EBF2 100%);
}

#dr-alapan-halder .xp-photo img {
    width: 100%;
    height: 100%;
    bottom: 0;
    object-fit: contain;
    object-position: 50% 50%;
    transform: translate(-50%, 0);
}

#dr-alapan-halder:hover .xp-photo img {
    transform: translate(-50%, 0) scale(1.04);
}

/* Dr. Suman Meyur: same treatment as the other white-ground cut-outs. */
#dr-soman-mayur .xp-photo {
    background: linear-gradient(160deg, #F4F6FA 0%, #FCFBFE 45%, #E7EBF2 100%);
}

#dr-soman-mayur .xp-photo img {
    width: 100%;
    height: 100%;
    bottom: 0;
    object-fit: contain;
    object-position: 50% 50%;
    transform: translate(-50%, 0);
}

#dr-soman-mayur:hover .xp-photo img {
    transform: translate(-50%, 0) scale(1.04);
}

/* Dr. Prabir Basu: same treatment as the other white-ground cut-outs. */
#dr-prabir-basu .xp-photo {
    background: linear-gradient(160deg, #F4F6FA 0%, #FCFBFE 45%, #E7EBF2 100%);
}

#dr-prabir-basu .xp-photo img {
    width: 100%;
    height: 100%;
    bottom: 0;
    object-fit: contain;
    object-position: 50% 50%;
    transform: translate(-50%, 0);
}

#dr-prabir-basu:hover .xp-photo img {
    transform: translate(-50%, 0) scale(1.04);
}

/* Dr. Abhishek Naskar: same treatment as the other white-ground cut-outs. */
#dr-abhishek-naskar .xp-photo {
    background: linear-gradient(160deg, #F4F6FA 0%, #FCFBFE 45%, #E7EBF2 100%);
}

#dr-abhishek-naskar .xp-photo img {
    width: 100%;
    height: 100%;
    bottom: 0;
    object-fit: contain;
    object-position: 50% 50%;
    transform: translate(-50%, 0);
}

#dr-abhishek-naskar:hover .xp-photo img {
    transform: translate(-50%, 0) scale(1.04);
}

/* Dr. Joydeep Mondal: same treatment as the other white-ground cut-outs. */
#dr-joydeep-mondal .xp-photo {
    background: linear-gradient(160deg, #F4F6FA 0%, #FCFBFE 45%, #E7EBF2 100%);
}

#dr-joydeep-mondal .xp-photo img {
    width: 100%;
    height: 100%;
    bottom: 0;
    object-fit: contain;
    object-position: 50% 50%;
    transform: translate(-50%, 0);
}

#dr-joydeep-mondal:hover .xp-photo img {
    transform: translate(-50%, 0) scale(1.04);
}

/* Dr. Suday Mukhopadhyay: same treatment as the other white-ground cut-outs. */
#dr-suday-mukhopadhyay .xp-photo {
    background: linear-gradient(160deg, #F4F6FA 0%, #FCFBFE 45%, #E7EBF2 100%);
}

#dr-suday-mukhopadhyay .xp-photo img {
    width: 100%;
    height: 100%;
    bottom: 0;
    object-fit: contain;
    object-position: 50% 50%;
    transform: translate(-50%, 0);
}

#dr-suday-mukhopadhyay:hover .xp-photo img {
    transform: translate(-50%, 0) scale(1.04);
}

/* Dr. Pradyumna Chakraborty: same treatment as the other white-ground cut-outs. */
#dr-pradyumna-chakraborty .xp-photo {
    background: linear-gradient(160deg, #F4F6FA 0%, #FCFBFE 45%, #E7EBF2 100%);
}

#dr-pradyumna-chakraborty .xp-photo img {
    width: 100%;
    height: 100%;
    bottom: 0;
    object-fit: contain;
    object-position: 50% 50%;
    transform: translate(-50%, 0);
}

#dr-pradyumna-chakraborty:hover .xp-photo img {
    transform: translate(-50%, 0) scale(1.04);
}

/* Dr. Abhishek Sinha: same treatment as the other white-ground cut-outs. */
#dr-abhishek-sinha .xp-photo {
    background: linear-gradient(160deg, #F4F6FA 0%, #FCFBFE 45%, #E7EBF2 100%);
}

#dr-abhishek-sinha .xp-photo img {
    width: 100%;
    height: 100%;
    bottom: 0;
    object-fit: contain;
    object-position: 50% 50%;
    transform: translate(-50%, 0);
}

#dr-abhishek-sinha:hover .xp-photo img {
    transform: translate(-50%, 0) scale(1.04);
}