/* =========================================================
   LookUpZ — Mobile polish (v1)
   Loaded AFTER base.css / base.addon.css / search.ux.css
   Targets: viewport <= 880px (covers iPhone SE → iPad mini)
   ========================================================= */

/* ---------- Hamburger button contrast & hit area ---------- */
@media (max-width: 880px) {
  .sb-toggle {
    background: rgba(255, 255, 255, 0.06);
    color: #f6f6ff;
    border-color: rgba(255, 255, 255, 0.12);
  }
  .sb-toggle:hover,
  .sb-toggle:focus-visible {
    background: rgba(168, 59, 255, 0.18);
    color: #fff;
    border-color: rgba(168, 59, 255, 0.55);
    outline: none;
  }
  .sb-toggle.is-active {
    background: rgba(168, 59, 255, 0.22);
    color: #fff;
    border-color: rgba(168, 59, 255, 0.65);
  }
}

/* ---------- Topbar density ---------- */
@media (max-width: 880px) {
  .topbar {
    padding: 0 12px;
    gap: 10px;
  }
  .search-trigger {
    flex: 1;
    min-width: 0;
    max-width: none;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .topbar .search-trigger kbd {
    display: none;
  }
}

@media (max-width: 520px) {
  .topbar {
    padding: 0 10px;
    gap: 8px;
  }
  .search-trigger {
    padding: 7px 10px;
    font-size: 13px;
  }
  .topbar-r {
    gap: 8px;
  }
  /* Hide status pill entirely on phones (already hidden via base at 520,
     keep here as safety net) */
  .topbar-r .status-pill {
    display: none;
  }
}

/* ---------- Hero — tighter, smaller, breathable on phones ---------- */
@media (max-width: 880px) {
  .hero {
    padding: 32px 22px 36px;
    border-radius: 18px;
  }
  .hero-eyebrow {
    font-size: 11px;
    padding: 5px 11px;
  }
  .hero-title {
    font-size: 30px;
    line-height: 1.12;
    letter-spacing: -0.8px;
  }
  .hero-sub {
    font-size: 13.5px;
    line-height: 1.55;
    max-width: 52ch;
  }
  .hero-actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .hero-actions .hero-cta {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 12px 16px;
    font-size: 13.5px;
  }
}

@media (max-width: 520px) {
  .hero {
    padding: 24px 18px 28px;
    border-radius: 16px;
  }
  .hero-title {
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -0.6px;
  }
  .hero-eyebrow {
    font-size: 10px;
    padding: 4px 9px;
  }
  .hero-sub {
    font-size: 13px;
    line-height: 1.5;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .hero-cta {
    width: 100%;
    justify-content: center;
  }
  /* Mesh blur is already reduced by base.addon.css at 880 — extra trim for perf */
  .hero .hero-mesh {
    filter: blur(40px);
    opacity: 0.7;
  }
}

/* ---------- KPI grid: keep 2 cols but stop overflow ---------- */
@media (max-width: 880px) {
  .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .stat {
    min-width: 0;
    padding: 16px 14px;
  }
  .stat-val {
    font-size: 22px;
    letter-spacing: -0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .stat-label {
    font-size: 10px;
  }
}

@media (max-width: 380px) {
  /* Tiny phones (iPhone SE first gen 320, Galaxy Fold cover): single column */
  .stats-row {
    grid-template-columns: 1fr;
  }
  .stat-val {
    font-size: 26px;
  }
}

/* ---------- Insights (Top villes / communes / codes postaux) ---------- */
@media (max-width: 880px) {
  .insights {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .insight {
    min-width: 0;
  }
  .insight-list {
    /* horizontal scroll fallback if items don't wrap */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .insight-list .insight-row,
  .insight-list li,
  .insight-list .row {
    min-width: 0;
    white-space: nowrap;
  }
}

@media (min-width: 520px) and (max-width: 880px) {
  /* Slightly wider phones/tablets: 2 cols for the insights cards themselves */
  .insights {
    grid-template-columns: 1fr 1fr;
  }
  .insights > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---------- Search panel ---------- */
@media (max-width: 880px) {
  .search-wrap {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .search-panel {
    position: static;
    max-height: none;
    padding: 16px;
  }
  .search-input,
  .search-input input,
  input[type="search"],
  input[type="text"] {
    font-size: 16px; /* avoid iOS auto-zoom on focus */
  }
}

/* ---------- Palette de commandes ⌘K — full-screen sheet on phones ---------- */
@media (max-width: 880px) {
  .palette {
    align-items: flex-start;
    padding-top: max(env(safe-area-inset-top), 12px);
  }
  .palette-box {
    width: calc(100vw - 16px);
    max-width: none;
    margin: 0 8px;
    border-radius: 16px;
    max-height: calc(100vh - 24px - env(safe-area-inset-top));
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .palette-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
  }
  .palette-input-row input {
    font-size: 16px;
  }
  .palette-foot {
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 11px;
  }
}

/* ---------- Sidebar (drawer) — touch-friendly tap targets ---------- */
@media (max-width: 880px) {
  .sidebar {
    width: min(86vw, 340px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    z-index: 60;
  }
  .sb-toggle {
    position: relative;
    z-index: 70; /* must sit above the sidebar overlay so user can re-click to close */
  }
  .sidebar-overlay {
    z-index: 50;
  }
  .src-item {
    min-height: 44px;
    padding: 10px 12px;
  }
  .nav-item {
    min-height: 44px;
    padding: 12px 14px;
  }
}

/* ---------- Main padding ---------- */
@media (max-width: 880px) {
  .main {
    padding: 16px 14px 28px;
  }
}

@media (max-width: 520px) {
  .main {
    padding: 14px 12px 24px;
  }
}

/* ---------- Detail row (search results) ---------- */
@media (max-width: 520px) {
  .res-card {
    grid-template-columns: 36px 1fr;
    padding: 12px;
    gap: 10px;
  }
  .res-card .res-action {
    display: none;
  }
  .detail-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .detail-row-label {
    font-size: 10px;
    letter-spacing: 0.05em;
  }
}

/* ---------- Safe-area bottom for notched phones ---------- */
@media (max-width: 880px) {
  .main {
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}

/* ---------- Tap target baseline for all clickable items (520 and below) ---------- */
@media (max-width: 520px) {
  button,
  .src-item,
  .nav-item,
  .res-card,
  .hero-cta {
    min-height: 44px;
  }
}

/* ---------- Reduce motion on small screens for perf ---------- */
@media (max-width: 880px) {
  .hero .hero-mesh,
  .stat-val {
    animation-duration: 1.2s !important;
  }
}

/* ---------- Hide desktop-only crumbs & brand text on phones ---------- */
@media (max-width: 520px) {
  .crumb {
    display: none;
  }
}

/* ---------- Brand: tighten on tiny screens ---------- */
@media (max-width: 880px) {
  .brand-name {
    font-size: 14px;
  }
}

/* ---------- Prevent horizontal scrollbar on the whole doc ---------- */
@media (max-width: 880px) {
  html, body {
    overflow-x: hidden;
  }
  body {
    /* allow sticky elements (topbar) to actually stick without jank */
    -webkit-tap-highlight-color: transparent;
  }
  /* Decorative full-width bleed elements: clip & tame */
  #fx-particles,
  .hero-mesh,
  .hero-grid {
    max-width: 100vw;
    overflow: hidden;
  }
  .hero-mesh {
    width: 100%;
    left: 0;
    right: 0;
  }
}

/* ---------- Focus visibility (accessibility) ---------- */
@media (max-width: 880px) {
  button:focus-visible,
  a:focus-visible {
    outline: 2px solid #a83bff;
    outline-offset: 2px;
  }
}