/* ===========================================================================
   style.css — mobile-first. Warm, appetite-friendly, fast.
   Layout zones: header / [left · main · right] / footer.
   Phones: single column, left sidebar = slide-in drawer, right sidebar hidden.
   =========================================================================== */

:root{
  --bg:#FBF7F0; --surface:#fff; --surface-2:#F3ECE0;
  --ink:#2A2420; --muted:#7A726B; --line:rgba(42,36,32,.12);
  --coral:#D85A30; --coral-dark:#993C1D; --amber:#EF9F27;
  --r:14px; --r-sm:10px; --pad:18px; --maxw:1200px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100dvh;
}
a{color:var(--coral-dark); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
h1,h2{line-height:1.2; margin:0}

.skip{position:absolute; left:-999px}
.skip:focus{left:12px; top:12px; background:var(--ink); color:#fff; padding:8px 12px; border-radius:var(--r-sm); z-index:1000}

/* ---- header --------------------------------------------------------------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px var(--pad);
  border-bottom:1px solid var(--line); background:var(--bg);
  position:sticky; top:0; z-index:30;
}
.brand{display:inline-flex; align-items:center; gap:8px; font-size:19px; font-weight:600; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{color:var(--coral)}
.top-nav{display:flex; align-items:center; gap:14px}
.top-nav a{color:var(--ink); font-size:15px}
.lang-switch{border:1px solid var(--line); border-radius:var(--r-sm); padding:4px 9px; font-weight:600; font-size:13px}
.menu-btn{font-size:22px; line-height:1; cursor:pointer; padding:2px 4px}

/* ---- layout grid ---------------------------------------------------------- */
.layout{flex:1; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.main{padding:22px 0; min-width:0}
.sidebar{padding:8px 0}
.side-title{font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:18px 0 8px}
.side-link{display:block; padding:9px 12px; border-radius:var(--r-sm); color:var(--ink); font-size:15px}
.side-link:hover{background:var(--surface-2); text-decoration:none}
.side-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; margin-bottom:14px}
.side-text{color:var(--muted); font-size:14px; margin:0}

/* drawer (mobile) */
.nav-toggle{display:none}
.drawer-overlay{position:fixed; inset:0; background:rgba(20,16,12,.4); opacity:0; pointer-events:none; transition:opacity .2s; z-index:40}
.sidebar-left{
  position:fixed; top:0; left:0; bottom:0; width:272px; max-width:84vw;
  background:var(--bg); border-right:1px solid var(--line);
  padding:20px var(--pad); overflow-y:auto;
  transform:translateX(-100%); transition:transform .22s ease; z-index:50;
}
#nav-toggle:checked ~ .layout .sidebar-left{transform:translateX(0)}
#nav-toggle:checked ~ .layout .drawer-overlay{opacity:1; pointer-events:auto}
.sidebar-right{display:none}

/* ---- hero (home) ---------------------------------------------------------- */
.hero{max-width:1000px; margin:0 auto; text-align:center; padding:8px 0}
.hero-title{font-size:30px; font-weight:700; letter-spacing:-.01em; margin-bottom:22px}
.hero-title .hl{color:var(--coral)}
.hero-intro{color:var(--muted); margin:22px auto 0; max-width:620px}

.searchbar{
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; padding:7px 7px 7px 16px;
  box-shadow:0 6px 22px rgba(216,90,48,.10);
}
.searchbar-icon{color:var(--coral); font-size:20px; line-height:1}
.searchbar input{flex:1; border:0; outline:none; background:transparent; font-size:16px; min-width:0; color:var(--ink)}
.searchbar button{
  border:0; background:var(--coral); color:#fff; font-weight:600; font-size:15px;
  padding:11px 20px; border-radius:999px; cursor:pointer; white-space:nowrap;
}
.searchbar button:hover{background:var(--coral-dark)}
.searchbar-compact{box-shadow:none; margin-bottom:18px}

.hero-chips,.chips{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:16px}
.chips{justify-content:flex-start}
.chip{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:7px 13px; font-size:14px}
.chip:hover{background:var(--surface-2); text-decoration:none}

/* ---- results -------------------------------------------------------------- */
.results-head{color:var(--muted); margin:0 0 14px}
.result-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.result-card{display:flex; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.result-img{width:96px; height:96px; object-fit:cover; border-radius:var(--r-sm); flex:none}
.result-body{flex:1; min-width:0}
.result-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.result-dish{font-size:18px; font-weight:600}
.result-meta{color:var(--muted); margin:4px 0 10px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.result-intro{color:var(--muted); margin:4px 0}
.price{color:var(--coral-dark); font-weight:600}
.badge{background:var(--amber); color:#5a3a06; font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px}

.result-actions{display:flex; gap:8px; flex-wrap:wrap}
.btn{display:inline-block; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:14px; font-weight:600; padding:9px 15px; border-radius:999px; cursor:pointer}
.btn:hover{background:var(--surface-2); text-decoration:none}
.btn-call{background:var(--coral); color:#fff; border-color:var(--coral)}
.btn-call:hover{background:var(--coral-dark)}
.btn-ghost{background:transparent}
.results-foot{margin-top:18px}

/* ---- result page: focused, full-width, sidebars hidden ------------------- */
body.page-results .sidebar,
body.page-results .drawer-overlay{display:none}
body.page-results .layout{display:block}
body.page-results .main{max-width:920px; margin:0 auto}
body.page-home .menu-btn,
body.page-results .menu-btn{display:none}

/* ---- featured "top match" ------------------------------------------------ */
.feature{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; box-shadow:0 12px 34px rgba(216,90,48,.10); margin:6px 0 22px}
.feature-grid{display:grid; grid-template-columns:1fr}
.feature-info{padding:22px}
.feature-head{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.feature-thumb{width:56px; height:56px; border-radius:12px; object-fit:cover; flex:none}
.feature-flag{display:inline-block; background:var(--coral); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:3px 9px; border-radius:999px; margin:0 0 4px}
.feature-rest{color:var(--muted); font-size:14px; margin:0}
.feature-rest a{color:var(--ink); font-weight:600}
.feature-dish{font-size:26px; font-weight:700; letter-spacing:-.01em; margin:0;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.feature-price{color:var(--coral-dark); font-weight:700; font-size:18px; margin:8px 0 0}
.feature-desc{margin:12px 0 0; line-height:1.6}
.feature-intro{color:var(--muted); font-size:14px; line-height:1.6; margin:10px 0 0}
.feature-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:18px}
.feature-map{display:flex; flex-direction:column; border-top:1px solid var(--line); min-height:220px}
.osm{flex:1; width:100%; height:220px; border:0; background:var(--surface-2)}
.map-link{display:block; padding:11px 16px; font-size:14px; font-weight:600; border-top:1px solid var(--line)}

/* more places: compact horizontal strip */
.more-title{font-size:14px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:0 0 12px}
.more-strip{display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.more-card{flex:0 0 230px; scroll-snap-align:start; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:13px; display:flex; gap:11px; align-items:center}
.more-card:hover{background:var(--surface-2); text-decoration:none}
.more-card img{width:50px; height:50px; border-radius:10px; object-fit:cover; flex:none}
.more-card .result-dish{font-size:15px; font-weight:600; color:var(--ink)}
.more-card .result-meta{display:block; margin:3px 0 0; font-size:13px; color:var(--muted)}

@media (min-width:760px){
  .feature-grid{grid-template-columns:1fr 340px}
  .feature-map{border-top:0; border-left:1px solid var(--line)}
  .osm{height:100%; min-height:300px}
}

/* ---- empty state ---------------------------------------------------------- */
.empty{text-align:center; max-width:380px; margin:24px auto; display:flex; flex-direction:column; align-items:center; gap:12px}
.empty-title{font-size:20px; font-weight:600}
.empty-text{color:var(--muted); margin:0}

/* ---- restaurant page ------------------------------------------------------ */
.restaurant{max-width:760px; margin:0 auto}
.restaurant-img{width:100%; height:auto; max-height:340px; object-fit:cover; border-radius:var(--r); margin-bottom:18px}
.restaurant-name{font-size:26px; font-weight:700}
.restaurant-intro{color:var(--ink); margin:10px 0}
.restaurant-addr{color:var(--muted); margin:0 0 16px}
.menu-title{font-size:18px; margin:24px 0 10px}
.menu-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.menu-item{border-bottom:1px solid var(--line); padding-bottom:14px}
.menu-item-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.menu-item-name{font-weight:600; font-size:16px}
.menu-item-price{margin-left:auto; color:var(--coral-dark); font-weight:600}
.menu-item-desc{color:var(--muted); margin:5px 0 0}

/* ---- footer --------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line); padding:18px var(--pad); color:var(--muted); font-size:14px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.site-footer .dot{opacity:.5}

/* ---- home: centered, symmetric, sidebars hidden -------------------------- */
body.page-home{min-height:100dvh}
body.page-home .layout{display:flex; align-items:center; justify-content:center}
body.page-home .sidebar,
body.page-home .drawer-overlay{display:none}
body.page-home .main{width:100%; padding:24px 0}

.hero-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; text-align:left}
.hero-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px}
.hero-card .side-title{margin-top:0}
@media (max-width:560px){ .hero-cards{grid-template-columns:1fr} }

/* ---- desktop -------------------------------------------------------------- */
@media (min-width:900px){
  .menu-btn{display:none}
  .drawer-overlay{display:none}
  .layout.has-sidebars{display:grid; grid-template-columns:240px minmax(0,1fr) 260px; gap:26px; padding-top:8px}
  .has-sidebars .sidebar-left{position:static; transform:none; width:auto; max-width:none; border:0; padding:8px 0; overflow:visible}
  .has-sidebars .sidebar-right{display:block}
  .hero-title{font-size:38px}
  body.page-home .layout{align-items:center}
}

@media (prefers-reduced-motion:reduce){
  .sidebar-left,.drawer-overlay{transition:none}
}

/* ===========================================================================
   results map layout — all hits on one map + side tiles (added v4)
   Phone: search · sticky map · tiles scroll beneath.
   ≥860px: map on the left (sticky), tiles in a scroll column on the right.
   =========================================================================== */
.results-count{color:var(--muted); font-weight:400}

.map-layout{display:flex; flex-direction:column; gap:16px; margin:6px 0 18px}

.map-pane{position:sticky; top:60px; z-index:5}
.results-map{
  height:42vh; min-height:240px; width:100%;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-2); box-shadow:0 12px 34px rgba(216,90,48,.10);
}
.leaflet-container{border-radius:var(--r); font-family:var(--font)}

.tile-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px; scroll-margin-top:74px; transition:border-color .15s, box-shadow .15s, background .15s;
}
.tile.is-mappable{cursor:pointer}
.tile.is-mappable:hover{border-color:rgba(216,90,48,.45)}
.tile.is-active{
  border-color:var(--coral); background:#FFF6F1;
  box-shadow:0 0 0 2px rgba(216,90,48,.18), 0 10px 26px rgba(216,90,48,.12);
}

.tile-top{display:flex; gap:12px; align-items:flex-start}
.tile-thumb{width:48px; height:48px; border-radius:10px; object-fit:cover; flex:none}
.tile-headings{min-width:0; flex:1}
.tile-rest{margin:0; font-size:14px; color:var(--muted); display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.tile-rest a{color:var(--ink); font-weight:600; font-size:15px}
.tile-pin{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%; flex:none;
  background:var(--coral); color:#fff; font-size:12px; font-weight:700;
}
.tile-flag{
  background:var(--coral); color:#fff; font-size:10px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:2px 7px; border-radius:999px;
}
.tile-dish{margin:5px 0 0; font-size:17px; font-weight:700; line-height:1.3; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.tile-price{color:var(--coral-dark); font-weight:700; font-size:15px}

.tile-contact{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; font-size:14px; color:var(--muted)}
.tile-contact li{display:flex; gap:8px; align-items:baseline}
.tile-contact li span{flex:none; opacity:.7; font-size:13px}
.tile-contact a{color:var(--coral-dark)}

.tile-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}

@media (min-width:860px){
  .map-layout{
    display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:20px;
    align-items:start;
  }
  .map-pane{position:sticky; top:74px}
  .results-map{height:calc(100dvh - 120px); min-height:420px}
  .tile-list{
    max-height:calc(100dvh - 120px); overflow-y:auto; padding-right:4px;
    scrollbar-width:thin;
  }
}