/* ---------- Base ---------- */
*{box-sizing:border-box}
:root{
  --bg:#f6f7fb;
  --text:#222;
  --muted:#666;
  --brand:#0A1F44;        /* deep navy */
  --gold:#D4AF37;         /* luxury accent */
  --card:#fff;
  --radius:16px;
  --shadow:0 10px 28px rgba(0,0,0,.12);
}
html,body{margin:0}
body{
  font-family:'Lato',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,sans-serif;
  color:var(--text); background:var(--bg); line-height:1.65;
}
img{max-width:100%; display:block}

/* ---------- Layout ---------- */
.container{width:min(1200px,92vw); margin-inline:auto}
.container.slim{width:min(900px,92vw)}
.container.narrow{width:min(780px,92vw)}
.center{text-align:center}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--brand); color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.header-wrap{
  display:flex; align-items:center; justify-content:space-between; padding:16px 0;
}
.brand{font-family:'Playfair Display',serif; font-weight:700; color:#fff; font-size:22px}
.main-nav a{color:#fff; margin-left:22px; font-weight:600; opacity:.9; text-decoration:none}
.main-nav a:hover{opacity:1; color:var(--gold)}
.nav-toggle{display:none; background:none; border:none; color:#fff; font-size:24px}

/* ---------- Hero Slider (not full-width) ---------- */
.hero{padding:28px 0 8px}
.hero-slider{
  position:relative; margin:0 auto; width:min(1040px,94vw);
  aspect-ratio:16 / 9; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  background:#000;
}
.slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease}
.slide.active{opacity:1}
.slide img{width:100%; height:100%; object-fit:cover}
.overlay{
  position:absolute; inset:auto 0 24px 24px; color:#fff;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.15));
  padding:18px 22px; border-radius:12px; width:min(85%,680px);
}
.overlay h1{font-family:'Playfair Display',serif; margin:0 0 6px; font-size:28px}
.overlay p{margin:0 0 10px; color:#f1f1f1}
.btn{
  display:inline-block; padding:10px 18px; border-radius:28px;
  border:2px solid var(--gold); color:var(--gold); text-decoration:none; font-weight:700
}
.btn:hover{background:var(--gold); color:var(--brand)}
.btn.ghost{border-color:#fff; color:#fff}
.btn.ghost:hover{background:#fff; color:#000}
.nav{position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.5);
  color:#fff; border:none; width:40px; height:40px; border-radius:50%; cursor:pointer}
.nav:hover{background:rgba(0,0,0,.7)}
.nav.prev{left:12px} .nav.next{right:12px}

/* ---------- Sections ---------- */
.page-hero{padding:48px 0 12px}
.page-hero h1{font-family:'Playfair Display',serif; color:var(--brand); margin:0 0 8px}
.page-hero p{color:var(--muted)}

.intro{padding:28px 0}
.intro h2,.cards h2,.map h2{font-family:'Playfair Display',serif; color:var(--brand); text-align:center; margin:0 0 12px}
.intro p{color:#444; text-align:center}

.cards{padding:18px 0 8px}
.grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:24px;
}



.card{
  background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column
}
.card img{height:200px; object-fit:cover}
.card .content{padding:16px}
.card h3{margin:0 0 8px; font-size:20px; color:var(--brand); font-family:'Playfair Display',serif}
.card p{margin:0 0 12px; color:#555}
.btn.small{padding:8px 14px; font-size:14px}

.map{padding:24px 0 40px}
.map-frame{width:min(900px,92vw); margin:10px auto 0; aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow)}
.map-frame img{width:100%; height:100%; object-fit:cover}
.view-all {
  text-align: center;
  margin-top: 2rem;
}


/* ---------- Casino detail ---------- */
.casino-hero .media{
  width:min(1040px,94vw); margin:18px auto; position:relative;
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)
}
.casino-hero img{width:100%; aspect-ratio:16/9; object-fit:cover}
.badge{
  position:absolute; top:16px; left:16px; background:rgba(10,31,68,.9); color:#fff;
  padding:8px 12px; border-radius:999px; border:1px solid var(--gold); font-weight:700
}
.casino-details{padding:8px 0 24px}
.two-col{display:grid; grid-template-columns:1.6fr .9fr; gap:28px}
.info-box{background:#fff; border-radius:14px; padding:16px; box-shadow:var(--shadow); margin-bottom:16px}
.info-box h3{margin:0 0 8px; font-family:'Playfair Display',serif; color:var(--brand)}

/* ---------- Blog & Post ---------- */
.post-hero{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin:12px 0}
.post-body img.post-hero{width:100%; aspect-ratio:16/9; object-fit:cover}
.richtext p{margin:0 0 14px; color:#444}
.muted{color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{background:var(--brand); color:#e9eef6; margin-top:28px}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:24px; padding:28px 0}
.site-footer h4{margin:0 0 8px; font-family:'Playfair Display',serif; color:#fff}
.site-footer a{color:#fff; opacity:.9; text-decoration:none}
.site-footer a:hover{opacity:1; color:var(--gold)}
.mini-form{display:flex; gap:8px; margin-top:6px}
.mini-form input{flex:1; padding:10px; border-radius:10px; border:1px solid #d8dce6}
.mini-form button{padding:10px 14px; border-radius:999px; border:2px solid var(--gold); background:transparent; color:#fff; font-weight:700}
.mini-form button:hover{background:var(--gold); color:var(--brand)}
.copyright{text-align:center; padding:12px 0; border-top:1px solid rgba(255,255,255,.1)}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .two-col{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .main-nav{display:none}
  .nav-toggle{display:inline-block}
}


/* --- Mobile Enhancements (auto) --- */
img, video {max-width:100%; height:auto; display:block}
.container {width:min(100%, 1140px); margin-left:auto; margin-right:auto; padding:0 16px}
button, .btn, a.btn {min-height:44px; padding:12px 16px; line-height:1.2}
input, select, textarea {width:100%; min-height:44px; padding:12px 14px; border-radius:10px}
.nav-toggle {display:none; background:none; border:none; font-size:28px; line-height:1}
.table-wrap {overflow-x:auto; -webkit-overflow-scrolling:touch}
.card-grid {display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}

@media (max-width: 1024px) {
  .card-grid {grid-template-columns:repeat(2, 1fr)}
}
@media (max-width: 768px) {
  .main-nav {display:none; flex-direction:column; gap:12px; background:var(--card, #fff); padding:12px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.08)}
  .nav-toggle {display:inline-block}
  .hero {padding:16px 0}
  h1 {font-size:clamp(22px, 6vw, 34px)}
  h2 {font-size:clamp(18px, 5vw, 28px)}
  .card-grid {grid-template-columns:1fr}
  .grid, .cards .grid {display:grid; grid-template-columns:1fr; gap:16px}
  .container.slim, .container.narrow {width:min(92vw, 760px)}
}
@media (max-width: 420px) {
  body {font-size:16px}
  .btn.small {padding:10px 14px; font-size:14px}
}


/* ===== Mobile-Optimized Hero Slider (Enhanced) ===== */
.hero{padding:20px 0}
.hero-slider{
  position:relative;
  margin:0 auto;
  width:min(1040px,94vw);
  aspect-ratio:16/9;
  border-radius:var(--radius, 16px);
  overflow:hidden;
  box-shadow:var(--shadow, 0 10px 28px rgba(0,0,0,.12));
  background:#000;
}
.slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity .8s ease;
  will-change: opacity;
}
.slide.active{opacity:1; z-index:1}
.slide img{
  width:100%; height:100%; object-fit:cover;
  transform:translateZ(0);
}
/* Readability: gradient wash over image */
.slide::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,31,68,.78) 0%, rgba(10,31,68,.35) 45%, rgba(10,31,68,0) 70%);
  pointer-events:none;
}
/* Text overlay pinned to bottom with good contrast */
.overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding: clamp(14px, 3.5vw, 28px);
  color:#fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.overlay h1{
  font-family:'Playfair Display', serif;
  margin:0 0 .2em;
  font-size: clamp(20px, 5.2vw, 38px);
  line-height:1.12;
}
.overlay p{
  margin:0 0 .8em;
  color:rgba(255,255,255,.92);
  font-size: clamp(14px, 3.5vw, 18px);
}
.overlay .btn{ background: var(--gold, #D4AF37); color:#0A1F44; border:none }
.overlay .btn:hover{ filter:brightness(1.05) }
@media (max-width: 768px){
  .hero{padding:12px 0 4px}
  .overlay{
    backdrop-filter: saturate(120%) blur(2px);
    background: linear-gradient(to top, rgba(10,31,68,.72), rgba(10,31,68,.15));
    border-top-left-radius: 12px; border-top-right-radius: 12px;
  }
}
@media (prefers-reduced-motion: reduce){
  .slide{ transition:none }
}
/* ===== End Enhanced Slider ===== */


/* === Mobile: image-only hero slider (no text/overlay) === */
@media (max-width: 768px){
  .hero-slider .overlay{ display:none !important; }
  .hero-slider .slide::after{ display:none !important; } /* remove gradient wash */
  /* Optional: give a bit more vertical room for images on phones */
  .hero-slider{ aspect-ratio: 16 / 9; } /* keep or adjust to 3/2 as needed */
}