/* --- HERO with Hoi An image (2026-07-31 v3) --- */
/* Photo: "Vibrant evening in Hoi An's lantern-lit streets" by srkportraits on Pexels */
.hero{
  background:
    linear-gradient(180deg,
      rgba(43,33,23,0.15) 0%,
      rgba(43,33,23,0.45) 55%,
      rgba(251,246,236,0.92) 100%),
    linear-gradient(135deg, rgba(200,122,10,0.15), rgba(139,58,32,0.15)),
    url("https://images.pexels.com/photos/29818787/pexels-photo-29818787.jpeg?auto=compress&cs=tinysrgb&w=1920&h=900&fit=crop") center 45% / cover no-repeat,
    #2B2117;
  border-bottom:3px solid var(--gold);
  padding:78px 0 62px;
  position:relative;
  overflow:hidden;
  color:#FBF6EC;
}
/* keep the corner glow but make it warmer against the photo */
.hero:after{
  content:"";position:absolute;right:-60px;top:-40px;
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(245,200,120,.35),transparent 70%);
  border-radius:50%;pointer-events:none
}
/* hero eyebrow — white text with strong shadow for legibility over any image spot */
section.hero p.eyebrow{
  color:#FFFFFF !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.7) !important;
  font-weight:700 !important;
  margin:0 0 14px !important;
}
.hero h1{color:#FFFFFF !important;text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.5) !important;max-width:900px}
.hero .lede{color:#FFFFFF !important;text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.5) !important;max-width:760px}
.hero .lede em{color:#FFFFFF !important;font-style:italic}
/* Stats — all white for maximum legibility */
.hero-stats b{color:#FFFFFF !important;text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.5) !important}
.hero-stats span{color:#FFFFFF !important;text-shadow:0 1px 3px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.5) !important}
/* Buttons: primary stays ochre (contrast fine), ghost gets white on dark */
.hero .btn.ghost{color:#FFFFFF !important;border-color:#FFFFFF;background:rgba(43,33,23,.35);backdrop-filter:blur(2px)}
.hero .btn.ghost:hover{background:rgba(255,255,255,.15);border-color:#FFFFFF}
/* Attribution — small, subtle, bottom-right */
.hero-credit{position:absolute;bottom:8px;right:14px;font-size:.68rem;color:rgba(255,255,255,.75);text-shadow:0 1px 2px rgba(0,0,0,.8);z-index:2}
.hero-credit a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.hero-credit a:hover{color:#FFFFFF}

@media(max-width:640px){
  /* mobile: smaller image URL to save bandwidth (~180KB → ~60KB) */
  .hero{
    background:
      linear-gradient(180deg,
        rgba(43,33,23,0.15) 0%,
        rgba(43,33,23,0.45) 55%,
        rgba(251,246,236,0.92) 100%),
      linear-gradient(135deg, rgba(200,122,10,0.15), rgba(139,58,32,0.15)),
      url("https://images.pexels.com/photos/29818787/pexels-photo-29818787.jpeg?auto=compress&cs=tinysrgb&w=800") center 55% / cover no-repeat,
      #2B2117;
    padding:52px 0 42px;
    color:#FBF6EC;
  }
  .hero h1{font-size:2rem}
  /* tighter type on small phones (<380px) */
  .mchip{padding:7px 12px;font-size:.85rem}
}
@media(max-width:380px){
  .hero{padding:44px 0 36px}
  .hero h1{font-size:1.7rem;line-height:1.08}
  .hero .lede{font-size:.92rem}
  .hero-stats{gap:16px}
  .hero-stats b{font-size:1.6rem}
  .hero-stats span{font-size:.72rem}
  .hero-credit{font-size:.62rem;bottom:6px;right:10px}
  .mchip{padding:6px 11px;font-size:.8rem}
  .mood-chips{gap:6px}
}

/* explorer.css — discovery homepage v2 (2026-07-31)
   Now with sticky left TOC, neighbourhood banners, bolder cards */

/* ---------------- MOOD BAND (from v1) ---------------- */
.mood-band{background:#F7EEDD;border-bottom:1px solid var(--line);padding:22px 0}
.mood-band .eyebrow{margin:0 0 10px}
.mood-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.mchip{background:#fff;color:var(--ink);border:1.5px solid var(--line);
  padding:8px 15px;border-radius:22px;font-size:.9rem;font-weight:500;
  cursor:pointer;font-family:Inter,sans-serif;transition:all .15s}
.mchip:hover{border-color:var(--ochre);color:var(--ochre)}
.mchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.filter-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.filter-row #q{flex:1;min-width:200px;padding:10px 14px;
  border:1.5px solid var(--line);border-radius:8px;font-size:.95rem;
  background:#fff;font-family:Inter,sans-serif}
.filter-row #q:focus{outline:none;border-color:var(--ochre)}
.filter-row .count{font-size:.9rem;color:var(--muted);font-weight:500;white-space:nowrap}

/* ---------------- SURPRISE BOX ---------------- */
.surprise-box{background:linear-gradient(135deg,#FFF4DE,#FBE9CC);
  border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);
  padding:20px 0;text-align:center}
.surprise-lead{font-family:Fraunces,serif;font-size:1.4rem;color:var(--ink);
  margin:0 0 4px;font-style:italic}
.surprise-name{margin:0;font-size:1.05rem;color:var(--ochre)}
.surprise-name strong{color:var(--ink);font-weight:600}

/* ---------------- LAYOUT: sticky TOC + main grid ---------------- */
.rd-layout{display:grid;grid-template-columns:200px 1fr;gap:32px;margin-top:24px}

/* ---------------- MOBILE TOC (chip row + sticky select) ---------------- */
/* Hidden on desktop — sticky sidebar handles nav there */
.rd-mtoc-chips, .rd-mtoc-sticky{display:none}

@media (max-width: 900px){
  .rd-layout{grid-template-columns:1fr;gap:16px}
  .rd-toc{display:none}  /* mobile hides sticky TOC */

  /* Horizontal scrolling chip row — sits above the sections */
  .rd-mtoc-chips{
    display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;
    padding:14px 0 16px;margin:0 0 4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    /* fade the right edge so users know it scrolls */
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);
  }
  .rd-mtoc-chips::-webkit-scrollbar{display:none}
  .rd-mchip{
    flex-shrink:0;display:inline-flex;align-items:center;gap:7px;
    background:#fff;border:1.5px solid var(--line);border-radius:20px;
    padding:7px 13px;font-size:.85rem;color:var(--ink);font-weight:500;
    text-decoration:none;white-space:nowrap;transition:all .12s
  }
  .rd-mchip:hover{border-color:var(--ochre);text-decoration:none}
  .rd-mchip.active{background:var(--ochre);color:#fff;border-color:var(--ochre)}
  .rd-mchip-n{
    background:var(--line);color:var(--muted);
    font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:9px;
    line-height:1;min-width:20px;text-align:center
  }
  .rd-mchip.active .rd-mchip-n{background:rgba(255,255,255,.25);color:#fff}

  /* Sticky select bar — sticks to top of viewport when the section is in view */
  .rd-mtoc-sticky{
    display:flex;align-items:center;gap:10px;
    position:sticky;top:0;z-index:20;
    background:rgba(251,246,236,.96);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    padding:10px 22px;margin:0 -22px 8px;
  }
  .rd-mtoc-lbl{
    font-size:.75rem;color:var(--muted);font-weight:600;
    text-transform:uppercase;letter-spacing:.08em;flex-shrink:0
  }
  .rd-mtoc-select{
    flex:1;padding:8px 12px;border:1.5px solid var(--line);border-radius:8px;
    background:#fff;font-family:Inter,sans-serif;font-size:.9rem;
    color:var(--ink);font-weight:500;
    /* iOS Safari: remove default styling */
    -webkit-appearance:none;appearance:none;
    /* custom chevron */
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%237A6A52' d='M6 8L0 0h12z'/></svg>");
    background-repeat:no-repeat;background-position:right 12px center;
    padding-right:32px
  }
  .rd-mtoc-select:focus{outline:none;border-color:var(--ochre)}
}

@media (max-width: 640px){
  /* Mobile TOC sits flush with page edges on small screens */
  .rd-mtoc-sticky{padding:10px 22px;margin:0 -22px 8px}
  .rd-mchip{padding:6px 11px;font-size:.82rem}
}

/* Sticky TOC */
.rd-toc{position:sticky;top:80px;align-self:start;padding:20px 0;
  border-right:1px solid var(--line)}
.rd-toc-head{text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;
  font-weight:700;color:var(--muted);margin:0 18px 12px 0}
.rd-toc-nav{display:flex;flex-direction:column;padding-right:16px}
.rd-toc-link{display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px 8px 14px;margin-left:-2px;
  border-left:2px solid transparent;
  color:var(--ink);font-size:.9rem;text-decoration:none;
  transition:all .12s;line-height:1.25}
.rd-toc-link:hover{color:var(--ochre);text-decoration:none;background:rgba(200,122,10,.04)}
.rd-toc-link.active{color:var(--ochre);font-weight:600;
  border-left-color:var(--ochre);background:rgba(200,122,10,.06)}
.rd-toc-name{flex:1}
.rd-toc-n{background:var(--line);color:var(--muted);
  font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:9px;line-height:1;
  min-width:22px;text-align:center}
.rd-toc-link.active .rd-toc-n{background:var(--ochre);color:#fff}

/* ---------------- NEIGHBOURHOOD SECTIONS + BANNERS ---------------- */
.rd-nbsec{margin:0 0 40px;scroll-margin-top:80px;position:relative}
.rd-nbsec + .rd-nbsec{padding-top:8px}

.rd-nbhead{position:relative;padding:24px 0 16px;margin:0 0 20px;
  border-bottom:2px solid var(--ochre);min-height:70px}
.rd-nbhead-num{position:absolute;top:12px;right:0;
  font-family:Fraunces,serif;font-size:3rem;font-weight:700;
  color:#8B3A20;line-height:1;letter-spacing:-.02em;user-select:none}
.rd-nbhead-h{font-family:Fraunces,serif;font-size:1.95rem;font-weight:600;
  color:var(--ink);margin:0 0 6px;letter-spacing:-.015em;line-height:1.1;
  padding-right:60px}
.rd-nbhead-sub{color:var(--muted);font-size:.92rem;margin:0;padding-right:60px}
.rd-nbhead-sub b{color:var(--ochre);font-weight:600}

/* ---------------- CARD GRID ---------------- */
.rd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}

.rd-card{background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:0;overflow:hidden;display:flex;flex-direction:column;
  transition:all .16s;box-shadow:0 1px 3px rgba(120,80,10,.04)}
.rd-card:hover{border-color:var(--ochre);transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(120,80,10,.13)}
.rd-card-highlight{border-color:var(--ochre);background:#FFF4DE;
  box-shadow:0 0 0 3px var(--gold)}

/* Card top: title + meta */
.rd-card-head{padding:16px 18px 12px;border-bottom:1px solid #F0E8D4}
.rd-card-title{font-family:Fraunces,serif;font-size:1.3rem;font-weight:600;
  color:var(--ink);margin:0 0 5px;line-height:1.18;letter-spacing:-.015em}
.rd-card-title a{color:var(--ink);text-decoration:none}
.rd-card-title a:hover{color:var(--ochre)}
.rd-card-meta{display:flex;align-items:center;gap:6px;font-size:.82rem;flex-wrap:wrap}
.rd-price{color:var(--ochre);font-weight:600}
.rd-dot{color:var(--muted);opacity:.5}
.rd-cuisine{color:var(--muted)}

/* Card body: ratings + address */
.rd-card-body{padding:12px 18px;flex:1;display:flex;flex-direction:column;gap:8px}
.rd-rates{display:flex;flex-wrap:wrap;gap:6px}
.rd-rate{background:#FBF6EC;border:1px solid var(--line);border-radius:6px;
  padding:4px 9px;font-size:.8rem;color:var(--ink);font-weight:500;white-space:nowrap;
  text-decoration:none}
.rd-rate:hover{text-decoration:none}
.rd-rate.t{background:#eaf7ef;border-color:#bfe6cd;color:#176b45}
.rd-rate.t:hover{background:#d8edde}
.rd-rate b{font-weight:700}
.rd-rate .n{color:var(--muted);font-weight:400}
.rd-addr{font-size:.78rem;color:var(--muted);margin:0;line-height:1.4}

/* Card foot: action buttons */
.rd-card-foot{padding:10px 18px 14px;border-top:1px solid #F0E8D4;
  display:flex;gap:6px}
.rd-btn{background:transparent;border:1.5px solid var(--line);
  color:var(--ink);padding:7px 12px;border-radius:7px;
  font-size:.8rem;font-weight:500;text-decoration:none;flex:1;text-align:center;
  transition:all .12s;font-family:Inter,sans-serif}
.rd-btn:hover{border-color:var(--ochre);color:var(--ochre);text-decoration:none}
.rd-btn.primary{background:var(--ochre);color:#fff;border-color:var(--ochre)}
.rd-btn.primary:hover{background:#B36908;border-color:#B36908;color:#fff}

/* Hero button as button element */
.hero-cta button.btn{cursor:pointer;font-family:inherit}

/* Small mobile tweaks */
@media (max-width: 640px){
  .rd-nbhead-num{font-size:2.2rem;top:16px}
  .rd-nbhead-h{font-size:1.5rem;padding-right:48px}
  .rd-nbhead-sub{padding-right:0;font-size:.86rem}
  .rd-card-title{font-size:1.15rem}
  .rd-grid{grid-template-columns:1fr}
}

/* ---------------- RATINGS BLOCK (detail pages) ---------------- */
.rblock{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.rblock-title{font-family:Fraunces,serif;font-size:1.25rem;font-weight:600;
  color:var(--ink);line-height:1.25;margin:0}
.rblock-cuisine{font-size:.85rem;color:var(--muted);margin:0}
.rblock-line{display:flex;align-items:baseline;gap:12px;padding:8px 0;
  border-top:1px dashed var(--line)}
.rblock-src{font-size:.82rem;color:var(--muted);min-width:90px;font-weight:500}
.rblock-val{font-family:Fraunces,serif;font-size:1.7rem;color:var(--ochre);
  font-weight:700;line-height:1}
.rblock-count{font-size:.82rem;color:var(--muted);margin-left:auto}