/* style.css - master stylesheet (final update) */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Poppins:wght@300;400;600&display=swap');

/* Reset & base */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: 'Poppins', sans-serif;
  background:#0b0b0b;
  color:#f0f0f0;
  -webkit-font-smoothing:antialiased;
}

/* Links */
a { color:#d10056; text-decoration:none; }
a:hover { text-decoration:underline; }

/* Header */
header {
  background:#111;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 18px;
  border-bottom:2px solid #d10056;
  position:sticky;
  top:0;
  z-index:1100;
}
header .logo { display:flex; align-items:center; gap:12px; }
header img { height:56px; border-radius:6px; }
header h1 { font-family:'Montserrat',sans-serif; font-size:1.18rem; margin:0; color:#fff; }

/* Desktop nav */
nav ul { list-style:none; display:flex; gap:18px; margin:0; padding:0; align-items:center; }
nav a { color:#f0f0f0; font-weight:600; padding:8px 12px; border-radius:6px; display:inline-block; }
nav a:hover { background:#d10056; color:#fff; }

/* Desktop dropdown (hover) */
nav ul li { position:relative; }
nav ul ul {
  display:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  background:#1a1a1a;
  border:1px solid #d10056;
  padding:8px 0;
  border-radius:6px;
  min-width:190px;
}
nav ul li:hover > ul { display:block; }
nav ul ul li { padding:6px 14px; }

/* Current production banner (shared) */
.current-production-banner {
  display:block;
  background: linear-gradient(90deg,#d10056,#a30041);
  color:#fff;
  text-align:center;
  padding:14px 10px;
  margin:0;
  font-family:'Montserrat',sans-serif;
  font-size:1.02rem;
  font-weight:700;
  border-bottom:3px solid #ffcae1;
  text-decoration:none;
  z-index:1050;
}
.current-production-banner strong { display:block; font-size:1.1rem; margin-top:4px; }
.current-production-banner .hint { display:block; font-size:0.85rem; opacity:0.95; }

/* Layout wrapper */
.main-container { max-width:1100px; margin:32px auto; padding:0 20px; }
section { margin-bottom:28px; }

/* Hero/banner */
.hero-banner {
  width:100%;
  height:360px;
  overflow:hidden;
  border-bottom:3px solid #d10056;
}
.hero-banner img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Info boxes */
.info-box {
  background:#121212;
  border:1px solid #222;
  border-radius:10px;
  padding:18px;
  margin:16px 0;
}

/* Team grid */
.team-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:20px;
}
.team-member {
  background:#151515;
  border:1px solid #222;
  border-radius:10px;
  padding:14px;
  text-align:center;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.team-member:focus,
.team-member:hover { transform:translateY(-4px); box-shadow:0 6px 20px rgba(0,0,0,0.6); }
.team-member img { width:120px; height:120px; object-fit:cover; border-radius:50%; border:2px solid #d10056; display:block; margin:0 auto 10px; }
.team-member h3 { margin:8px 0 4px; color:#ffd700; }
.team-member p.role { margin:0; color:#d1d1d1; font-weight:600; }

/* Cast/Crew boards */
.cast-board, .crew-board { display:block; width:100%; border-radius:10px; border:2px solid #222; margin:14px 0; }

/* Ticket wrapper + sold out overlay */
.ticket-wrapper { position:relative; width:100%; margin-top:14px; }
.ticket-wrapper iframe { width:100%; height:600px; border-radius:10px; border:0; display:block; }

/* content-area overlay (box-office) */
.content-area { position:relative; z-index:10; }
.content-area .soldout-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,0.82); display:flex; align-items:center; justify-content:center;
  z-index:60; pointer-events:all;
}
.content-area .soldout-overlay img { width:92%; max-width:1000px; pointer-events:none; }

/* Popup modal (homepage) */
.popup-overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.85); z-index:12000; opacity:0; pointer-events:none; transition:opacity .35s ease; }
.popup-overlay.show { opacity:1; pointer-events:auto; }
.popup-box { background:#111; border:2px solid #d10056; border-radius:10px; padding:18px; width:92%; max-width:760px; text-align:center; }

/* Popup buttons - restyled prettier */
.popup-btn { display:inline-block; margin:8px 6px; padding:10px 16px; border-radius:8px; border:0; font-weight:700; cursor:pointer; }
.take-me-btn { background:#ff2b6e; color:#fff; box-shadow:0 6px 18px rgba(209,0,86,0.18); }
.close-btn { background:#292929; color:#fff; box-shadow:0 6px 18px rgba(0,0,0,0.25); }
.popup-btn:active { transform:translateY(1px); }

/* Modal for team bios */
.modal-overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.85); z-index:12050; }
.modal-overlay.show { display:flex; }
.modal-box { background:#0f0f0f; border-radius:10px; border:2px solid #d10056; padding:18px; width:92%; max-width:720px; color:#fff; }

/* Footer */
footer { background:#111; color:#aaa; text-align:center; padding:18px 10px; border-top:2px solid #d10056; }

/* Mobile hamburger & slide-out nav */
.hamburger { display:none; background:transparent; border:0; color:#fff; font-size:22px; width:52px; height:52px; align-items:center; justify-content:center; cursor:pointer; }
.mobile-nav { position:fixed; top:0; left:-280px; width:280px; height:100vh; background:#0e0e0e; padding-top:76px; z-index:11500; transition:left .32s ease; box-shadow:3px 0 20px rgba(0,0,0,0.6); border-right:3px solid #d10056; overflow:auto; }
.mobile-nav.open { left:0; }
.mobile-nav a, .mobile-dropdown-btn { display:block; padding:12px 18px; color:#fff; text-decoration:none; border-bottom:1px solid #151515; }
.mobile-submenu { display:none; background:#0b0b0b; }
.mobile-submenu a { padding-left:36px; }

/* Responsive tweaks */
@media (max-width:850px) {
  nav ul { display:none; }
  .hamburger { display:flex; }
  header { padding:10px 12px; }
  header img { height:52px; }
  .hero-banner { height:200px; }
  .popup-box img { max-height:320px; object-fit:cover; }
  .ticket-wrapper iframe { height:520px; }
  .team-member img { width:110px; height:110px; }
  .modal-box { padding:14px; }
}

/* Utilities */
.center { text-align:center; }
.hidden { display:none !important; }

.team-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  background: #222; /* prevents white box while loading */
}

.team-member {
  background: #111;
  padding: 14px;
  border-radius: 10px;
  border: 2px solid #d10056;
  cursor: pointer;
  text-align: center;
  transition: transform .2s;
}

.team-member:hover {
  transform: scale(1.04);
}

/* Bio Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-overlay.active {
  display: flex;
}

.modal-box {
  background: #222;
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  color: white;
  text-align: center;
}

.modal-photo {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #d10056;
}