/* ═══════════════════════════════════════════════
   DESTINATIONS.CSS — Destinations overview page
   Vietnam City Breaks
   Layout A: compact hero + sticky region tabs + region grids
   ═══════════════════════════════════════════════ */

/* ── Hero (compact image) ── */
.ds-hero{position:relative;min-height:300px;display:flex;align-items:flex-end;justify-content:center}
.ds-hero-clip{position:absolute;inset:0;overflow:hidden;z-index:0}
.ds-hero-bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1528127269322-539801943592?w=1920&q=85') center/cover no-repeat;animation:kenBurns 18s ease-in-out infinite alternate}
.ds-hero-overlay{position:absolute;inset:0;background:linear-gradient(160deg,rgba(15,15,35,.78) 0%,rgba(10,60,60,.6) 100%)}
.ds-hero-content{position:relative;z-index:2;width:100%;max-width:var(--mw);padding:3.75rem 1.25rem 2.75rem;margin:0 auto}

.ds-breadcrumb{margin-bottom:1rem}
.ds-breadcrumb ol{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;font-size:.8rem;color:rgba(255,255,255,.65)}
.ds-breadcrumb ol li:not(:last-child)::after{content:'/';margin:0 .5rem;opacity:.5}
.ds-breadcrumb ol a{color:rgba(255,255,255,.65);transition:color .2s}
.ds-breadcrumb ol a:hover{color:#fff}
.ds-breadcrumb ol li:last-child{color:rgba(255,255,255,.9)}

.ds-hero-pill{display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.13);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.22);color:#FFD580;padding:.35rem .9rem;border-radius:20px;font-size:.78rem;font-weight:600;margin-bottom:1rem}
.ds-hero-content h1{font-family:var(--fh);color:#fff;font-size:clamp(1.85rem,4vw,2.9rem);font-weight:800;line-height:1.18;margin-bottom:.7rem;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.ds-hero-content p{color:rgba(255,255,255,.88);font-size:clamp(.95rem,2vw,1.1rem);max-width:62ch;line-height:1.6}

/* ── Sticky region tabs ── */
.ds-tabs{position:sticky;top:67px;z-index:900;background:#fff;border-bottom:1px solid var(--border);box-shadow:0 2px 12px rgba(0,0,0,.05)}
.ds-tabs-inner{display:flex;gap:.5rem;align-items:center;justify-content:center;padding:.7rem 1.25rem;flex-wrap:wrap}
.ds-tab{display:inline-flex;align-items:center;padding:.5rem 1.25rem;font-family:var(--fh);font-size:.82rem;font-weight:700;border-radius:50px;background:#fff;border:2px solid var(--border);color:var(--text-b);cursor:pointer;transition:background .2s,color .2s,border-color .2s;min-height:40px}
.ds-tab:hover,.ds-tab.is-active{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ── Region sections ── */
#north,#central,#south{scroll-margin-top:128px}

/* ── Responsive ── */
@media(max-width:768px){
  .ds-hero{min-height:260px}
  .ds-hero-content{padding:3rem 1.25rem 2rem}
  .ds-tabs-inner{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:.4rem}
  .ds-tabs-inner::-webkit-scrollbar{display:none}
  .ds-tab{flex:0 0 auto;white-space:nowrap}
  #north,#central,#south{scroll-margin-top:118px}
}
@media(prefers-reduced-motion:reduce){
  .ds-hero-bg{animation:none}
}