/* Taniti Prototype Styles – simple, clean, responsive */
:root{
  --bg:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --primary:#0ea5e9;
  --primary-600:#0284c7;
  --border:#e2e8f0;
  --card:#f8fafc;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.container{width:min(1100px,92%);margin-inline:auto}
.container.narrow{width:min(820px,92%)}
h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
h1{font-size:clamp(1.75rem,2.2vw+1rem,2.5rem)}
h2{font-size:clamp(1.25rem,1.2vw+1rem,1.6rem);margin-top:1rem}
h3{font-size:1.05rem}
p{margin:0 0 .75rem}
.muted{color:var(--muted)}

/* Header */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--border);z-index:10}
.header-inner{display:flex;align-items:center;gap:1rem;min-height:64px}
.logo{font-weight:800;letter-spacing:.08em}
.nav{margin-left:auto;display:flex;align-items:center;gap:.75rem}
.nav-list{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.hamburger{display:none;flex-direction:column;gap:4px;background:transparent;border:0;padding:.5rem;cursor:pointer}
.hamburger span{display:block;width:22px;height:2px;background:#111;border-radius:2px}
.search{display:flex;gap:.5rem;align-items:center;margin-left:.5rem}
.search input{border:1px solid var(--border);padding:.5rem .6rem;border-radius:.5rem;min-width:220px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--primary);background:var(--primary);color:#fff;padding:.6rem .9rem;border-radius:.6rem;font-weight:600;cursor:pointer;transition:.2s}
.btn:hover{background:var(--primary-600);border-color:var(--primary-600)}
.btn.btn-sm{padding:.45rem .7rem;font-size:.9rem;border-radius:.5rem}
.btn.btn-lg{padding:.75rem 1.1rem;font-size:1.05rem}

/* Hero */
.hero{border-bottom:1px solid var(--border);background:linear-gradient(180deg,#e6f6ff,transparent)}
.hero-inner{display:grid;gap:1rem;padding:1.25rem 0}
.hero-media{background:repeating-linear-gradient(45deg,#e5e7eb,#e5e7eb 10px,#f3f4f6 10px,#f3f4f6 20px);border:2px dashed #cbd5e1;border-radius:1rem;display:grid;place-items:center;min-height:260px}
.hero .placeholder-label{opacity:.6;font-weight:700}
.hero-text{text-align:center;padding-bottom:1rem}
.hero-text p{color:var(--muted)}

/* Sections */
.quick-links,.featured,.transport,.dining{padding:1.25rem 0}
.grid{display:grid;gap:1rem}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}

.card{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.card .media{border-radius:.75rem;overflow:hidden}
.card .ph{background:#e5e7eb;border:2px dashed #cbd5e1;display:grid;place-items:center;aspect-ratio:3/2}
.card .ph span{opacity:.6;font-weight:700}
.card .meta{display:flex;align-items:center;justify-content:space-between;margin-top:.25rem}
.card .price{font-weight:700;color:#0a7cc4}
.price-chip{margin-top:auto;display:inline-block;background:#e0f2fe;color:#075985;border:1px solid #bae6fd;padding:.25rem .5rem;border-radius:.5rem;font-size:.85rem;font-weight:700}
.quick .icon{font-size:1.6rem}

/* Transport & Dining */
.transport .card p,.dining .card p{color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:1.5rem}
.footer-inner{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.site-footer nav{display:flex;gap:.75rem}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--text)}

/* Forms */
.form{margin-top:.75rem;background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:1rem;display:grid;gap:.8rem}
.form-row{display:grid;gap:.4rem}
.form-row.two{grid-template-columns:1fr 1fr;gap:.8rem}
input,select,textarea{border:1px solid var(--border);border-radius:.6rem;padding:.6rem .7rem;font:inherit}
.status{margin-top:.5rem;color:#065f46;font-weight:600}

/* Responsive */
@media (max-width: 1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 768px){
  .nav-list{display:none;position:absolute;top:64px;right:0;background:#fff;border:1px solid var(--border);border-radius:.75rem;padding:.75rem;flex-direction:column;gap:.5rem;width:220px;box-shadow:0 10px 30px rgba(2,8,23,.08)}
  .hamburger{display:flex}
  .search input{min-width:0;width:140px}
  .hero-media{min-height:180px}
  .grid-3{grid-template-columns:1fr}
}