/* css/style.css - mobile-first */
:root{
  --gold-1: #d4af37;
  --gold-2: #ffd86b;
  --bg-overlay: rgba(0,0,0,0.45);
  --card-bg: rgba(255,255,255,0.92);
  --accent: #a67c00;
  --muted: #7b7b7b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color:#222;
  min-height:100%;
  position:relative;
  background:linear-gradient(180deg,#fff,#f4f4f4);
}

/* background video full screen */
.bg-video{
  position:fixed;
  right:0; left:0; top:0; bottom:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:-2;
  opacity:0.5;
}

/* page container Hidden */  
.page-wrap {
  max-width: 760px;   /* you can still control width if you want */
  margin: 24px auto;
  background: transparent !important;  /* override to transparent */
  border: none !important;
  box-shadow: none !important;
  padding: 0;   /* optional: remove extra padding */
}


/* header */
.top{ text-align:center; margin-bottom:12px }
.logo{ width:120px; height:auto; display:block; margin:9px auto }
.top h1{ font-weight:600; color:#444; margin:6px 0 4px; font-size:18px }

/* Locations grid (home page) */
.locations-grid{
  display:grid;
  gap:10px;
  grid-template-columns:1fr 1fr; /* two columns on mobile portrait */
  margin:8px;
}
.location-btn{
  display:inline-block;
  text-align:center;
  padding:12px 8px;
  border-radius:6px;
  text-decoration:none;
  color:#1a1a1a;
  background: linear-gradient(180deg,var(--gold-1),var(--gold-2));
  border:2px solid rgba(166,124,0,0.85);
  box-shadow: 0 3px 0 rgba(0,0,0,0.12), inset 0 -6px 10px rgba(255,255,255,0.12);
  font-weight:700;
  font-size:13px;
  transition:transform .12s ease, box-shadow .12s;
}
.location-btn:active{ transform:translateY(2px) }
.location-btn:hover{ box-shadow:0 6px 14px rgba(0,0,0,0.14) }

/* cards grid on location page */
.cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr); /* 3 per row base (mobile) */
  gap:12px;
  padding:12px;
  justify-items:center;
}

/* Card styles */
.card{
  width:100%;
  max-width:120px;
  background:#fff;
  border-radius:6px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.06);
  text-align:center;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.thumb{ background:linear-gradient(180deg,#f0f0f0,#ddd); height:125px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.card-text{ padding:8px; background:linear-gradient(180deg,#f5eef8,#efe7f2); font-size:11px; color:#333; }
.fullname{
  font-weight:700;
  line-height:1.1;
  height:32px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.type{ font-size:10px; color:#6d4b77; margin-top:4px; font-weight:600 }

/* submit button row */
.submit-row{ text-align:center; padding:14px }
.submit-btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:6px;
  background:#00e6d8;
  color:#012;
  font-weight:800;
  text-decoration:none;
  border:2px solid rgba(0,0,0,0.12);
}

/* lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.75);
  z-index:999;
}
.lightbox.show{ display:flex }
.lightbox img{ max-width:92%; max-height:80%; border-radius:6px; box-shadow:0 14px 40px rgba(0,0,0,0.6) }
.lb-close{
  position:absolute; top:18px; right:18px;
  background:transparent; color:#fff; border:0; font-size:20px; cursor:pointer;
}
.lb-caption{ color:#fff; margin-top:12px; text-align:center; }

/* no results */
.no-results{ padding:24px; text-align:center; color:var(--muted) }

/* responsive: larger screens -> keep 3 cards but increase sizes and show more columns for location buttons */
@media(min-width:560px){
  .page-wrap{ max-width:560px }
  .locations-grid{ grid-template-columns: repeat(2, 1fr) }
  .cards{ gap:14px; justify-content:center }
}
@media(min-width:900px){
  .page-wrap{ max-width:760px }
  .locations-grid{ grid-template-columns: repeat(3,1fr) }
  .cards{ grid-template-columns: repeat(3, 1fr) }
}

/* small accessibility tweak for audio controls when autoplay blocked */
#audio-toggle{
  position:fixed; bottom:14px; right:14px; z-index:1000;
  background:var(--gold-2); border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}