/* ==========================================================================
   Single Listing Page V2 (BEM Methodology)
   Responsive: Desktop + Tablet + Mobile
   ========================================================================== */
:root {
    --sl-primary: #6C3BFF;
    --sl-success: #22C55E;
    --sl-bg-main: #FFFFFF;
    --sl-card-bg: #FFFFFF;
    --sl-border: #EAEAEA;
    --sl-text-primary: #1F2937;
    --sl-text-secondary: #6B7280;
    --sl-yellow: #f59e0b;
    --sl-bg-light: #f8fafc;
    
    --sl-radius-lg: 16px;
    --sl-radius-md: 12px;
    --sl-radius-pill: 9999px;
    
    --sl-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.04);
    --sl-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.08);
    
    --sl-gap-section: 64px;
    --sl-gap-card: 24px;
    --sl-header-offset: 90px; /* sticky header height + breathing room for anchor scroll */
}

html { scroll-behavior: smooth; }

/* Base Styles */
.ail-single-wrapper {
    background-color: var(--sl-bg-light);
    padding-bottom: 24px;
    font-family: 'Inter', 'Poppins', sans-serif;
    color: var(--sl-text-primary);
}

.ail-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

.ail-section-heading {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 24px 0;
    color: var(--sl-text-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ail-view-all {
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ail-view-all:hover {
    text-decoration: underline;
}

/* Breadcrumbs */
.ail-breadcrumbs {
    padding: 20px 0;
    font-size: 14px;
    color: var(--sl-text-secondary);
}
.ail-breadcrumbs a {
    color: var(--sl-primary);
    text-decoration: none;
    transition: color 0.2s;
}
.ail-breadcrumbs a:hover {
    text-decoration: underline;
}
.ail-breadcrumbs span {
    margin: 0 8px;
    opacity: 0.6;
}

/* Hero Section */
.ail-hero {
    background: var(--sl-card-bg);
    border-radius: var(--sl-radius-lg);
    box-shadow: var(--sl-shadow-soft);
    margin-bottom: var(--sl-gap-section);
    overflow: hidden;
}

.ail-hero__banner-wrap {
    position: relative;
    width: 100%;
    height: 380px;
    background: #e2e8f0;
}

.ail-hero__banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ail-hero__top-actions {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 12px;
}

.ail-hero__icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--sl-text-primary);
    transition: all 0.2s;
}
.ail-hero__icon-btn:hover {
    background: #fff;
    transform: translateY(-2px);
}
.ail-hero__icon-btn svg {
    width: 20px;
    height: 20px;
}

.ail-hero__content {
    padding: 0 40px 40px 40px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.ail-hero__logo {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 5px solid #fff;
    object-fit: cover;
    background: #fff;
    margin-top: -65px;
    box-shadow: var(--sl-shadow-soft);
    position: relative;
    z-index: 10;
}

/* Top band: business info (left) + stat cards (right), matching the reference */
.ail-hero__top-band {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    flex-wrap: wrap;
}

.ail-hero__info-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 340px;
    min-width: 260px;
}

.ail-hero__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.ail-hero__title {
    font-size: 30px;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--sl-text-primary);
}

/* ── Title + verification tick: ALWAYS on one line, every viewport ─────────────────────────
   flex-wrap above is required because the business badge cluster (.lbai-badges) is
   flex: 0 0 100% in listing-card.css and must occupy its own row beneath the title. But wrap
   applies to every item, so the verification tick (.lbai-badges__ticks, flex: 0 0 auto) was
   also free to wrap — and on mobile it did, dropping the badge below the title.

   The title text is now its own flex item with min-width: 0, which overrides the default
   min-width: auto and lets the text shrink (wrapping internally across as many lines as it
   needs) instead of pushing the tick onto a new flex line. The tick keeps its intrinsic width
   and never wraps, so the pair stays on one line and stays vertically centred.

   Desktop is unaffected: a title that already fits never shrinks, so nothing about its
   rendering changes. */
.ail-hero__title-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ail-hero__title .lbai-badges__ticks {
    flex: 0 0 auto;
    white-space: nowrap;
    align-self: center;
}

/* Verified/premium ticks now use the shared .lbai-vbadges component (listing-card.css).
   The old .ail-hero__tick rules were removed to avoid a duplicate badge implementation. */

/* .ail-hero__partner (Premium Partner ribbon) removed — the single-listing hero shows badges ONLY
   through the shared LBAI_Listing_Card::badges() renderer inside the H1. Single source, no dup. */

/* Defensive guard: hide any legacy plugin-injected badges inside the hero (the runtime injector is
   already disabled site-wide, so this simply guarantees no second badge path can ever appear). */
.ail-hero .lpcf-tick-js,
.ail-hero .lpcf-pills-container,
.ail-hero .lpcf-secondary-badges-details,
.ail-hero .lpcf-badge-icon,
.ail-hero .lpcf-badge-icon-js { display: none !important; }

.ail-hero__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 15px;
    color: var(--sl-text-secondary);
}

.ail-hero__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--sl-text-secondary);
}
.ail-hero__rating strong { color: var(--sl-text-primary); font-weight: 700; }
.ail-hero__rating svg { color: var(--sl-yellow); width: 16px; height: 16px; }
.ail-hero__stars { color: var(--sl-yellow); letter-spacing: 1px; font-size: 15px; }
.ail-hero__stars-empty { color: #e2e8f0; }
.ail-hero__reviews { color: var(--sl-text-secondary); }
.ail-hero__subline .ail-hero__dot { color: #cbd5e1; margin: 0 2px; }

.ail-hero__meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ail-hero__meta-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Quick Statistics (right side of the top band) */
.ail-stats__scroll {
    flex: 0 0 auto;
}
.ail-stats__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}
.ail-stat-card {
    background: #fff;
    border-radius: var(--sl-radius-md);
    padding: 14px 16px;
    text-align: center;
    border: 1px solid var(--sl-border);
    flex: 0 0 auto;
    min-width: 100px;
}
.ail-stat-card__val {
    font-size: 20px;
    font-weight: 800;
    color: var(--sl-text-primary);
    margin-bottom: 2px;
    font-family: 'Outfit', 'Inter', sans-serif;
}
.ail-stat-card__lbl {
    font-size: 12px;
    color: var(--sl-text-secondary);
    white-space: nowrap;
}

/* Action Buttons (Desktop / Tablet) */
.ail-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
    margin-bottom: 0;
}
.ail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border-radius: var(--sl-radius-md);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    text-align: center;
}
.ail-btn svg {
    width: 20px;
    height: 20px;
}
.ail-btn--green {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.25);
}
.ail-btn--green:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(34, 197, 94, 0.35);
}
.ail-btn--purple {
    background: linear-gradient(135deg, #7c3aed, #6C3BFF);
    color: #fff;
    box-shadow: 0 4px 14px rgba(108, 59, 255, 0.25);
}
.ail-btn--purple:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(108, 59, 255, 0.35);
}
.ail-btn--outline {
    background-color: #fff;
    border: 1px solid var(--sl-border);
    color: var(--sl-text-primary);
}
.ail-btn--outline:hover {
    border-color: var(--sl-primary);
    color: var(--sl-primary);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

/* Sections */
.ail-section {
    background: var(--sl-card-bg);
    border-radius: var(--sl-radius-lg);
    padding: 40px;
    margin-bottom: var(--sl-gap-section);
    box-shadow: var(--sl-shadow-soft);
}

/* Portfolio */
.ail-portfolio__tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
}
.ail-portfolio__tabs::-webkit-scrollbar {
    display: none;
}
.ail-portfolio__tab {
    padding: 8px 16px;
    border-radius: var(--sl-radius-pill);
    background: var(--sl-bg-light);
    border: 1px solid var(--sl-border);
    color: var(--sl-text-secondary);
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.ail-portfolio__tab.is-active, .ail-portfolio__tab:hover {
    background: var(--sl-primary);
    color: #fff;
    border-color: var(--sl-primary);
}

.ail-portfolio__grid-wrap {
    width: 100%;
}
.ail-portfolio__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Portfolio grid (label-filterable via tabs) */
.ail-portfolio__grid2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.ail-portfolio__cell { margin: 0; min-width: 0; }
.ail-portfolio__tab-count {
    display: inline-block;
    margin-left: 3px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.75;
}
.ail-portfolio__caption {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--sl-text-primary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 1199px) {
    .ail-portfolio__grid2 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
    /* Mobile: horizontal swipe slider instead of a tall vertical grid
       (so 25 photos don't force endless scrolling) */
    .ail-portfolio__grid2 {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 10px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .ail-portfolio__grid2::-webkit-scrollbar { display: none; }
    .ail-portfolio__cell {
        flex: 0 0 72%;
        max-width: 280px;
        scroll-snap-align: start;
    }
}
.ail-portfolio__item {
    position: relative;
    border-radius: var(--sl-radius-md);
    overflow: hidden;
    aspect-ratio: 4/3;
    display: block;
}
.ail-portfolio__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.ail-portfolio__item:hover img {
    transform: scale(1.08);
}
.ail-portfolio__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.ail-portfolio__play svg {
    width: 24px;
    height: 24px;
    margin-left: 4px;
}

/* About & Highlights */
.ail-about__text {
    line-height: 1.7;
    font-size: 16px;
    color: var(--sl-text-secondary);
    margin-bottom: 30px;
}
.ail-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.ail-highlight {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--sl-bg-light);
    border-radius: var(--sl-radius-pill);
    font-size: 14px;
    font-weight: 600;
    color: var(--sl-text-primary);
    border: 1px solid var(--sl-border);
}
.ail-highlight svg {
    width: 18px;
    height: 18px;
    color: var(--sl-primary);
}

/* Services */
.ail-services__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ail-service-card {
    padding: 24px;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-md);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.ail-service-card:hover {
    box-shadow: var(--sl-shadow-hover);
    transform: translateY(-4px);
    border-color: var(--sl-primary);
}
.ail-service-card__icon {
    width: 56px;
    height: 56px;
    background: rgba(108, 59, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: var(--sl-primary);
}
.ail-service-card__icon svg {
    width: 28px;
    height: 28px;
}
.ail-service-card__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.ail-service-card__duration {
    font-size: 14px;
    color: var(--sl-text-secondary);
    margin: 0 0 20px 0;
    flex: 1;
}
.ail-service-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--sl-border);
}
.ail-service-card__price {
    font-weight: 800;
    font-size: 20px;
    color: var(--sl-text-primary);
}
.ail-service-card__btn {
    padding: 8px 16px;
    font-size: 14px;
}

/* Business Details */
.ail-details__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ail-detail-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--sl-bg-light);
    border-radius: var(--sl-radius-md);
    border: 1px solid var(--sl-border);
}
.ail-detail-card__icon {
    width: 48px;
    height: 48px;
    background: rgba(108, 59, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sl-primary);
}
.ail-detail-card__icon svg { width: 24px; height: 24px; }
.ail-detail-card__info {
    display: flex;
    flex-direction: column;
}
.ail-detail-card__lbl {
    font-size: 13px;
    color: var(--sl-text-secondary);
    margin-bottom: 2px;
}
.ail-detail-card__val {
    font-size: 16px;
    font-weight: 600;
    color: var(--sl-text-primary);
}

/* Reviews */
.ail-reviews__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}
.ail-reviews__summary {
    display: flex;
    gap: 40px;
    align-items: center;
}
.ail-reviews__score {
    text-align: center;
}
.ail-reviews__score-num {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    color: var(--sl-text-primary);
}
.ail-reviews__stars {
    color: var(--sl-yellow);
    font-size: 24px;
    margin: 8px 0;
    letter-spacing: 2px;
}
.ail-reviews__count {
    color: var(--sl-text-secondary);
    font-size: 15px;
}
.ail-reviews__bars {
    width: 300px;
}
.ail-rating-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.ail-rating-bar__label {
    width: 50px;
    font-weight: 600;
    font-size: 14px;
    color: var(--sl-text-secondary);
}
.ail-rating-bar__track {
    flex: 1;
    height: 8px;
    background: var(--sl-bg-light);
    border-radius: 4px;
    overflow: hidden;
}
.ail-rating-bar__fill {
    /* Pre-Sprint 2 (H5) root-cause fix: this element is an inline <span>, so the browser
       ignored the inline width/height and every distribution bar rendered empty even though
       the correct style="width:{percent}%" was emitted. Blockifying it makes the width apply. */
    display: block;
    width: 0;                       /* default; overridden by inline style="width:{percent}%" */
    height: 100%;
    background: var(--sl-yellow);
    border-radius: 4px;
    transition: width 0.6s ease;    /* smooth fill animation */
}

.ail-reviews__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.ail-review-card {
    padding: 24px;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-md);
    background: var(--sl-bg-light);
}
.ail-review-card__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}
.ail-review-card__avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.ail-review-card__meta {
    flex: 1;
}
.ail-review-card__name {
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ail-review-card__badge {
    color: #3b82f6;
}
.ail-review-card__badge svg { width: 16px; height: 16px; }
.ail-review-card__date {
    font-size: 13px;
    color: var(--sl-text-secondary);
}
.ail-review-card__stars {
    color: var(--sl-yellow);
    font-size: 16px;
    letter-spacing: 1px;
}
.ail-review-card__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--sl-text-primary);
}

/* FAQ Accordion */
.ail-faq__list {
    max-width: 800px;
    margin: 0 auto;
}
.ail-faq__item {
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-md);
    margin-bottom: 16px;
    overflow: hidden;
    background: #fff;
    transition: box-shadow 0.3s;
}
.ail-faq__item.is-active {
    border-color: var(--sl-primary);
    box-shadow: var(--sl-shadow-soft);
}
.ail-faq__question {
    width: 100%;
    text-align: left;
    padding: 20px 24px;
    background: transparent;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--sl-text-primary);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ail-faq__icon {
    transition: transform 0.3s ease;
    color: var(--sl-text-secondary);
}
.ail-faq__item.is-active .ail-faq__icon {
    transform: rotate(180deg);
    color: var(--sl-primary);
}
.ail-faq__answer {
    padding: 0 24px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    color: var(--sl-text-secondary);
    line-height: 1.7;
}
.ail-faq__item.is-active .ail-faq__answer {
    padding: 0 24px 24px 24px;
    max-height: 1000px;
}

/* Related Listings */
.ail-related__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.ail-related-card {
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-md);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    background: #fff;
}
.ail-related-card:hover {
    box-shadow: var(--sl-shadow-hover);
    transform: translateY(-4px);
}
.ail-related-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
}
.ail-related-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ail-related-card__fav {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sl-text-secondary);
    transition: color 0.2s;
}
.ail-related-card__fav:hover { color: #ef4444; }
.ail-related-card__fav svg { width: 20px; height: 20px; }
.ail-related-card__content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ail-related-card__title {
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 12px 0;
    color: var(--sl-text-primary);
}
.ail-related-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--sl-text-secondary);
    margin-top: auto;
}
.ail-related-card__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--sl-text-primary);
    font-weight: 700;
}
.ail-related-card__rating svg {
    color: var(--sl-yellow);
    width: 16px;
    height: 16px;
}
.ail-related-card__loc {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ail-related-card__loc svg { width: 14px; height: 14px; }

/* Sticky Mobile CTA (Hidden on Desktop) */
.ail-sticky-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    padding: 12px 20px;
    z-index: 100;
    box-sizing: border-box;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablet (768px - 1199px) */
@media (max-width: 1199px) {
    .ail-hero__banner-wrap { height: 320px; }
    .ail-actions { grid-template-columns: repeat(2, 1fr); }
    .ail-portfolio__grid { grid-template-columns: repeat(2, 1fr); }
    .ail-services__grid { grid-template-columns: repeat(2, 1fr); }
    .ail-details__grid { grid-template-columns: repeat(2, 1fr); }
    .ail-reviews__grid { grid-template-columns: 1fr; }
    .ail-related__grid { grid-template-columns: repeat(2, 1fr); }
    
    .ail-reviews__header { flex-direction: column; align-items: flex-start; }
    .ail-reviews__bars { width: 100%; max-width: 400px; }
}

/* Mobile (320px - 767px) */
@media (max-width: 767px) {
    .ail-section { padding: 24px 20px; }
    .ail-hero__banner-wrap { height: 240px; }
    .ail-hero__content { padding: 0 20px 24px 20px; }
    .ail-hero__logo { 
        width: 100px; height: 100px; 
        margin-top: -50px; 
        align-self: center; /* Center logo on mobile */
    }
    
    .ail-hero__info-row { align-items: center; text-align: center; }
    .ail-hero__title-wrap { align-items: center; }
    .ail-hero__meta { align-items: center; }
    
    /* Actions stay visible on mobile in a tidy 2-col grid (were hidden before → "no buttons") */
    .ail-actions { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ail-actions .ail-btn { padding: 13px 12px; font-size: 14px; }
    
    /* Stats: full-width 2-col grid so all business details stay visible on mobile */
    .ail-stats__scroll { width: 100%; }
    .ail-stats__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        justify-content: stretch;
        overflow: visible;
    }
    .ail-stat-card {
        flex: none;
        min-width: 0;
        padding: 12px 10px;
    }
    .ail-stat-card__val { font-size: 18px; }
    .ail-stat-card__lbl { font-size: 11px; white-space: normal; line-height: 1.3; }
    
    /* Horizontal scroll for Portfolio */
    .ail-portfolio__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 12px;
        scrollbar-width: none;
    }
    .ail-portfolio__item {
        flex: 0 0 260px;
        scroll-snap-align: start;
    }
    
    /* Services: horizontal swipe slider on mobile (matches portfolio) */
    .ail-services__grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 12px;
        padding-bottom: 10px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .ail-services__grid::-webkit-scrollbar { display: none; }
    .ail-services__grid .ail-service-card {
        flex: 0 0 80%;
        max-width: 300px;
        scroll-snap-align: start;
    }
    
    /* Business Details -> 2 small cols */
    .ail-details__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .ail-detail-card { flex-direction: column; text-align: center; padding: 20px; }
    
    /* Horizontal scroll for Related */
    .ail-related__grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 12px;
        scrollbar-width: none;
    }
    .ail-related-card {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }
    
    /* Show Sticky CTA */
    .ail-sticky-cta {
        display: flex;
        gap: 12px;
    }
    .ail-sticky-cta .ail-btn { flex: 1; padding: 12px; font-size: 15px; }
}


/* ==========================================================================
   Mobile / Tablet refinements (clean layout, no horizontal overflow)
   ========================================================================== */

/* Never let a stray wide element cause page-level horizontal scroll */
.ail-single-wrapper { overflow-x: hidden; }
.ail-single-wrapper img { max-width: 100%; }

@media (max-width: 767px) {
    /* Reviews: stack score on top, rating bars full-width below.
       (Bars were a fixed 300px inside a flex row, so tracks collapsed / overflowed.) */
    .ail-reviews__summary {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        width: 100%;
    }
    .ail-reviews__score { text-align: left; }
    .ail-reviews__bars { width: 100%; max-width: none; }
    .ail-rating-bar { gap: 10px; margin-bottom: 6px; }
    .ail-rating-bar__label { width: 56px; font-size: 12px; white-space: nowrap; }

    /* Tighter, cleaner spacing on small screens */
    .ail-container { padding: 0 14px; }
    .ail-section-heading { font-size: 20px; margin-bottom: 16px; }
    .ail-hero { margin-bottom: 28px; }
    .ail-breadcrumbs { padding: 12px 0; font-size: 12px; }
    .ail-review-card { padding: 18px; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   TEAM MEMBERS  +  SOCIAL LINKS
   Both sections are new RENDER surfaces for data the add-listing form already saved
   (_lbai_team / _lbai_social_links) but this page never output. They reuse the existing
   .ail-section shell, so page rhythm, spacing and heading style are unchanged.

   Layout is intrinsically responsive via auto-fill/minmax and flex-wrap — no media query is
   needed for the grid to reflow, which also means no layout shift at any breakpoint. Images
   and the avatar fallback carry fixed width/height so the row height is reserved before paint
   (no CLS).
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Team ───────────────────────────────────────────────────────────────────────────────── */
.ail-team__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.ail-team-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
    min-width: 0;
}

/* Fixed box for both the photo and the initial fallback: identical footprint either way, so
   the card never changes height once the image loads. */
.ail-team-card__photo {
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    border-radius: 50%;
    object-fit: cover;
    background: #f1f5f9;
}

.ail-team-card__photo--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: #6366f1;
    background: #eef2ff;
    user-select: none;
}

.ail-team-card__body {
    min-width: 0; /* lets long names ellipsize instead of overflowing the card */
    flex: 1 1 auto;
}

.ail-team-card__name {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sl-text-primary, #0f172a);
    overflow-wrap: anywhere;
}

.ail-team-card__role {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #6366f1;
    overflow-wrap: anywhere;
}

.ail-team-card__bio {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: #64748b;
    overflow-wrap: anywhere;
}

.ail-team-card__phone {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
}

.ail-team-card__phone:hover,
.ail-team-card__phone:focus-visible { color: #6366f1; text-decoration: underline; }

.ail-team-card__phone-icon { display: inline-flex; flex: 0 0 auto; }

.ail-team-card__phone-icon svg,
.ail-team-card__phone-icon > svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* ── Social ─────────────────────────────────────────────────────────────────────────────── */
.ail-social__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ail-social__item { display: flex; }

.ail-social__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    min-height: 44px; /* comfortable touch target */
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.ail-social__link:hover,
.ail-social__link:focus-visible {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #0f172a;
}

.ail-social__link:focus-visible { outline: 2px solid #6366f1; outline-offset: 2px; }

.ail-social__icon { width: 18px; height: 18px; flex: 0 0 auto; display: block; }

/* Brand tint on the icon only — the pill stays neutral so the row reads as one component. */
.ail-social__link--facebook  .ail-social__icon { color: #1877f2; }
.ail-social__link--instagram .ail-social__icon { color: #d62976; }
.ail-social__link--linkedin  .ail-social__icon { color: #0a66c2; }
.ail-social__link--twitter   .ail-social__icon,
.ail-social__link--x         .ail-social__icon { color: #0f172a; }
.ail-social__link--youtube   .ail-social__icon { color: #ff0000; }
.ail-social__link--whatsapp  .ail-social__icon { color: #25d366; }

@media (max-width: 768px) {
    /* Single column keeps the 72px photo and the text side by side rather than cramming two
       cards into a narrow viewport. */
    .ail-team__grid { grid-template-columns: 1fr; }

    /* Centred hero on mobile (.ail-hero__info-row uses text-align:center), so centre the
       title/tick line with it. The tick remains on the title's line — see .ail-hero__title-text. */
    .ail-hero__title { justify-content: center; text-align: center; }

    /* Social pills fill the row evenly and stay tappable. */
    .ail-social__list { gap: 8px; }
    .ail-social__link { padding: 10px 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .ail-social__link { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════
   RC1 UI HOTFIX — WAVE 2  ·  RELATED LISTINGS CARD
   The "You May Also Like" rail uses its own .ail-related-card markup rather than the shared
   .lbai-card component, so it needed the same responsive repair. Presentation only — the query,
   the visibility gate that feeds it and the card's colours/branding are untouched.

   ── WHAT WAS BROKEN ──────────────────────────────────────────────────────────────────────
   1. The heart overlay had no z-index, so it relied purely on paint order over the image.
   2. Title was cut to 8 words in PHP with no CSS clamp; address was cut to 3 words. Both are
      now emitted in full and clamped here, so truncation follows the real column width.
   3. .ail-related-card__meta is a nowrap space-between flex row holding the rating and the
      address. Neither child could shrink (default min-width:auto), so at 2 columns on a phone
      the address pushed past the card edge.
   ══════════════════════════════════════════════════════════════════════════════════════════ */

/* Heart overlay: explicit stacking above the image. Position/size unchanged. */
.ail-related-card__fav { z-index: 2; }

/* Content column must be allowed to shrink or its children cannot. */
.ail-related-card__content { min-width: 0; }

/* Two natural lines, then truncate. line-height is stated so two lines occupy a predictable
   height and the cards in a row stay even. */
.ail-related-card__title {
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Rating and address may wrap onto separate lines instead of overflowing. */
.ail-related-card__meta {
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 10px;
    min-width: 0;
}
.ail-related-card__rating { flex: 0 0 auto; min-width: 0; }
.ail-related-card__rating svg { flex: 0 0 auto; }

.ail-related-card__loc {
    flex: 1 1 auto;
    min-width: 0;
    align-items: flex-start;
}
.ail-related-card__loc svg { flex: 0 0 auto; margin-top: 2px; }
.ail-related-card__loc-text {
    min-width: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* ═════════════════════ END RC1 UI HOTFIX — WAVE 2 (RELATED CARD) ═════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════════════════════
   RC1 UI HOTFIX — WAVE 3  ·  GREEN VERIFICATION TICK ON THE SINGLE-LISTING HERO
   The hero H1 uses the same [text][ticks][badges 0 0 100%] flex-wrap structure as the listing
   card and therefore carried the identical defect: `flex-basis: auto` on the title text gives it
   a hypothetical main size equal to its full content width, so flex LINE COLLECTION closes the
   line before the tick is reached and the tick lands on its own row. It surfaced less often here
   only because the hero is wider than a card — the bug was the same.

   Corrected the same way: basis 0 so the tick can never be pushed to a second line, grow 1 so the
   text still fills the row, and max-content so a short title hugs its text and keeps the tick
   immediately after the last word. Appended last so it overrides the earlier declaration.

   Markup, badge renderer, blue tick, premium badge and the business badge row are untouched.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.ail-hero__title-text {
    flex: 1 1 0%;
    min-width: 0;
    max-width: -webkit-max-content;
    max-width: max-content;
    overflow-wrap: anywhere;
}

.ail-hero__title .lbai-badges__ticks {
    flex: 0 0 auto;
    white-space: nowrap;
    align-self: center;
}

/* The hero is centred on mobile (.ail-hero__info-row sets text-align:center). Because the title
   box now hugs its content, centring the FLEX LINE keeps the title+tick pair visually centred as
   a unit instead of leaving the tick adrift at the right edge. */
@media (max-width: 768px) {
    .ail-hero__title { justify-content: center; }
    .ail-hero__title-text { text-align: center; }
}
/* ═══════════════════════════════ END RC1 UI HOTFIX — WAVE 3 ══════════════════════════════ */