/* =====================
   Bagi Lovina — Global CSS
   ===================== */
:root{
  --bg:#0b1220;
  --ink:#f6f7fb;
  --muted:#c7cfdb;
  --primary:#00b4d8;     /* aqua */
  --secondary:#f4a261;   /* sand */
  --accent:#90e0ef;      /* light aqua */
  --brand:#f0f9ff;
  --card:#11182a;
  --glass:rgba(255,255,255,.06);
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0; background:var(--bg); color:var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
img{max-width:100%; display:block}
a{color:var(--accent); text-decoration:none}
.container{width:min(1120px, 92vw); margin-inline:auto}

/* Typography */
.eyebrow{letter-spacing:.2em; text-transform:uppercase; font-size:.78rem; color: var(--muted)}
.h1{font-size: clamp(2.2rem, 4vw + 1rem, 4rem); line-height:1.05; margin:0}
.h2{font-size: clamp(1.6rem, 2.2vw + 1rem, 2.6rem); line-height:1.1; margin:.4rem 0}
.h3{font-size: 1.4rem; margin:.2rem 0}
.lead{font-size: clamp(1.05rem, .5vw + 1rem, 1.25rem); color: var(--muted)}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:.6rem; padding:.8rem 1.1rem; border-radius: 999px; background: var(--primary); color:#051018; font-weight: 700; box-shadow: var(--shadow); transition: transform .15s ease, filter .2s ease}
.btn:hover{transform: translateY(-1px); filter: brightness(1.06)}
.btn.outline{background:transparent; border:1px solid var(--accent); color:var(--ink)}

/* NAV */

/* Hero */

.hero{position:relative; min-height: 82vh; display:grid; place-items:center; text-align:center; background: radial-gradient(1200px 600px at 70% -10%, rgba(0,180,216,.18), transparent 60%), linear-gradient(#081021, #08121e)}
.hero::before{content:''; position:absolute; inset:0; background:url('https://images.unsplash.com/photo-1724443687291-00e62d100182?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat; opacity:.28; mix-blend: screen}
.hero .wrap{position:relative; z-index:1; padding: 4rem 0 3rem}
.hero .badges{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin:.6rem 0 1.1rem}
.badge{background: var(--glass); border:1px solid rgba(255,255,255,.08); padding:.3rem .6rem; border-radius:999px; font-size:.85rem; color: var(--muted)}

/* Sections */
.section{padding: clamp(2.4rem, 5vw, 4.4rem) 0}
/* Base grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 1rem;
}

/* Break into one column on small screens */
@media (max-width: 860px) {
  .grid > * {
    grid-column: 1 / -1 !important;
  }
}

.card{background: var(--card); border: 1px solid rgba(255,255,255,.06); border-radius: var(--radius); box-shadow: var(--shadow)}
.card .body{padding:1.1rem}
.muted{color: var(--muted)}

/* Tour cards */
.tour{grid-column: span 4}
.tour img{border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); }
.tour .meta{display:flex; gap:.6rem; align-items:center; color: var(--muted); font-size:.95rem}
.tour.card img {
  width: 100%;
  height: 240px;         /* fixed height (adjust as needed: 220 / 260 / etc.) */
  object-fit: cover;     /* crop to fill without distortion */
  border-radius: 12px 12px 0 0;  /* optional: rounded top corners */
  display: block;
}

@media (max-width: 960px){ .tour{grid-column: span 6} }
@media (max-width: 640px){ .tour{grid-column: span 12} }

/* Gallery */
.masonry{columns: 3 260px; column-gap: 14px}
.masonry img{width:100%; margin: 0 0 14px; border-radius:12px; filter: saturate(1.04) contrast(1.02)}

/* Feature rows */
.feature{display:grid; grid-template-columns: 1.2fr 1fr; gap:1.2rem; align-items:center}
.feature .img{border-radius:14px; overflow:hidden}
@media (max-width: 860px){ .feature{grid-template-columns: 1fr} }
.feature.card .img {
  height: 320px;           /* fixed height — adjust as needed */
  overflow: hidden;        /* crop overflow */
  border-radius: 12px;     /* optional, for rounded corners */
}

.feature.card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* keeps aspect ratio, crops edges */
  display: block;
}


/* Footer */
.footer{border-top:1px solid rgba(255,255,255,.06); padding:2rem 0; color: var(--muted)}
.foot-grid{display:grid; grid-template-columns: 1.3fr .9fr .9fr; gap:1rem}
@media (max-width:760px){ .foot-grid{grid-template-columns: 1fr} }

/* Animations (IntersectionObserver hooks) */
.reveal{opacity:0; transform: translateY(12px); transition: .6s ease}
.reveal.show{opacity:1; transform: translateY(0)}

/* Top bar */
.nav{ position:sticky; top:0; z-index:1000;
  background:rgba(5,10,20,.78); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem }
.brand{ display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; font-weight:800 }
.logo{ width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,#00b4d8,#90e0ef) }
.nav-links{ display:flex; gap:1.1rem; align-items:center }
.nav-links a{ color:#fff; text-decoration:none }
.nav-links a:hover{ text-decoration:underline }
.btn{ padding:.6rem 1.1rem; border-radius:999px; background:#00b4d8; color:#06121c; font-weight:700; text-decoration:none }
.btn:hover{ filter:brightness(1.06) }
.hamburger{ display:none; color:#fff; font-size:1.7rem; cursor:pointer }

/* mobile switch */
@media (max-width:820px){ .nav-links{display:none} .hamburger{display:block} }

/* Offcanvas */
.offcanvas{ position:fixed; inset:0; z-index:2000; opacity:0; visibility:hidden; transition:.25s; pointer-events:none }
.backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .48);  /* semi-transparent overlay */
  backdrop-filter: blur(2px);
  z-index: 9998;                   /* behind drawer */
}
.drawer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;                /* way above backdrop */
  width: min(86vw, 320px);
  background: #0d1628;          /* SOLID background */
  color: #fff;
  box-shadow: -28px 0 60px rgba(0, 0, 0, .35);
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
}

.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1.1rem; border-bottom:1px solid rgba(255,255,255,.06) }
.close-btn{ color:#fff; font-size:1.5rem; cursor:pointer }
.drawer-links{ display:flex; flex-direction:column; gap:.2rem; padding:.6rem .6rem 1rem }
.drawer-links a{ display:block; padding:.9rem .8rem; border-radius:10px; color:#fff; text-decoration:none }
.drawer-links a:hover{ background:rgba(255,255,255,.06) }
.drawer-links .btn{ margin:.4rem .6rem 0; text-align:center }

/* Open state */
.nav-toggle:checked ~ .offcanvas{ opacity:1; visibility:visible; pointer-events:auto }
.nav-toggle:checked ~ .offcanvas .drawer{ transform:translateX(0) }

/* Prevent page scroll while open (supported in Chromium/Safari) */
body:has(#nav-toggle:checked){ overflow:hidden }




/* Stop horizontal scrolling everywhere */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Common culprits */
img, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Keep sections/hero from leaking */
.section, header, .hero {
  overflow-x: hidden;
}

/* If your hero uses ::before background, ensure it cannot expand the page */
.hero { position: relative; }
.hero::before { inset: 0; }

/* Containers should never exceed the viewport */
.container {
  width: min(1120px, 92vw);
  margin-inline: auto;
  box-sizing: border-box;
}

/* Tour card images: fixed height + no overflow */
.tour.card img {
  width: 100%;
  height: 240px;      /* your fixed height */
  object-fit: cover;
}

/* Feature image (fixed height) */
.feature.card .img { height: 320px; overflow: hidden; }
.feature.card .img img { width: 100%; height: 100%; object-fit: cover; }

/* Offcanvas (when present): ensure it can't cause page width when closed */
.offcanvas { position: fixed; inset: 0; }
.offcanvas:not(.show) .drawer { transform: translateX(100%); }