/* ==========================================================================
   Service area row on the listing page (owner request 2026-10-20, docs/IP-Reference.md section BB)
   ==========================================================================
   One more icon + text row in the listing page's header card, under the address: the map icon and
   "Highland Park, IL · Glencoe, IL · Northfield, IL · ...", two lines at most with an ellipsis, and a
   "Show all (N)" button (wired by the small script next to the markup in web/listing-detail.blade.php,
   and shown only when the list really is cut off).

   The row itself is the address row's own markup (.company_address__row: the 20px icon column and the
   text, see web.css), so its look is that one's. This file holds only what is new - the clamp, the button
   and the gap under the row - and every selector starts from a class that exists only on this row, so no
   other page or component can be touched by it. Loaded by web/listing-detail.blade.php alone.
   Only tokens (tokens.css); no colour or size of its own. */

#company .company-page-info .company-preamble-content .company_service_area {
    margin-bottom: var(--space-1, 4px);
}

.company_service_area__list {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* "Show all" pressed: the whole list, as many lines as it needs. */
.company_service_area.is-open .company_service_area__list {
    display: block;
    -webkit-line-clamp: none;
    overflow: visible;
}

.company_service_area__toggle {
    display: block;
    margin: var(--space-1, 4px) 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--primary);
    text-align: left;
    text-decoration: underline;
    cursor: pointer;
}
/* the author rule above would otherwise beat the browser's own [hidden] */
.company_service_area__toggle[hidden] {
    display: none;
}
@media (hover: hover) {
    .company_service_area__toggle:hover {
        color: var(--link-hover);
    }
}
.company_service_area__toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}