/* ================================================================
   HOMEPAGE ORCHESTRATOR STYLES — Phase A Spacing Audit
   
   Design System:
   - Container:  max-width 1400px (matches .site-container)
   - Spacing:    16-20px mobile / 24px tablet / 32px desktop
   - Radius:     var(--card-radius, 16px)
   - Shadows:    var(--card-shadow) / var(--card-shadow-hover)
   - Colors:     all var() have hardcoded fallbacks
   ================================================================ */

/* ================================================================
   1. UNIFIED CONTENT CONTAINER
   Every section sits inside .ail-app-content.site-container,
   which inherits the global max-width. Hero breaks out full-bleed.
   ================================================================ */
.ail-app-content {
    padding: 0;
}

@media (min-width: 640px) {
    .ail-app-content {
        padding-bottom: 0;
    }
}

@media (min-width: 1024px) {
    .ail-app-content {
        padding-bottom: 0;
    }
}

/* All .pm-section and .hp-section get horizontal padding to match
   the .site-container gutter (16px). The hero is excluded. */
.pm-section,
.hp-section {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* ================================================================
   2. RESPONSIVE SECTION SPACING
   16-20px mobile → 24px tablet → 32px desktop
   ================================================================ */
.pm-section {
    margin-bottom: var(--space-md);
}

@media (min-width: 640px) {
    .pm-section {
        margin-bottom: var(--space-lg);
    }
}

@media (min-width: 1024px) {
    .pm-section {
        margin-bottom: var(--space-section);
    }
}

/* Section titles */
.ail-section-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary, #1e293b);
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: -0.5px;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .ail-section-title {
        font-size: 20px;
        margin-bottom: var(--space-sm);
    }
}

@media (min-width: 1024px) {
    .ail-section-title {
        font-size: 24px;
        margin-bottom: var(--space-md);
    }
}

/* Unified App Surface */
.pm-app-surface {
    background: var(--bg-color, #f8fafc);
    border-radius: 24px 24px 0 0;
    padding: 20px 20px 20px 20px;
    /* Native app spacing */
    margin-top: -20px;
    position: relative;
    z-index: 20;
    padding-top: var(--space-lg);
    padding-bottom: 20px;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.08);
}

@media (min-width: 640px) {
    .pm-app-surface {
        padding-top: var(--space-section);
        padding-bottom: var(--space-section);
    }
}

@media (min-width: 1024px) {
    .pm-app-surface {
        padding-top: var(--space-section);
        padding-bottom: var(--space-section);
    }
}

/* ================================================================
   3. HEADER + HERO UNIFIED BLOCK
   Header shadow removed on homepage. Hero sits flush below
   with no border radius, as the App Surface overlaps it.
   ================================================================ */
body.home .ail-app-header,
body.page-template-default.home .ail-app-header {
    box-shadow: none;
    margin-bottom: 0;
    border-bottom: none;
    position: sticky;
}

/* Hero — compact, content-adaptive */
.pm-hero {
    border-radius: 0;
    padding: var(--space-lg) var(--space-sm) 64px;
    /* Extra bottom padding to account for the -48px overlap */
    text-align: center;
    position: relative;
    overflow: visible;
    margin: 0;
    margin-top: 0 !important;
    margin-bottom: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Removed z-index: 10; to prevent a restrictive stacking context. 
       This allows the .pm-search-bar dropdown to render above .pm-app-surface */
    z-index: auto !important;
}

@media (min-width: 640px) {
    .pm-hero {
        padding: var(--space-lg) var(--space-md) 80px;
    }
}

@media (min-width: 1024px) {
    .pm-hero {
        padding: var(--space-section) var(--space-lg) 96px;
    }
}

.pm-hero-content {
    position: relative;
    /* Removed z-index: 2; to release the stacking context and allow the search dropdown to escape over the ads */
    z-index: auto !important;
    max-width: 720px;
    margin: 0 auto;
}

@media (min-width: 1280px) {
    .pm-hero-content {
        max-width: 900px;
    }
}

.pm-hero h1 {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

@media (min-width: 640px) {
    .pm-hero h1 {
        font-size: 36px;
        letter-spacing: -1px;
    }
}

@media (min-width: 1024px) {
    .pm-hero h1 {
        font-size: 48px;
        margin-bottom: 16px;
    }
}

.pm-hero p {
    font-size: 15px;
    opacity: 0.9;
    margin: 0 0 20px 0;
    font-weight: 500;
    line-height: 1.5;
}

@media (min-width: 1024px) {
    .pm-hero p {
        font-size: 18px;
        margin-bottom: 28px;
    }
}

/* ================================================================
   1.5 TRUST BADGES SECTION
   ================================================================ */
.pm-trust-grid-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (min-width: 640px) {
    .pm-trust-grid-section {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

.pm-trust-item-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-color, #f8fafc);
    padding: var(--space-sm);
    border-radius: var(--card-radius, 16px);
    text-align: center;
    transition: var(--transition-smooth);
}

@media (hover: hover) and (pointer: fine) {
    .pm-trust-item-section:hover {
        transform: translateY(-2px);
        box-shadow: var(--card-shadow-hover);
    }
}

.pm-trust-icon-section {
    font-size: 24px;
    margin-bottom: 8px;
}

.pm-trust-text-section {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    line-height: 1.3;
}

/* Old Trust Grid (remove or leave commented out to avoid conflict) */
.pm-trust-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 20px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .pm-trust-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-top: 24px;
    }
}

.pm-trust-item {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    border-radius: var(--card-radius, 16px);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: var(--transition, all 0.3s ease);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.pm-trust-item:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}

.pm-trust-icon {
    font-size: 28px;
    line-height: 1;
}

.pm-trust-text {
    font-size: 12px;
    font-weight: 700;
    color: inherit;
    text-align: center;
    line-height: 1.3;
}

@media (min-width: 640px) {
    .pm-trust-text {
        font-size: 13px;
    }

    .pm-trust-icon {
        font-size: 32px;
    }
}

/* ── Search Bar ── */
.pm-search-bar {
    background: var(--card-bg, #ffffff);
    padding: 6px;
    border-radius: 16px;
    display: flex;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-width: 560px;
    margin: 0 auto;
    position: relative;
    z-index: 100;
}

@media (min-width: 640px) {
    .pm-search-bar {
        padding: 8px;
        border-radius: 20px;
    }
}

.pm-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    padding: var(--space-sm);
    font-size: 15px;
    border-radius: 12px;
    outline: none;
    color: var(--text-primary, #1e293b);
    background: transparent;
}

@media (min-width: 640px) {
    .pm-search-input {
        padding: var(--space-sm) var(--space-md);
        font-size: 16px;
        border-radius: 16px;
    }
}

.pm-search-btn {
    flex-shrink: 0;
    background: var(--btn-primary-bg, var(--primary-color)) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    border: none;
    border-radius: var(--btn-radius, 12px) !important;
    padding: 0 var(--space-md);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: var(--transition-smooth);
}

@media (min-width: 640px) {
    .pm-search-btn {
        border-radius: var(--card-radius, 16px);
        padding: 0 32px;
        font-size: 15px;
    }
}

.pm-search-btn:hover {
    background: var(--btn-hover-bg, var(--secondary-color)) !important;
    transform: translateY(-1px);
}

/* ================================================================
   4. CATEGORIES GRID
   Responsive grid — no cut cards, no empty whitespace.
   overflow:hidden prevents any card from bleeding out.
   ================================================================ */
.pm-cats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    overflow: hidden;
}

@media (min-width: 480px) {
    .pm-cats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
    }
}

@media (min-width: 640px) {
    .pm-cats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-sm);
    }
}

@media (min-width: 768px) {
    .pm-cats-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1024px) {
    .pm-cats-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1280px) {
    .pm-cats-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

.pm-cat-card {
    background: var(--card-bg, #ffffff);
    border-radius: 14px;
    padding: 16px 12px;
    text-align: center;
    text-decoration: none;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    height: 100%;
    box-sizing: border-box;
}

@media (min-width: 640px) {
    .pm-cat-card {
        border-radius: 16px;
        padding: 20px 16px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    }
}

@media (hover: hover) and (pointer: fine) {
    .pm-cat-card:hover {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
        transform: translateY(-3px);
        border-color: rgba(0, 0, 0, 0.08);
    }
}

.pm-cat-icon {
    font-size: 28px;
    line-height: 1;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color, #6C3BFF);
}

@media (min-width: 640px) {
    .pm-cat-icon {
        font-size: 32px;
        height: 40px;
    }
}

.pm-cat-name {
    color: var(--text-primary, #1e293b);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    margin: 0;
}

@media (min-width: 640px) {
    .pm-cat-name {
        font-size: 14px;
        font-weight: 700;
    }
}

/* ================================================================
   5. FEATURED SERVICES + RECENT LISTINGS (Cards & Scroll Row)
   No auto slider. Static responsive grid.
   ================================================================ */
.pm-scroll-row {
    display: flex;
    overflow-x: auto;
    gap: var(--space-sm);
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pm-scroll-row::-webkit-scrollbar {
    display: none;
}

@media (min-width: 640px) {
    .pm-scroll-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        overflow-x: visible;
        gap: 16px;
        padding-bottom: 0;
    }
}

@media (min-width: 768px) {
    .pm-scroll-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .pm-scroll-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

/* NOTE: Legacy homepage listing-card styles were removed here (.pm-card, .pm-service-*,
   .pm-card-view-all/.pm-va-*, .pm-badge-rating/.pm-badge-verified) along with a duplicate
   @keyframes shimmer. Every homepage/category/search listing card now renders through the ONE
   shared component in listing-card.css (.lbai-card / .lbai-slider) — no duplicate card CSS.
   (@keyframes shimmer still exists independently in core.css for skeleton loaders.) */

/* ================================================================
   6. CUSTOMER REVIEWS — Auto height, hide when empty
   ================================================================ */
/* Testimonials now run on the ONE shared slider engine (.lbai-hslider — see lbai-slider.css),
   which already stretches slides to equal height. The old .ail-testi-slider rules were removed. */

.pm-testi-card {
    background: var(--card-bg, #ffffff);
    border-radius: var(--card-radius, 16px);
    padding: var(--space-md);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    min-height: 0;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.pm-testi-stars {
    font-size: 14px;
    margin-bottom: 12px;
}

.pm-testi-text {
    font-size: 14px;
    color: var(--text-secondary, #64748b);
    line-height: 1.6;
    margin-bottom: 16px;
    font-style: italic;
}

.pm-testi-author {
    display: flex;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    padding-top: 14px;
    margin-top: auto;
}

.pm-testi-avatar {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: var(--btn-primary-bg, var(--primary-color)) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

.pm-testi-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

.pm-testi-loc {
    font-size: 12px;
    color: var(--text-secondary, #64748b);
    margin-top: 2px;
}

/* Reviews section collapses completely if empty */
.pm-section-reviews:empty,
[data-section="customer_reviews"]:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ================================================================
   7. ICON CONTRAST — Auto-contrast for header icons
   The PHP already computes --header-text via get_readable_color().
   These CSS rules ensure all header interactive elements inherit it.
   ================================================================ */
.ail-app-header .dashicons,
.ail-app-header .ail-notif-bell .dashicons,
.ail-app-header .ail-user-icon .dashicons {
    color: var(--header-text, #1e293b) !important;
}

.ail-app-header a {
    color: var(--header-text, #1e293b);
}

.ail-app-header .ail-loc-title,
.ail-app-header .ail-loc-sub,
.ail-app-header .ail-loc-sub i {
    color: var(--header-text, #1e293b) !important;
}

/* Footer icon contrast — inherits from inline footer text color */
.ail-brand-footer a,
.ail-brand-footer .dashicons {
    color: inherit;
}

/* ================================================================
   8. FOOTER WIDTH ALIGNMENT
   Footer background is full-width; content matches .site-container.
   Remove the hard-coded max-width: 1200px on the grid.
   ================================================================ */
.ail-brand-footer {
    width: 100%;
    margin-top: 0;
}

.ail-app-footer-inner.site-container {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* Override the core.css 1200px max-width so footer matches content */
.ail-footer-grid {
    max-width: none;
}

/* ================================================================
   9. SWIPER PAGINATION & FOOTER SPACING
   ================================================================ */

/* Pagination dots are owned by the ONE shared slider engine (.lbai-hslider__dots in
   lbai-slider.css). The old per-section .ail-testi-slider .swiper-pagination rule was removed. */

/* Last section before footer - remove bottom margin */
.ail-app-content>.pm-section:last-child,
.ail-app-content>.hp-section:last-child,
.pm-app-surface>.pm-section:last-child,
.pm-app-surface>.hp-section:last-child {
    margin-bottom: 0 !important;
}

/* Footer - kill excessive top margin from core.css */
body.home .ail-brand-footer {
    margin-top: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 16px !important;
}

body.home .ail-footer-grid {
    gap: 16px !important;
}

/* ================================================================
   ADS — Device-Specific Banner Visibility
   ================================================================ */
.hp-ads-device-banners {
    margin-bottom: 16px;
}

@media (min-width: 640px) {
    .hp-ads-device-banners {
        margin-bottom: 24px;
    }
}

@media (min-width: 1024px) {
    .hp-ads-device-banners {
        margin-bottom: 32px;
    }
}

.hp-ad-mobile {
    display: block;
}

.hp-ad-tablet {
    display: none;
}

.hp-ad-desktop {
    display: none;
}

@media (min-width: 640px) and (max-width: 1023px) {
    .hp-ad-mobile {
        display: none;
    }

    .hp-ad-tablet {
        display: block;
    }

    .hp-ad-desktop {
        display: none;
    }
}

@media (min-width: 1024px) {
    .hp-ad-mobile {
        display: none;
    }

    .hp-ad-tablet {
        display: none;
    }

    .hp-ad-desktop {
        display: block;
    }
}

.hp-ads-device-banners img {
    width: 100%;
    border-radius: var(--card-radius, 16px);
    display: block;
}

/* ================================================================
   HERO COUNTERS
   ================================================================ */
.pm-hero-counters>div {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .pm-hero-counters>div:hover {
        transform: translateY(-2px);
        opacity: 1;
    }
}

/* ================================================================
   AD CAMPAIGN SLIDER (Premium Marketplace Advertisement)
   Strictly enforced fixed-height compact banner.
   Mobile: 120px | Tablet: 180px | Desktop: 250px

   ROOT CAUSE FIX:
   1. front-page.php had inline aspect-ratio:21/9 on <img> — removed.
   2. core.css .swiper { padding-bottom:20px } at ≤991px inflates height — overridden.
   3. Swiper auto-height could inject inline height — blocked via CSS.
   All containers are height-locked with overflow:hidden.
   ================================================================ */

/* ── Elementor wrapper collapse (when rendered via Elementor widget) ── */
/* Ad sliders now carry the shared engine class (.lbai-hslider--ads); the dead legacy
   `.ail-ad-slider` class selectors were removed and the #ail-ad-slider id kept. */
.elementor-widget-container:has(.lbai-hslider--ads),
.elementor-widget-container:has(#ail-ad-slider),
.elementor-element:has(.lbai-hslider--ads),
.elementor-element:has(#ail-ad-slider),
.elementor-column:has(.lbai-hslider--ads),
.elementor-column:has(#ail-ad-slider),
.elementor-section:has(.lbai-hslider--ads),
.elementor-section:has(#ail-ad-slider) {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
}

/* ── Parent wrapper — collapse to content ── */
.ail-promotional-block,
.pm-section:has(.lbai-hslider--ads),
.pm-section:has(#ail-ad-slider) {
    margin-top: 0 !important;
    margin-bottom: var(--space-sm, 16px) !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    /* Height driven by the slider child, never larger */
    height: 120px !important;
}

@media (min-width: 640px) {

    .ail-promotional-block,
    .pm-section:has(.ail-ad-slider),
    .pm-section:has(#ail-ad-slider) {
        height: 180px !important;
    }
}

@media (min-width: 1024px) {

    .ail-promotional-block,
    .pm-section:has(.ail-ad-slider),
    .pm-section:has(#ail-ad-slider) {
        height: 250px !important;
    }
}

/* ── Slider container — locked height, kill core.css padding-bottom ── */
.ail-ad-slider,
#ail-ad-slider {
    border-radius: var(--card-radius, 16px) !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow: var(--card-shadow) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    /* Kills core.css .swiper padding-bottom:20px */
    padding-bottom: 0 !important;
    /* Explicit override for specificity */
    width: 100% !important;
    height: 120px !important;
    /* Mobile lock */
    max-height: 120px !important;
    min-height: 0 !important;
    display: block !important;
}

@media (min-width: 640px) {

    .ail-ad-slider,
    #ail-ad-slider {
        height: 180px !important;
        /* Tablet lock */
        max-height: 180px !important;
    }
}

@media (min-width: 1024px) {

    .ail-ad-slider,
    #ail-ad-slider {
        height: 250px !important;
        /* Desktop lock */
        max-height: 250px !important;
    }
}

/* ── Inner Swiper structure — must allow horizontal expansion ── */
.ail-ad-slider .swiper-wrapper,
#ail-ad-slider .swiper-wrapper {
    height: 100% !important;
    display: flex !important;
    box-sizing: content-box !important;
    /* Required by Swiper */
    margin: 0 !important;
    padding: 0 !important;
    /* REMOVED: overflow: hidden and width: 100% so cloned slides don't get clipped */
}

/* Let Swiper calculate the width of the slide via inline styles. Do NOT force width here. */
.ail-ad-slider .swiper-slide,
#ail-ad-slider .swiper-slide {
    height: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

/* The anchor tag and image can safely take 100% of the correctly sized slide */
.ail-ad-slider .swiper-slide a,
#ail-ad-slider .swiper-slide a {
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}



/* ── Images — fill & crop, no intrinsic sizing ── */
.ail-ad-slider img,
#ail-ad-slider img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    /* Kill any inherited or inline aspect-ratio */
    border-radius: 0 !important;
    /* Parent already has border-radius */
}

/* ── Pagination dots overlaid inside the banner ── */
.ail-ad-slider .swiper-pagination,
#ail-ad-slider .swiper-pagination {
    position: absolute !important;
    bottom: 10px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
    height: auto !important;
    /* Don't contribute to container height */
}

.ail-ad-slider .swiper-pagination-bullet,
#ail-ad-slider .swiper-pagination-bullet {
    background: var(--card-bg, #ffffff);
    opacity: 0.5;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.ail-ad-slider .swiper-pagination-bullet-active,
#ail-ad-slider .swiper-pagination-bullet-active {
    opacity: 1;
}

/* ================================================================
   MOBILE UI PREMIUM REFACTOR (max-width: 767px)
   Remove nested box design: Section -> Inner White Box -> Content
   ================================================================ */
@media (max-width: 767px) {

    .hp-section[data-section="featured_services"],
    .hp-section[data-section="recent_listings"],
    .hp-section[data-section="featured-providers"],
    .hp-section[data-section="locations"],
    .hp-section[data-section="customer_reviews"],
    .hp-section[data-section="how_it_works"] {
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-bottom: 24px !important;
    }
}

/* ================================================================
   PHASE 3: MOBILE PREMIUM UI REFACTOR (Master Prompt)
   ================================================================ */
@media (max-width: 639px) {

    /* Single Background Layer */
    .pm-app-surface {
        background: var(--card-bg, #ffffff) !important;
        padding: 24px 0 24px 0 !important;
    }

    /* Outer Section Padding: 16px, Section Gap: 24px */
    .pm-section,
    .hp-section {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-bottom: 24px !important;
    }



    /* Single Border Radius for images within borderless cards */
    .ail-loc-card-img,
    .ail-service-card-img-wrap,
    .ail-listing-card-img-wrap,
    .pm-hiw-card-icon {
        border-radius: var(--global-radius, 16px) !important;
    }
}

/* ==========================================================================
   HERO v2 — design pixel-match (Stage 1)
   ========================================================================== */
.lbai-hero2.pm-hero {
    background: linear-gradient(135deg, #f1ecff 0%, #f7f2ff 55%, #efeaff 100%);
    color: #0f172a;
    border-radius: 24px;
    padding: 44px 40px;
    margin-bottom: 24px;
    /* visible so the search autocomplete dropdown can escape the hero box */
    overflow: visible;
    text-align: left;
}
/* keep the right illustration clipped to the rounded hero without clipping the dropdown */
.lbai-hero2 .lbai-hero2__right { overflow: hidden; border-radius: 20px; }
.lbai-hero2 .lbai-hero2__search { position: relative; z-index: 30; }
.lbai-hero2 .lbai-hero2__inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 36px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}
.lbai-hero2.lbai-hero2--noimg .lbai-hero2__inner { grid-template-columns: 1fr; max-width: 760px; text-align: center; }
.lbai-hero2.lbai-hero2--noimg .lbai-hero2__left { align-items: center; }
.lbai-hero2.lbai-hero2--noimg .lbai-hero2__search { margin-left: auto; margin-right: auto; }
.lbai-hero2.lbai-hero2--noimg .lbai-hero2__trust { justify-content: center; }

.lbai-hero2__left { text-align: left; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.lbai-hero2__pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: #e7e0ff; color: #6d5efc; font-size: 13px; font-weight: 700;
    padding: 7px 15px; border-radius: 20px;
}
.lbai-hero2__pill svg { width: 14px; height: 14px; }
.lbai-hero2__title { font-size: 42px; line-height: 1.12; font-weight: 800; color: #0f172a; margin: 18px 0 14px; letter-spacing: -0.5px; }
.lbai-hero2__sub { font-size: 16px; line-height: 1.55; color: #64748b; margin: 0 0 24px; max-width: 540px; font-weight: 500; }
.lbai-hero2__search { width: 100%; max-width: 620px; margin-bottom: 18px; }
.lbai-hero2__trust { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.lbai-hero2__trust-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; color: var(--text-secondary, #475569); }
.lbai-hero2__trust-item svg { width: 17px; height: 17px; color: var(--primary-color, #6d5efc); flex-shrink: 0; }
.lbai-hero2__right { display: flex; align-items: center; justify-content: center; min-width: 0; }
.lbai-hero2__img { max-width: 100%; height: auto; border-radius: 20px; display: block; }

@media (max-width: 900px) {
    .lbai-hero2.pm-hero { padding: 26px 18px; border-radius: 18px; }
    .lbai-hero2 .lbai-hero2__inner { grid-template-columns: 1fr; gap: 22px; }
    .lbai-hero2__right { order: -1; }
    .lbai-hero2__title { font-size: 30px; }
    .lbai-hero2__sub { font-size: 14.5px; }
}
@media (max-width: 560px) {
    .lbai-hero2__title { font-size: 25px; }
    .lbai-hero2__trust { gap: 8px 16px; }
    .lbai-hero2__trust-item { font-size: 12px; }
}

/* Hero background + heading/sub colors are now emitted inline by render_hero()
   (admin-controlled: gradient/solid/image) so they are intentionally NOT forced here. */

/* ==========================================================================
   Reusable section header (title + view-all link) — design pixel-match
   ========================================================================== */
.lbai-hp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.lbai-hp-head__title { margin: 0; }
.lbai-hp-head__link { color: #6d5efc; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.lbai-hp-head__link:hover { text-decoration: underline; }

/* ==========================================================================
   BROWSE CATEGORIES v2 (Stage 2)
   ========================================================================== */
.lbai-cats2__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.lbai-cat2.pm-cat-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 9px;
    padding: 18px 10px; background: #fff; border: 1px solid #eef0f6; border-radius: 16px;
    text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.lbai-cat2.pm-cat-card:hover { border-color: #6d5efc; box-shadow: 0 10px 24px rgba(109,94,252,.13); transform: translateY(-3px); }
.lbai-cat2__ic { width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: #f3f0ff; }
.lbai-cat2__ic img { width: 30px; height: 30px; object-fit: contain; }
/* full name shown (wraps to 2 lines) — override .pm-cat-name nowrap/ellipsis */
.lbai-cat2__name {
    font-size: 13.5px; font-weight: 700; color: #0f172a; line-height: 1.25;
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
    word-break: break-word; width: 100%;
}
.lbai-cat2__count { font-size: 11.5px; color: #94a3b8; font-weight: 600; white-space: normal; }
@media (max-width: 1200px) { .lbai-cats2__grid { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 900px)  { .lbai-cats2__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  {
    .lbai-cats2__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .lbai-cat2.pm-cat-card { padding: 14px 7px; gap: 7px; border-radius: 14px; }
    .lbai-cat2__ic { width: 44px; height: 44px; border-radius: 12px; }
    .lbai-cat2__ic img { width: 26px; height: 26px; }
    .lbai-cat2__name { font-size: 12px; }
    .lbai-cat2__count { font-size: 10.5px; }
}

/* ==========================================================================
   FEATURED BUSINESSES v2 (Stage 3) — rich cards
   ========================================================================== */
.lbai-fb__pill { display:inline-block; background:#ede9fe; color:#6d5efc; font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; white-space:nowrap; }

/* NOTE: The legacy .lbai-fb-card* rich-card styles were removed here. Featured Businesses now
   renders the ONE shared component (.lbai-card / .lbai-slider in listing-card.css). The section
   wrapper class (.lbai-fb) and its "Handpicked" pill (.lbai-fb__pill, above) are still in use. */

/* ==========================================================================
   NEW DESIGN SECTIONS (Stage 4-5)
   Popular Services · Why-Trust Stats · Become-a-Vendor · Blogs · Newsletter
   ========================================================================== */

/* shared header extras */
.lbai-hp-head--center { flex-direction:column; align-items:center; text-align:center; gap:6px; }
.lbai-hp-head__sub { margin:4px 0 0; color:#64748b; font-size:14px; font-weight:500; }

/* ---- Popular Services (centered icon tiles) ---- */
.lbai-psvc__grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.lbai-psvc__tile {
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:10px;
    padding:20px 10px; background:#fff; border:1px solid #eef0f6; border-radius:16px;
    text-decoration:none; text-align:center;
    box-shadow:0 2px 10px rgba(15,23,42,.04); transition:transform .2s, box-shadow .2s, border-color .2s;
}
.lbai-psvc__tile:hover { transform:translateY(-3px); border-color:#d9d4ff; box-shadow:0 10px 24px rgba(109,94,252,.14); }
.lbai-psvc__ic {
    width:52px; height:52px; border-radius:14px; background:#f3f1ff; flex-shrink:0;
    display:inline-flex; align-items:center; justify-content:center; overflow:hidden; color:#6d5efc;
}
.lbai-psvc__ic img, .lbai-psvc__img { width:28px; height:28px; object-fit:contain; }
.lbai-psvc__emoji { font-size:24px; line-height:1; }
.lbai-psvc__name { font-size:13.5px; font-weight:700; color:#0f172a; line-height:1.25; }
@media (max-width:1024px){ .lbai-psvc__grid{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:680px){ .lbai-psvc__grid{ grid-template-columns:repeat(4,1fr); gap:9px;} .lbai-psvc__tile{padding:14px 5px; gap:7px; border-radius:13px;} .lbai-psvc__ic{width:44px;height:44px; border-radius:12px;} .lbai-psvc__ic img,.lbai-psvc__img{width:24px;height:24px;} .lbai-psvc__name{font-size:11px;} }

/* ---- Why-Trust Stats (white card, vertical list) ---- */
.lbai-stats__card {
    background:#fff; border:1px solid #eef0f6; border-radius:20px; padding:26px 24px;
    box-shadow:0 2px 14px rgba(15,23,42,.05);
}
.lbai-stats__title { margin:0 0 20px; font-size:20px; font-weight:800; color:#0f172a; }
.lbai-stats__list { display:flex; flex-direction:column; gap:18px; }
.lbai-stats__row { display:flex; align-items:center; gap:15px; }
.lbai-stats__ic {
    width:48px; height:48px; border-radius:14px; background:#f3f1ff; color:#6d5efc;
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.lbai-stats__ic svg { width:23px; height:23px; }
.lbai-stats__meta { display:flex; flex-direction:column; gap:1px; min-width:0; }
.lbai-stats__num { font-size:22px; font-weight:900; color:#0f172a; line-height:1.1; letter-spacing:-.3px; }
.lbai-stats__label { font-size:13.5px; color:#64748b; font-weight:600; }
@media (max-width:560px){
    .lbai-stats__card{ padding:18px 16px; }
    /* Mobile: convert the vertical list into a premium 2-up card grid. */
    .lbai-stats__list{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
    .lbai-stats__row{
        flex-direction:column; align-items:center; text-align:center; gap:9px;
        background:#faf9ff; border:1px solid #eef0f6; border-radius:16px; padding:16px 12px;
    }
    /* Odd last item spans full width so the 5-stat grid stays balanced. */
    .lbai-stats__row:last-child:nth-child(odd){ grid-column:1 / -1; }
    .lbai-stats__ic{ width:46px; height:46px; }
    .lbai-stats__meta{ align-items:center; }
    .lbai-stats__num{ font-size:19px; }
    .lbai-stats__label{ font-size:12px; }
}

/* ---- Become a Vendor CTA (image | text+checklist | button) ---- */
.lbai-vendor__inner {
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:34px;
    background:#0f172a; background:linear-gradient(120deg,#4c1d95 0%,#6d28d9 55%,#5b21b6 100%);
    border-radius:22px; padding:30px 40px; color:#fff; overflow:hidden;
}
.lbai-vendor__media { flex-shrink:0; }
.lbai-vendor__media img { width:150px; height:150px; object-fit:cover; border-radius:16px; display:block; }
.lbai-vendor__title { margin:0; font-size:26px; font-weight:800; line-height:1.2; color:#fff; }
.lbai-vendor__sub { margin:8px 0 0; font-size:14.5px; color:rgba(255,255,255,.82); font-weight:500; max-width:560px; }
.lbai-vendor__list {
    list-style:none; margin:16px 0 0; padding:0;
    display:grid; grid-template-columns:repeat(2,auto); gap:10px 28px; justify-content:start;
}
.lbai-vendor__list li { display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:#fff; }
.lbai-vendor__list svg { width:16px; height:16px; color:#c4b5fd; flex-shrink:0; }
.lbai-vendor__cta { flex-shrink:0; }
.lbai-vendor__btn {
    display:inline-flex; align-items:center; justify-content:center;
    background:#fff; color:#5b21b6; font-size:15px; font-weight:800;
    padding:14px 30px; border-radius:12px; text-decoration:none; transition:transform .2s, box-shadow .2s; white-space:nowrap;
}
.lbai-vendor__btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.25); }
@media (max-width:960px){
    .lbai-vendor__inner{ grid-template-columns:1fr; text-align:center; padding:30px 24px; gap:18px; justify-items:center; }
    .lbai-vendor__sub{ margin-left:auto; margin-right:auto; }
    .lbai-vendor__list{ justify-content:center; }
    .lbai-vendor__media img{ width:120px; height:120px; }
}
@media (max-width:520px){
    .lbai-vendor__list{ grid-template-columns:1fr; text-align:left; gap:8px; }
    .lbai-vendor__title{ font-size:22px; }
}

/* ---- Latest Blogs ---- */
.lbai-blogs__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.lbai-blog-card {
    background:#fff; border:1px solid #eef0f6; border-radius:18px; overflow:hidden;
    display:flex; flex-direction:column; box-shadow:0 2px 12px rgba(15,23,42,.05);
    transition:transform .2s, box-shadow .2s;
}
.lbai-blog-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(15,23,42,.12); }
.lbai-blog-card__cover { position:relative; display:block; }
.lbai-blog-card__cover img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.lbai-blog-card__tag {
    position:absolute; top:12px; left:12px; background:#6d5efc; color:#fff;
    font-size:11px; font-weight:700; padding:4px 11px; border-radius:20px;
}
.lbai-blog-card__body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.lbai-blog-card__date { font-size:12px; color:#94a3b8; font-weight:600; }
.lbai-blog-card__title { font-size:17px; font-weight:800; color:#0f172a; text-decoration:none; line-height:1.3; }
.lbai-blog-card__title:hover { color:#6d5efc; }
.lbai-blog-card__excerpt { margin:0; font-size:13.5px; color:#64748b; line-height:1.55; flex:1; }
.lbai-blog-card__more { font-size:13px; font-weight:700; color:#6d5efc; text-decoration:none; }
@media (max-width:900px){ .lbai-blogs__grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .lbai-blogs__grid{ grid-template-columns:1fr;} }

/* ---- Newsletter ---- */
.lbai-news__inner {
    display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
    background:#f3f1ff; border:1px solid #e6e1ff; border-radius:24px; padding:34px 34px;
}
.lbai-news__title { margin:0; font-size:24px; font-weight:800; color:#0f172a; }
.lbai-news__sub { margin:8px 0 0; font-size:14px; color:#64748b; font-weight:500; max-width:460px; }
.lbai-news__form { display:flex; gap:10px; flex:1; min-width:280px; max-width:480px; }
.lbai-news__input {
    flex:1; border:1px solid #d9d4ff; background:#fff; border-radius:12px;
    padding:13px 16px; font-size:14px; color:#0f172a; outline:none;
}
.lbai-news__input:focus { border-color:#6d5efc; box-shadow:0 0 0 3px rgba(109,94,252,.15); }
.lbai-news__btn {
    background:var(--primary-color,#6d5efc); color:#fff; border:none; cursor:pointer;
    font-size:14px; font-weight:800; padding:13px 26px; border-radius:12px; white-space:nowrap;
    transition:filter .2s;
}
.lbai-news__btn:hover { filter:brightness(.95); }
@media (max-width:768px){
    .lbai-news__inner{ flex-direction:column; align-items:flex-start; padding:28px 20px; }
    .lbai-news__form{ width:100%; max-width:none; }
}
@media (max-width:460px){
    .lbai-news__form{ flex-direction:column; }
    .lbai-news__btn{ width:100%; }
}

/* ---- Download App (PWA install) ---- */
.lbai-app__inner {
    display:grid; grid-template-columns:1.3fr 1fr; align-items:center; gap:30px;
    background:linear-gradient(120deg,#1e1b4b 0%,#312e81 55%,#4c1d95 100%);
    border-radius:24px; padding:38px 36px; color:#fff; overflow:hidden;
}
.lbai-app__title { margin:0; font-size:26px; font-weight:800; color:#fff; line-height:1.2; }
.lbai-app__sub { margin:12px 0 0; font-size:15px; color:rgba(255,255,255,.82); font-weight:500; max-width:460px; }
.lbai-app__badges { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
.lbai-app__badge {
    display:inline-flex; align-items:center; gap:10px; cursor:pointer;
    background:#000; color:#fff; border:1px solid rgba(255,255,255,.18);
    border-radius:12px; padding:9px 16px; text-decoration:none; transition:transform .2s, background .2s;
}
.lbai-app__badge:hover { transform:translateY(-2px); background:#111; }
.lbai-app__badge svg { width:22px; height:22px; flex-shrink:0; }
.lbai-app__badge span { display:flex; flex-direction:column; line-height:1.15; text-align:left; font-size:15px; font-weight:700; }
.lbai-app__badge small { font-size:9.5px; font-weight:600; letter-spacing:.5px; opacity:.8; text-transform:uppercase; }
.lbai-app__media { display:flex; align-items:center; justify-content:center; }
.lbai-app__phone {
    width:150px; height:300px; border-radius:26px; background:#0b1020;
    border:6px solid #0b1020; box-shadow:0 20px 40px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.06);
    display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.lbai-app__phone::before {
    content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:54px; height:5px; border-radius:5px; background:rgba(255,255,255,.25);
}
.lbai-app__screen { max-width:64%; max-height:64%; object-fit:contain; border-radius:16px; }
@media (max-width:768px){
    .lbai-app__inner{ grid-template-columns:1fr; padding:30px 22px; text-align:center; }
    .lbai-app__sub{ margin-left:auto; margin-right:auto; }
    .lbai-app__badges{ justify-content:center; }
    .lbai-app__title{ font-size:22px; }
    .lbai-app__media{ order:-1; }
    .lbai-app__phone{ width:120px; height:230px; }
}

/* ==========================================================================
   RESPONSIVE SYSTEM v2 — mobile / tablet / desktop / wide PC
   Fixes the "stretched mobile on desktop" look. Loaded last so it wins on
   equal specificity. Scoped to the design (.lbai-*) sections.
   Breakpoints: base = mobile (<640) · 640 tablet · 1024 desktop · 1400 wide
   ========================================================================== */

/* ---- WHY-TRUST STATS: vertical (mobile) -> horizontal (tablet+) ---- */
@media (min-width: 640px) {
    .lbai-stats__card { padding: 34px 30px; }
    .lbai-stats__title { text-align: center; margin-bottom: 26px; font-size: 24px; }
    .lbai-stats__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 16px; }
    .lbai-stats__row { flex-direction: column; text-align: center; gap: 10px; align-items: center; }
    .lbai-stats__meta { align-items: center; }
    .lbai-stats__ic { width: 54px; height: 54px; }
}
@media (min-width: 1024px) {
    .lbai-stats__card { padding: 40px 36px; }
    .lbai-stats__title { font-size: 26px; margin-bottom: 32px; }
    .lbai-stats__list { grid-template-columns: repeat(5, 1fr); gap: 20px; }
    .lbai-stats__num { font-size: 26px; }
    .lbai-stats__ic { width: 60px; height: 60px; }
    .lbai-stats__ic svg { width: 26px; height: 26px; }
}

/* ---- POPULAR SERVICES: 2 (mobile) / 4 (tablet) / 6 / 8 (wide) — design shows 8 ---- */
@media (min-width: 640px)  { .lbai-psvc__grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (min-width: 1024px) { .lbai-psvc__grid { grid-template-columns: repeat(6, 1fr); gap: 16px; } }
@media (min-width: 1280px) { .lbai-psvc__grid { grid-template-columns: repeat(8, 1fr); } }

/* keep mobile at 2 (design shows 4 tiny; 2 reads better on phones) */
@media (max-width: 480px)  { .lbai-psvc__grid { grid-template-columns: repeat(2, 1fr); } .lbai-psvc__name { font-size: 12px; } }

/* ---- BLOGS: 1 / 2 / 3 / 4 (wide) — design shows 4 ---- */
@media (min-width: 600px)  { .lbai-blogs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lbai-blogs__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1280px) { .lbai-blogs__grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Two-col promo bands: stack on tablet-down, side-by-side desktop ---- */
@media (max-width: 900px) {
    .lbai-vendor__inner,
    .lbai-app__inner { grid-template-columns: 1fr; }
}
@media (min-width: 1024px) {
    .lbai-vendor__inner { padding: 48px 44px; }
    .lbai-vendor__title { font-size: 32px; }
    .lbai-app__inner   { padding: 44px 44px; }
}

/* ---- Desktop rhythm: larger section gaps + hero scale on wide PC ---- */
@media (min-width: 1024px) {
    .lbai-hero2.pm-hero { padding: 56px 56px; }
    .lbai-hero2__title { font-size: 46px; }
    .lbai-hp-head { margin-bottom: 22px; }
}
@media (min-width: 1400px) {
    .lbai-hero2.pm-hero { padding: 64px 72px; }
    .lbai-hero2__title { font-size: 52px; }
    .lbai-hero2__sub { font-size: 17px; }
}

/* ---- Ensure the app surface + sections use the full container width ---- */
@media (min-width: 1024px) {
    .pm-app-surface { padding-left: 0; padding-right: 0; }
    .pm-section, .hp-section { padding-left: 24px; padding-right: 24px; }
}

/* ---- Hero without an uploaded illustration: widen on desktop so it
        doesn't look like a narrow mobile column (upload a Hero image in
        admin to get the full 2-column design hero) ---- */
@media (min-width: 1024px) {
    .lbai-hero2--noimg .lbai-hero2__inner { max-width: 980px; }
    .lbai-hero2--noimg .lbai-hero2__search { max-width: 760px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   RC1 UI HOTFIX — WAVE 1
   Every RC1 UI Polish rule for this stylesheet lives in this one section. Presentation only:
   no layout engine, no component, no section order and no desktop or tablet rule is altered.

   ISSUE 1 — Featured Provider card, meta row responsive containment.

   The rating and listings pills are emitted with inline styles by
   LBAI_Homepage_Sections::render_featured_providers(). Inline styles cannot carry a media
   query, so the markup supplies two class hooks and the responsive behaviour lives here.

   Root cause the rules below remove:
     1. the row was flex-wrap:nowrap, so it was FORBIDDEN from breaking and the only possible
        outcome once the pills exceeded the card width was horizontal overflow;
     2. neither the row nor the pills carried min-width:0, so as flex items they could not
        shrink below their content width either — the row had no way to absorb pressure.

   Deliberately NOT used: text-overflow ellipsis, overflow:hidden and display:none. No
   metadata is truncated or hidden at any width; the row wraps, then the pills stack.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* A flex/grid child may not shrink below its content width unless told it can. */
.ail-provider-card { min-width: 0; }

/* The meta row: may break onto a second line, may shrink, may never exceed the card. */
.ail-provider-card__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
}

/* Each pill: shrinkable, capped to the card, and free to wrap its own label as the final
   safety net rather than clipping it. flex-basis auto keeps the desktop size unchanged. */
.ail-provider-card__meta-pill {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* ── Mobile 320–768px ──────────────────────────────────────────────────────────────────────
   Tighter spacing so both pills stay on one line for as long as possible, and only then wrap.
   !important is scoped to this query alone and exists solely to override the inline padding
   on the pill; desktop and tablet keep the inline values untouched. */
@media (max-width: 768px) {
    .ail-provider-card__meta { gap: 6px; }
    .ail-provider-card__meta-pill {
        padding: 4px 8px !important;
        font-size: 11.5px;
        line-height: 1.35;
    }
}

/* ── Narrow phones 320–412px ───────────────────────────────────────────────────────────────
   Below this width two pills on one line become cramped, so give each its own full-width row.
   flex-basis 100% is what stacks them; no information is removed. */
@media (max-width: 412px) {
    .ail-provider-card__meta-pill {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ── 320px floor ───────────────────────────────────────────────────────────────────────────
   Smallest supported viewport: trim the card's own horizontal padding a little so the stacked
   pills keep comfortable breathing room inside the border. */
@media (max-width: 360px) {
    .ail-provider-card { padding-left: 12px !important; padding-right: 12px !important; }
    .ail-provider-card__meta { gap: 5px; }
}
/* ═══════════════════════════════ END RC1 UI HOTFIX — WAVE 1 ══════════════════════════════ */