/* ==========================================================================
   The provider card

   One card, two pages: the result list on /listings and the header card on a
   provider's own profile page. Both use the classes below, so the two cannot
   drift apart - a change to the card is a change in one file, and the profile
   page keeps the look of the list it is reached from.

   It is a stylesheet rather than an inline <style> block so the htmx-swapped
   copy of the result list keeps its styles: a swap replaces the markup, not
   the page head.
   ========================================================================== */

/* The photo sits beside the text of a full-width card, so the row stays a
   row at every width. */
.listing-card > .d-flex {
    flex-direction: row;
}

.listing-card__thumb {
    width: 180px;
    height: 180px;
    object-fit: cover;
    flex: 0 0 auto;
    border-right: 1px solid #eef0f4;
}

.listing-card__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f6fa;
    color: #8898aa;
    font-size: 3.25rem;
    font-weight: 700;
}

/* The title is a link on the result card and plain text on the profile page,
   so only the link carries the hover treatment. */
.listing-card__title {
    font-size: 1.7rem;
}

.listing-card__title a {
    color: inherit;
}

.listing-card__title a:hover,
.listing-card__title a:focus {
    color: #0d6efd;
    text-decoration: none;
}

/* Bootstrap 4 has no `me-*` utility; the theme predates logical properties,
   so spacing is explicit per class. */
.listing-card__badge {
    margin-right: .25rem;
}

/* The verified mark is a wide graphic (412x122), so it is sized as a box and
   the artwork is fitted inside it: whatever the artwork actually is, it keeps
   its proportions instead of being stretched. */
.listing-card__verified {
    width: 48px;
    height: 14px;
    object-fit: contain;
    object-position: left center;
    vertical-align: -4px;
    margin-right: .35rem;
}

/* The rating is the quietest thing on the card, because it is the same for
   everyone until reviews land. */
.listing-card__rating {
    color: #000000;
    margin-right: .4rem;
    white-space: nowrap;
    font-size: 13px;
}

.listing-card__rating i {
    margin-right: .15rem;
    font-size: .95em;
    vertical-align: -1px;
}

/* The address line sits above the services and carries a marker so it is
   read as a place rather than as another sentence of text. */
.listing-card__address {
    margin-bottom: .35rem;
    font-size: 13px;
    font-weight: 600;
}

.listing-card__address i {
    margin-right: .2rem;
    font-size: 1em;
    font-weight: 800;
}

/* The service badges are links to the landing page that lists every provider
   offering that service in this city, so they behave like links: they react
   to hover AND to keyboard focus, not only to a pointer. The badge utilities
   are !important in Bootstrap 4, so the hover colours have to be too. */
.services-list__item {
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

a.services-list__item:hover,
a.services-list__item:focus {
    background-color: #0d6efd !important;
    color: #fff !important;
    transform: translateY(-1px);
}

a.services-list__item:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 1px;
}

.listing-card__actions .btn {
    margin-right: .25rem;
    margin-bottom: .25rem;
    padding: 4px 6px;
    font-size: 14px;
    font-weight: bold;
}

/* The icon sits inside the button, so it needs a hair of space between itself
   and the label. */
.listing-card__actions .btn i {
    margin-right: .3rem;
    font-size: .95em;
    vertical-align: -1px;
}

/* The WhatsApp mark is an inline SVG rather than a glyph from the icon font,
   so it needs the same spacing the font icons get. */
.listing-card__actions .btn svg {
    width: 14px;
    height: 14px;
    margin-right: .3rem;
    vertical-align: -2px;
}