/* Finnting — home hero + map panel ONLY.
   Loaded on top of the global style.css (via layout_header headExtra) on the
   front page. The topbar, footer, cards/grids/shelves/tiles/cta all come from
   style.css now — one source of truth (PR-46 convergence). This file owns just
   the segmented category-first hero + the Leaflet map panel. */

:root{
  --forest:#234b38; --forest-dark:#1c2b21; --amber:#e5a93c;
  --cream:#fbfaf4; --hero-bg:#f6f3ea; --hero-bg-2:#e7e2d3; --border:#d9d3c2;
  --tint:#e6eedf; --tint-2:#e7efe0; --muted:#5b6357; --muted-2:#7a8270;
  --map:#dce6e9; --map-2:#c7d9de;
}

/* ---------- HERO ----------
   Breaks out of .main's padding (28px top / 20px sides) to span the full 1400
   container, flush under the global header. */
.home-hero{display:flex;min-height:600px;margin:-28px -20px 0;}
.hero-left{width:58%;background:linear-gradient(160deg,var(--hero-bg) 0%,var(--hero-bg-2) 140%);padding:54px 32px 60px 56px;display:flex;flex-direction:column;justify-content:center;}
/* Headline on top-left, the "gratis" badge filling the empty space to its right. */
.hero-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin:0 0 20px;}
.hero-right{width:42%;position:relative;background:var(--map-2);min-height:520px;margin-top:56px;border-radius:16px 0 0 0;overflow:hidden;}
.pill-badge{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;background:rgba(229,169,60,.16);color:#9a6c14;border:1px solid rgba(229,169,60,.4);font-weight:600;font-size:13px;padding:6px 13px;border-radius:999px;}
.hero-head .pill-badge{flex-shrink:0;margin-top:8px;}
.pill-badge .sparkle{color:var(--amber);font-size:14px;}
.headline{font-family:'Hanken Grotesk',sans-serif;font-weight:800;color:var(--forest-dark);font-size:clamp(44px,5vw,68px);line-height:1.02;letter-spacing:-.03em;margin:0;}
.subtext{color:var(--muted);font-size:18px;line-height:1.45;margin:0 0 30px;max-width:460px;}

/* segmented category-first control */
.search-block{max-width:none;}
.seg-label{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin:0 0 10px 2px;}
.segmented{display:flex;gap:6px;background:#fff;border:1px solid var(--border);border-radius:16px 16px 0 0;border-bottom:none;padding:7px;box-shadow:0 6px 18px rgba(28,43,33,.06);}
.seg{display:flex;align-items:center;gap:7px;flex:1 1 auto;min-width:0;justify-content:center;white-space:nowrap;border:1.5px solid transparent;background:transparent;color:var(--muted);font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:14.5px;padding:11px 12px;border-radius:11px;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;}
.seg .ico{width:22px;height:22px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.seg .ico svg{width:20px;height:20px;}
.seg:hover{background:var(--tint-2);color:var(--forest-dark);}
.seg.active{background:var(--forest);color:#fff;border-color:var(--forest);box-shadow:0 2px 6px rgba(35,75,56,.28);}
.seg.active .ico svg path,.seg.active .ico svg circle,.seg.active .ico svg rect{stroke:#fff;}

/* search bar — one per category, attached beneath; only the active pane shows */
.searchbar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:0 0 16px 16px;padding:8px 8px 8px 16px;box-shadow:0 10px 26px rgba(28,43,33,.08);}
.searchbar[hidden]{display:none;}
.searchbar .search-ico{color:var(--muted-2);flex-shrink:0;display:flex;}
.searchbar input{flex:1;border:none;outline:none;font-family:'Hanken Grotesk',sans-serif;font-size:16px;color:var(--forest-dark);background:transparent;min-width:0;padding:8px 2px;}
.searchbar input::placeholder{color:var(--muted-2);}
.btn-search{background:var(--forest);color:#fff;border:none;cursor:pointer;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:15px;padding:11px 20px;border-radius:11px;flex-shrink:0;transition:background .15s ease;}
.btn-search:hover{background:#1d3e2f;}

/* suggestion chips */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px;}
.chip{display:inline-block;text-decoration:none;background:#fff;border:1px solid var(--border);color:var(--muted);font-size:13.5px;font-weight:500;padding:7px 13px;border-radius:999px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;}
.chip:hover{background:var(--tint);border-color:#bcccb0;color:var(--forest);}

/* compact stat chips */
.stat-chips{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap;}
.stat-card{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:11px 13px 11px 11px;flex:1 1 140px;min-width:140px;cursor:pointer;transition:transform .12s ease,box-shadow .15s ease,border-color .15s ease;box-shadow:0 1px 2px rgba(28,43,33,.04);color:inherit;text-decoration:none;}
.stat-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(28,43,33,.10);border-color:#cdc6b2;}
.stat-card .icon-sq{width:42px;height:42px;border-radius:11px;background:var(--tint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.stat-card .meta{display:flex;flex-direction:column;min-width:0;}
.stat-card .meta .name{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:15px;color:var(--forest-dark);line-height:1.1;}
.stat-card .meta .count{font-size:13px;color:var(--muted-2);margin-top:2px;}

/* ---------- MAP PANEL ---------- */
.map-wrap{position:absolute;inset:0;overflow:hidden;}
#map{width:100%;height:100%;min-height:520px;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.35),transparent 60%),var(--map);background-color:var(--map);z-index:1;}
.leaflet-container{font-family:'Hanken Grotesk',sans-serif;}
.map-deco{position:absolute;inset:0;pointer-events:none;opacity:.5;z-index:2;background-image:linear-gradient(115deg,transparent 48%,rgba(199,217,222,.9) 49%,rgba(199,217,222,.9) 51%,transparent 52%),linear-gradient(200deg,transparent 60%,rgba(199,217,222,.7) 61%,rgba(199,217,222,.7) 62.5%,transparent 63%),linear-gradient(20deg,transparent 35%,rgba(208,224,228,.8) 36%,rgba(208,224,228,.8) 37.5%,transparent 38%);}
.bubble{position:absolute;z-index:3;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:14px;color:#fff;padding:8px 13px;border-radius:999px;box-shadow:0 4px 12px rgba(28,43,33,.28);display:flex;align-items:center;gap:5px;cursor:default;border:2px solid rgba(255,255,255,.85);}
.bubble::after{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid currentColor;}
.bubble.green{background:var(--forest);color:#fff;}
.bubble.green::after{color:var(--forest);}
.bubble.amber{background:var(--amber);color:var(--forest-dark);}
.bubble.amber::after{color:var(--amber);}
.b1{top:18%;left:24%;}.b2{top:34%;left:62%;}.b3{top:58%;left:38%;}.b4{top:70%;left:70%;}
.map-wrap.live .map-deco,.map-wrap.live .bubble{opacity:0;visibility:hidden;transition:opacity .3s ease;}
.map-float{position:absolute;bottom:22px;right:22px;z-index:4;background:#fff;border-radius:999px;padding:11px 18px;display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:var(--forest-dark);box-shadow:0 8px 24px rgba(28,43,33,.22);}
.map-float .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);flex-shrink:0;box-shadow:0 0 0 4px rgba(229,169,60,.25);}
.map-float strong{font-family:'Hanken Grotesk',sans-serif;font-weight:800;}
/* Hero-map place search (fly to a city/place) */
.ft-mapsearch{display:flex;align-items:center;background:#fff;border:1px solid rgba(28,43,33,.12);border-radius:999px;box-shadow:0 4px 14px rgba(28,43,33,.22);overflow:hidden;}
.ft-mapsearch input{border:0;outline:0;background:transparent;font:inherit;font-size:14px;padding:8px 4px 8px 14px;width:140px;}
.ft-mapsearch button{border:0;background:transparent;cursor:pointer;font-size:15px;line-height:1;padding:8px 12px 8px 6px;}
.ft-mapsearch.loading{opacity:.6;}
@media (max-width:560px){.ft-mapsearch input{width:104px;}}

/* ---------- RESPONSIVE (hero only) ---------- */
@media (max-width:1000px){.hero-left{padding:44px 36px 48px;}}
@media (max-width:900px){
  .home-hero{flex-direction:column;min-height:0;}
  .hero-left{width:100%;padding:40px 28px 44px;}
  .hero-right{width:100%;min-height:340px;margin-top:0;border-radius:0;}
  #map{min-height:340px;}
  .b1{top:16%;left:18%;}.b2{top:30%;left:64%;}.b3{top:60%;left:30%;}.b4{top:66%;left:72%;}
}
@media (max-width:560px){
  .hero-left{padding:32px 20px 40px;}
  .hero-head{flex-direction:column;align-items:flex-start;gap:12px;}
  .hero-head .pill-badge{margin-top:0;}
  .headline{font-size:clamp(38px,11vw,48px);}
  .subtext{font-size:16px;}
  /* DV94: 5 tabs can't share one row at phone width — without wrap they
     overlapped/clipped ("Bå…", "Bruktmark…"). Wrap to a 2-per-row layout. */
  .segmented{flex-wrap:wrap;}
  .seg{min-width:0;flex:1 1 40%;font-size:14px;padding:11px 6px;}
  .searchbar{flex-wrap:wrap;}
  .searchbar input{flex:1 1 0;min-width:0;}
  .btn-search{flex:1 1 100%;}
  .stat-chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
}