/* Shared geometry. Appearance presets are loaded after this file. */
.directory-results,
.profile-main,
.profile-sidebar,
.profile-name,
.local-guide-layout > *,
.product-detail > *,
.footer-main > *,
.panel-content,
.panel-overview-grid > *,
.panel-overview-aside > *,
.panel-form-grid > *,
.commerce-job-search > *,
.commerce-job-card > *,
.commerce-quota > * {
    min-width: 0;
}

/* Give the filters their own card on every viewport, not just on phones. */
.directory-layout {
    grid-template-columns: 272px minmax(0, 1fr);
    align-items: start;
    gap: 28px;
}
.filter-sidebar,
html[data-theme] .filter-sidebar {
    align-self: start;
    background: transparent;
}
.filter-disclosure {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
}
.filter-title {
    gap: 8px;
    padding-bottom: 18px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
}
.filter-title > a { flex: none; font-size: 12px; color: var(--muted); }
.filter-form { gap: 18px; margin-top: 20px; }
.filter-form > label { min-width: 0; color: var(--ink); font-size: 14px; }
.filter-form select {
    min-width: 0;
    min-height: 46px;
    padding: 10px 12px;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}
.filter-form > label.checkbox-label { gap: 10px; align-items: flex-start; line-height: 1.65; }
.filter-form .checkbox-label input { width: 17px; height: 17px; margin: 3px 0 0; }
.filter-form > .button { min-height: 46px; white-space: normal; font-size: 14px; }
.sidebar-promo { padding: 25px; margin-top: 20px; }
.results-toolbar { min-height: 46px; flex-wrap: wrap; gap: 12px 20px; }
.results-toolbar > p { font-size: 14px; line-height: 1.75; }
.results-toolbar select { min-height: 44px; font-size: 13px; color: var(--ink); }
.search-section-title { flex-wrap: wrap; gap: 8px 18px; }
.search-section-title > span { font-size: 12px; }
.local-demo-note { font-size: 13px; line-height: 1.8; }
.search-understanding > div { overflow-wrap: anywhere; }

/* A card is one vertical flow: media, content, then the aligned footer. */
.company-grid { align-items: stretch; }
.company-card { display: flex; flex-direction: column; height: 100%; }
.company-grid .company-image {
    flex: none;
    height: auto;
    aspect-ratio: 16 / 10;
}
.company-image > a { display: block; }
.company-grid .company-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 18px 18px 0;
}
.company-card .card-category {
    align-items: flex-start;
    gap: 6px 12px;
    font-size: 12px;
    line-height: 1.6;
    min-height: 20px;
}
.company-card .rating { font-size: 13px; }
.company-card .rating small { font-size: 12px; }
.company-grid .company-card h3 {
    align-items: flex-start;
    min-height: 2.9em;
    margin-top: 10px;
    font-size: 17px;
    line-height: 1.45;
    letter-spacing: -.35px;
}
.company-grid .company-card h3 > a {
    display: -webkit-box;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.company-card h3 > .verified { flex: none; margin-top: 3px; }
.company-card-body > p {
    display: -webkit-box;
    min-height: 3.4em;
    margin: 8px 0 16px;
    font-size: 13px;
    line-height: 1.7;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.company-card-distance { margin: 0 0 14px; font-size: 12px; }
.company-grid .company-card-bottom {
    min-height: 64px;
    margin-top: auto;
    padding-block: 12px;
    gap: 10px;
    font-size: 12px;
    line-height: 1.55;
    border-color: var(--line);
}
.company-card-bottom > span {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}
.company-card-bottom > span > .icon { width: 14px; height: 14px; }
.company-card-bottom > a { width: 36px; height: 36px; }
.company-card-bottom > a > .icon { width: 15px; height: 15px; }
.favorite-button { width: 38px; height: 38px; }
.favorite-button .icon { width: 17px; height: 17px; }
.featured-badge { max-width: calc(100% - 68px); font-size: 10px; letter-spacing: .5px; }

.catalog-card { display: flex; flex-direction: column; min-width: 0; }
.catalog-card > a { flex: none; height: auto; aspect-ratio: 4 / 3; }
.catalog-card > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.catalog-card h3,
.commerce-job-card h2 { overflow-wrap: anywhere; }
.catalog-card p { margin-bottom: 18px; }
.catalog-bottom { margin-top: auto; flex-wrap: wrap; }
.catalog-bottom > a { flex: none; margin-left: auto; }
.catalog-bottom strong { overflow-wrap: anywhere; }
.commerce-job-card footer { flex-wrap: wrap; }
.commerce-job-card footer > a { flex: none; margin-left: auto; }
.commerce-jobs-heading { flex-wrap: wrap; }
.simple-search { min-width: 0; }
.simple-search > input { min-width: 0; }
.search-form,
.simple-search,
.commerce-catalog-search { max-width: 100%; }
.instant-result strong { overflow-wrap: anywhere; }
.instant-heading > div { min-width: 0; }
.instant-heading > button { flex: none; }
.instant-all { flex-wrap: wrap; text-align: center; line-height: 1.7; }

.profile-name h1,
.page-heading h1,
.local-hero h1 { overflow-wrap: anywhere; }
.company-profile-top > form { flex: none; }
.tab-bar { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.tab-bar > button { flex: none; min-height: 46px; white-space: nowrap; }
.contact-line > div,
.contact-line > span { min-width: 0; overflow-wrap: anywhere; }
.form-stack > label,
.panel-field { min-width: 0; }
.form-stack :is(input, select, textarea),
.panel-field :is(input, select, textarea) { min-width: 0; max-width: 100%; }
.panel-list-toolbar { gap: 12px; }
.panel-search { min-width: 0; max-width: 100%; }
.panel-search input { min-width: 0; max-width: 100%; }
.panel-heading > div { min-width: 0; }
.panel-heading h1,
.panel-entity strong,
.panel-field > span { overflow-wrap: anywhere; }
.panel-table-wrap { min-width: 0; max-width: 100%; overscroll-behavior-x: contain; }
.panel-form-footer,
.panel-footnote { flex-wrap: wrap; }
.panel-pagination { gap: 12px; flex-wrap: wrap; }
.panel-company-grid { align-items: stretch; }
.panel-company-card { display: flex; flex-direction: column; min-width: 0; }
.panel-company-body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.panel-company-body h2 { overflow-wrap: anywhere; }
.panel-company-actions { margin-top: auto; flex-wrap: wrap; }
.commerce-sponsor-form { flex-wrap: wrap; }
.commerce-quota > .panel-button { white-space: normal; text-align: center; }

@media (min-width: 761px) {
    .filter-disclosure > .filter-mobile-summary { display: none; }
}
@media (max-width: 1200px) and (min-width: 761px) {
    .directory-layout { grid-template-columns: 248px minmax(0, 1fr); gap: 24px; }
    .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .filter-disclosure { padding: 20px; }
    .filter-title { flex-wrap: wrap; }
}
@media (max-width: 960px) and (min-width: 761px) {
    .directory-layout { grid-template-columns: 224px minmax(0, 1fr); gap: 20px; }
    .filter-disclosure { padding: 18px; }
    .company-grid .company-card-body { padding-inline: 15px; }
    .company-grid .company-card h3 { font-size: 16px; }
    .company-card .card-category { font-size: 12px; }
    .profile-layout { grid-template-columns: minmax(0, 1fr) 260px; }
    .company-profile-top { flex-wrap: wrap; }
}
@media (max-width: 760px) {
    .directory-layout { display: block; padding-top: 22px; }
    .filter-sidebar { margin-bottom: 24px; }
    .filter-disclosure { padding: 18px; border-radius: 12px; }
    .filter-disclosure > .filter-title { display: none; }
    .filter-mobile-summary { min-height: 30px; gap: 8px; }
    .filter-mobile-summary > strong { font-size: 15px; }
    .filter-mobile-summary > span { font-size: 12px; }
    .filter-disclosure[open] > .filter-mobile-summary { padding-bottom: 16px; }
    .filter-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .filter-form > label.checkbox-label { grid-column: 1 / -1; font-size: 14px; }
    .filter-form select { min-height: 46px; font-size: 16px; }
    .filter-form > .button { min-height: 48px; font-size: 15px; }
    .sidebar-promo { display: none; }
    .listing-grid,
    .local-company-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .company-grid .company-card-body { padding: 19px 19px 0; }
    .company-grid .company-card h3 { min-height: 0; font-size: 19px; }
    .company-card .card-category { font-size: 13px; }
    .company-card .rating { font-size: 14px; }
    .company-card-body > p { font-size: 14px; min-height: 0; }
    .company-grid .company-card-bottom { font-size: 13px; min-height: 68px; }
    .company-card-bottom > a { width: 42px; height: 42px; }
    .favorite-button { width: 42px; height: 42px; }
    .results-toolbar > p { font-size: 14px; }
    .results-toolbar select { font-size: 14px; max-width: none; }
    .search-understanding strong { font-size: 14px; }
    .search-understanding p { font-size: 13px; }
    .search-intent-chips > span { font-size: 12px; }
    .local-demo-note { font-size: 12px; }
    .search-form input,
    .search-form select,
    .simple-search input,
    .form-stack :is(input, select, textarea),
    .panel-field :is(input, select, textarea) { font-size: 16px; }
    .search-form > .button,
    .simple-search > .button { min-height: 44px; }
    .profile-layout { grid-template-columns: minmax(0, 1fr); }
    .company-profile-top { gap: 16px; }
    .profile-name h1 { font-size: 29px; line-height: 1.35; }
    .tab-bar { justify-content: flex-start; gap: 22px; padding-bottom: 2px; }
    .tab-bar > button { font-size: 14px; }
    .product-main-image { height: auto; max-height: 430px; aspect-ratio: 4 / 3; }
    .map-links > .button { white-space: normal; line-height: 1.6; }
    .mobile-business-actions .button { padding-inline: 9px; font-size: 13px; }
    .panel-topline { gap: 12px; flex-wrap: wrap; }
    .panel-heading > .panel-button { min-height: 44px; }
    .panel-list-toolbar { display: flex; flex-wrap: wrap; }
    .panel-list-toolbar .panel-search { flex: 1 1 180px; }
    .panel-list-toolbar .panel-search input { width: 100%; }
    .panel-list-toolbar .panel-filter { margin-left: 0; min-width: 0; }
    .panel-filter select { max-width: 100%; min-height: 42px; font-size: 14px; }
    .panel-search input { min-height: 42px; font-size: 16px; }
    .panel-form-footer { gap: 12px; }
    .panel-form-footer .panel-button { min-height: 44px; white-space: normal; }
    .panel-pagination > div { flex-wrap: wrap; }
    .panel-footnote { gap: 8px 18px; }
    .panel-footnote > span:last-child { text-align: left; }
    .panel-company-grid { grid-template-columns: minmax(0, 1fr); }
    .panel-company-image { height: auto; aspect-ratio: 16 / 9; }
    .panel-company-actions .panel-button { min-height: 40px; font-size: 13px; }
}
@media (max-width: 600px) {
    .company-grid { grid-template-columns: minmax(0, 1fr); }
    .section-heading { flex-wrap: wrap; gap: 15px; }
    .section-heading .text-link { white-space: normal; }
    .hero-bottom > div { gap: 12px 20px; }
    .trust-line { flex-wrap: wrap; }
    .trust-line > a { margin-left: 0; }
    .footer-bottom > div { flex-wrap: wrap; }
}
@media (max-width: 420px) {
    .container { width: calc(100% - 28px); }
    .filter-form { grid-template-columns: minmax(0, 1fr); }
    .filter-form > label { grid-column: 1 / -1; }
    .filter-mobile-summary > span { display: none; }
    .filter-mobile-summary > .icon:last-child { margin-left: auto; }
    .search-understanding { padding: 15px; }
    .search-understanding > .text-link { top: 10px; right: 10px; }
    .simple-search { flex-wrap: wrap; gap: 10px; }
    .simple-search > input { flex: 1 1 calc(100% - 40px); }
    .simple-search > .button { flex: 1; }
    .panel-metrics { grid-template-columns: minmax(0, 1fr); }
    .panel-overview-aside { grid-template-columns: minmax(0, 1fr); }
    .commerce-job-card { padding: 21px; }
    .commerce-job-card h2 { font-size: 22px; }
    .commerce-job-card footer { gap: 12px; }
    .commerce-package-card { padding: 22px; }
}

/* The public navigation needs its drawer before the tablet header crowds. */
@media (min-width: 761px) and (max-width: 1100px) {
    .site-header { z-index: auto; }
    .header-inner { gap: 18px; }
    .header-actions { flex: none; gap: 12px; margin-left: auto; }
    .header-actions > .login-link,
    .header-actions > .header-logout { display: none; }
    .mobile-menu-button {
        display: grid;
        flex: none;
        place-items: center;
        width: 44px;
        height: 44px;
        padding: 0;
    }
    .mobile-menu-button > .icon { width: 23px; height: 23px; }
    .main-nav {
        display: flex;
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 120;
        width: min(340px, 88vw);
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: 24px 20px;
        background: var(--white);
        border: 0;
        border-left: 1px solid var(--line);
        box-shadow: -12px 0 45px #102b1c1a;
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
        overflow-y: auto;
        overscroll-behavior: contain;
        visibility: hidden;
        transform: translateX(100%);
        transition: transform .22s ease, visibility .22s ease;
    }
    .main-nav.open { visibility: visible; transform: translateX(0); }
    .mobile-nav-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding-bottom: 21px;
        margin-bottom: 10px;
        border-bottom: 1px solid var(--line);
    }
    .mobile-nav-heading > strong { font-size: 22px; color: var(--green); font-weight: 750; }
    .mobile-menu-close {
        display: grid;
        flex: none;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid var(--line);
        border-radius: 9px;
        background: var(--green-light);
        color: var(--green);
    }
    .mobile-menu-close > .icon { width: 21px; height: 21px; }
    .main-nav > a { min-height: 47px; padding: 14px 12px; font-size: 15px; white-space: normal; }
    .main-nav > a:after { display: none; }
    .main-nav > a.active { border-radius: 7px; }
    .main-nav .nav-dropdown > summary { min-height: 47px; padding: 14px 12px; font-size: 15px; }
    .main-nav .nav-dropdown > div {
        position: static;
        margin-bottom: 5px;
        border: 0;
        box-shadow: none;
        background: var(--green-light);
    }
    .main-nav .nav-dropdown > div > a { font-size: 14px; padding: 12px; }
    .main-nav > .mobile-account-link {
        display: flex;
        align-items: center;
        min-height: 47px;
        margin-top: 10px;
        padding: 16px 12px 12px;
        border-top: 1px solid var(--line);
    }
    .main-nav > .mobile-account-link > .icon { width: 16px; height: 16px; }
    .main-nav .nav-logout { padding: 6px 0; font-size: 14px; }
}
@media (max-width: 760px) {
    .header-actions > .theme-toggle { display: none; }
    .header-inner { gap: 8px; }
    .header-actions { flex: none; gap: 8px; margin-left: auto; }
    .mobile-menu-button { flex: none; width: 42px; height: 42px; }
    .mobile-menu-button > .icon { width: 23px; height: 23px; }
}
@media (max-width: 420px) {
    .header-actions > a.button { display: none; }
}
@media (max-width: 380px) {
    .search-form { grid-template-columns: minmax(0, 1fr); }
    .search-form > .search-city { grid-column: 1; width: 100%; padding: 5px 8px; }
    .search-form > .button { width: 100%; min-height: 44px; }
}