/* Location-hero A/B (LOCATION_HERO_AB_ENABLED) — TREATMENT pages only; the control
   page never loads this file. Everything reads CSS custom properties so a later
   prefers-color-scheme dark theme is a token swap (redefine the --lh-* block). */
:root {
  --lh-panel: var(--gray-50, #f8fafc);
  --lh-line: var(--gray-100, #f1f5f9);
  --lh-text: var(--navy, #1e293b);
  --lh-muted: var(--gray-500, #64748b);
  --lh-bubble: #d9fdd3;
  --lh-bubble-text: #111b21;
  --lh-wa: #25d366;
  --lh-wa-hover: #1ebe5d;
  --lh-wa-text: #0f2a1a;
  --lh-bar: #ffffff;
  --lh-bar-line: var(--gray-100, #f1f5f9);
  --lh-btn-line: var(--gray-300, #cbd5e1);
}

/* Hero panel */
.loc-hero {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 36rem;
  margin: 0.9rem 0 1.1rem;
  padding: 1rem;
  background: var(--lh-panel);
  border: 1px solid var(--lh-line);
  border-radius: 18px;
  color: var(--lh-text);
}
.loc-hero-pitch { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1.2rem; line-height: 1.25; }
.loc-hero-msg { display: flex; flex-direction: column; gap: 0.35rem; }
.loc-hero-label { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lh-muted); }
.loc-hero-bubble {
  align-self: flex-start;
  max-width: 100%;
  padding: 0.55rem 0.75rem;
  background: var(--lh-bubble);
  color: var(--lh-bubble-text);
  border-radius: 12px 12px 2px 12px;
  font-size: 0.95rem;
  line-height: 1.35;
}
.loc-hero-note { margin: 0; font-size: 0.82rem; text-align: center; color: var(--lh-muted); }
.loc-hero-note b { color: var(--lh-text); }

/* WhatsApp button (panel + sticky bar share it) */
.loc-hero-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.95rem 1rem;
  background: var(--lh-wa);
  color: var(--lh-wa-text);
  border-radius: 14px;
  text-decoration: none;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  transition: background 0.18s ease;
}
.loc-hero-btn:hover, .loc-hero-btn:focus-visible { background: var(--lh-wa-hover); color: var(--lh-wa-text); }
.loc-hero-btn:focus-visible { outline: 2px solid var(--amber, #f59e0b); outline-offset: 3px; }
.loc-hero-btn-icon { flex-shrink: 0; }

/* Sticky bar: mobile only */
.loc-hero-sticky { display: none; }

/* Per-provider buttons stay, visually secondary (outlined) */
.loc-ab-t .provider-btn--contact,
.loc-ab-t .auth-banner-btn {
  background: transparent;
  color: var(--lh-text);
  border: 1.5px solid var(--lh-btn-line);
  box-shadow: none;
}
.loc-ab-t .provider-btn--contact:hover,
.loc-ab-t .auth-banner-btn:hover { background: var(--lh-panel); color: var(--lh-text); }

@media (max-width: 767px) {
  /* Tight header block so the first provider card lands in the first viewport. */
  .loc-ab-t h1 { font-size: 1.6rem; line-height: 1.1; margin-bottom: 0.3rem; }
  .loc-ab-t .breadcrumb { margin-bottom: 0.4rem; font-size: 0.8rem; }
  .loc-ab-t .category-description { margin-bottom: 0.4rem; font-size: 0.88rem; line-height: 1.35; }
  .loc-ab-t .location-stats { font-size: 0.85rem; margin-bottom: 0; }
  .loc-hero { margin: 0.7rem 0 0.9rem; padding: 0.85rem; gap: 0.6rem; }
  .loc-hero-pitch { font-size: 1.05rem; }
  .loc-hero-btn { padding: 0.85rem 1rem; font-size: 1.02rem; }
  .loc-ab-t .providers-grid { margin-top: 0.5rem; }

  .loc-hero-sticky {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--lh-bar);
    border-top: 1px solid var(--lh-bar-line);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
  }
  .loc-hero-sticky .loc-hero-btn { font-size: 1.02rem; padding: 0.8rem 1rem; }
  /* JS armed: hidden until the panel button scrolls out of view (app.js IntersectionObserver). */
  .loc-hero-sticky.is-js {
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .loc-hero-sticky.is-js.is-visible {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    .loc-hero-sticky.is-js, .loc-hero-sticky.is-js.is-visible { transition: none; }
  }
  /* The round floating button is replaced by the bar; keep the page end reachable. */
  body:has(.loc-hero-sticky) .floating-wa { display: none; }
  body:has(.loc-hero-sticky) { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
}