/* Events page — image-first, scalable grid, minimal copy */

/* Shared media background helper */
.media-bg {
  position: relative;
  background: var(--bg, none) center/cover no-repeat;
  color: #fff;
}
.media-bg .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  pointer-events: none;
}

/* Hero */
.events-hero { 
  min-height: 52vh; 
  display: grid; 
  place-items: center; 
  text-align: left;
}
.events-hero .wrap { position: relative; z-index: 1; max-width: 1100px; padding: 2rem; }
.events-hero .hero-copy { max-width: 740px; }
.events-hero .pill {
  display:inline-block; font-weight:800; font-size:.85rem; letter-spacing:.2px;
  padding:.35rem .6rem; border-radius:999px; background:rgba(255,255,255,.15);
  backdrop-filter: blur(6px);
}
.events-hero h1 {
  margin:.4rem 0 1rem; font-size:clamp(1.6rem, 3.2vw, 2.6rem); font-weight:800; line-height:1.1;
}
.hero-bullets { list-style:none; padding:0; margin:0 0 1rem; display:grid; gap:.4rem; }
.hero-bullets li { display:flex; gap:.5rem; align-items:center; color:#f8fafc; }
.hero-bullets i { width:22px; text-align:center; opacity:.9; }
.hero-cta { display:flex; gap:.6rem; flex-wrap:wrap; }

/* Buttons (reuse your site styles where possible) */
.btn-primary {
  background:#FF4040; color:#fff; border:0; border-radius:12px; 
  padding:.8rem 1.2rem; font-weight:800; cursor:pointer;
  box-shadow:0 8px 18px rgba(255,64,64,.25);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary:hover { transform:translateY(-2px); background:#ff5555; box-shadow:0 10px 22px rgba(255,64,64,.32); }

.btn-ghost {
  background:#fff; color: #111827; border:1px solid #e5e7eb; border-radius:12px;
  padding:.8rem 1.2rem; font-weight:800; text-decoration:none;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-ghost:hover { transform:translateY(-2px); background:#f8fafc; box-shadow:0 8px 18px rgba(0,0,0,.06); }

/* Grid (future-proof for many events) */
.events-grid {
  display:grid; gap:1.25rem; padding: clamp(18px, 4vw, 42px);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Event Card */
.event-card {
  position:relative; border-radius:18px; overflow:hidden; min-height: 420px;
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
  isolation:isolate;
}
.event-card .overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.65) 100%);
}

/* Top badges (time, ages) */
.card-top {
  position:absolute; z-index:2; top:12px; left:12px; right:12px;
  display:flex; gap:.5rem; flex-wrap:wrap;
}
.badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.38rem .6rem; border-radius:999px; font-weight:800; font-size:.8rem;
  background: rgba(255,255,255,.15); backdrop-filter: blur(6px); color:#fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.18);
}
.badge i { opacity:.92; }

/* Body */
.card-body {
  position:absolute; z-index:2; inset:auto 0 0; padding: 16px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.35) 25%, rgba(0,0,0,.75));
  color:#fff;
}
.title-row { display:flex; align-items:center; gap:.6rem; }
.title-row i { font-size:1.4rem; }
.event-card h2 { margin:.1rem 0 .35rem; font-size:1.6rem; font-weight:900;}
.short { margin:.1rem 0 .6rem; color:#e5e7eb; }
.mini { list-style:none; padding:0; margin:0 0 .8rem; display:grid; gap:.3rem; color:#f3f4f6; }
.mini i { width:18px; text-align:center; margin-right:.35rem; }
.mini li { display:flex; align-items:center; gap:.35rem; }
.card-cta { display:flex; gap:.5rem; }

/* Subtle theme accents per quest (optional glows) */
.tone-dino::after,
.tone-hp::after {
  content:""; position:absolute; inset:auto -20% -20% -20%;
  height:40%; z-index:1; filter: blur(40px); opacity:.35;
}
.tone-dino::after { background: radial-gradient(circle at 20% 50%, #22c55e, transparent 46%); }
.tone-hp::after  { background: radial-gradient(circle at 80% 50%, #8b5cf6, transparent 46%); }

/* Modal (compact) */
.ticket-modal {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:9999; align-items:center; justify-content:center; padding: 16px;
}
.ticket-panel {
  width: min(720px, 96vw);
  background:#fff; border-radius:16px; padding: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25); color:#0f172a;
}
.ticket-head { display:flex; gap:.6rem; align-items:center; margin-bottom:.2rem; }
.ticket-head i { color:#FF4040; }
.ticket-sub { margin:.2rem 0 .6rem; color:#475569; }
.form-row { display:grid; gap:.6rem; margin:.5rem 0; }
.form-two { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px){ .form-two { grid-template-columns: 1fr; } }
.ticket-panel input, .ticket-panel select {
  width:100%; padding:.6rem .7rem; border:1px solid #e5e7eb; border-radius:10px; font:inherit;
}
.total-line {
  display:flex; align-items:center; justify-content:space-between; padding:.6rem .8rem;
  background:#f8fafc; border:1px dashed #d1d5db; border-radius:10px; font-weight:800; margin-top:.2rem;
}
.close-x { background:transparent; border:0; font-size:1.6rem; position:absolute; right: 16px; top: 10px; cursor:pointer; color:#334155; }

/* Background-image fallback height on very small screens */
@media (max-width: 420px){
  .event-card { min-height: 380px; }
}
/* --- Hero: enforce 16:9 and keep the top in view --- */
.events-hero.media-bg {
  /* point to the image (adjust path only if yours differs) */
  --bg: url("../images/events/events-hero.png");

  /* exact frame */
  aspect-ratio: 16 / 9;
  width: 100%;

  /* make it responsive if viewport is short */
  min-height: 320px;           /* safety for very small devices */
  max-height: 70vh;            /* don’t dominate tiny laptops */

  /* keep background beautiful yet biased to the top */
  background: var(--bg) top center / cover no-repeat;
}

/* if the image still feels a bit “high”, nudge the focal point */
@media (min-width: 640px) {
  .events-hero.media-bg {
    background-position: 50% 10%; /* 10% down from top; tweak 0–20% */
  }
}
.tone-dino.media-bg    { --bg: url("../images/events/dino-bg.png"); }
.tone-hp.media-bg      { --bg: url("../images/events/hp-bg.png"); }

/* ---------- Hero: make text brighter on images ---------- */
.events-hero.media-bg .overlay{
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.65) 100%);
}
.events-hero .hero-copy * {
  /* color:#fff; */
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}

/* ---------- Colorful Pills (with easy theme variants) ---------- */
.pill{
  display:inline-block;
  font-weight:900;
  letter-spacing:.3px;
  padding:.42rem .72rem;
  border-radius:999px;
  font-size:.9rem;
  color:#fff;
  background: linear-gradient(135deg, #ff7a7a 0%, #ff4040 60%, #ff9f7a 100%);
  box-shadow: 0 8px 20px rgba(255,64,64,.28), inset 0 0 0 2px rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}

/* Optional themeable pills if you ever add more in sections */
.pill--dino { background: linear-gradient(135deg, #34d399, #10b981 60%, #6ee7b7); }
.pill--hp   { background: linear-gradient(135deg, #a78bfa, #8b5cf6 60%, #c4b5fd); }

/* ---------- Student Instagram Note: loud but clean ---------- */
.hero-bullets li.student-note{
  display:flex; align-items:center; gap:.6rem;
}
.hero-bullets li.student-note i{
  color:#ffcf4a; text-shadow:none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.note-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .55rem; border-radius:999px;
  background: rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(8px);
  font-weight:800;
  animation: chipPulse 2.6s ease-in-out infinite;
}
.chip-link{
  display:inline-block; padding:.2rem .5rem; border-radius:999px;
  background:#ff3b6b; color:#fff; font-weight:900; text-decoration:none;
  box-shadow: 0 6px 16px rgba(255,59,107,.35);
}
.chip-link:hover{ transform:translateY(-1px); }
@keyframes chipPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.0); }
  50%{ box-shadow:0 0 0 10px rgba(255,255,255,.06); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,.0); }
}

/* ---------- Card accents by theme (border + icon color) ---------- */
.event-card{ border:3px solid transparent; }
.tone-dino{ --tone:#22c55e; }
.tone-hp  { --tone:#8b5cf6; }

.tone-dino{ border-color: color-mix(in srgb, var(--tone) 65%, #ffffff 35%); }
.tone-hp  { border-color: color-mix(in srgb, var(--tone) 65%, #ffffff 35%); }

.tone-dino .title-row i,
.tone-dino .badge{ color:#d1fae5; }
.tone-hp .title-row i,
.tone-hp .badge{ color:#ede9fe; }

/* Give title a subtle glow in theme color */
.tone-dino h2{ text-shadow: 0 3px 14px color-mix(in srgb, var(--tone) 45%, #000 0%); }
.tone-hp  h2{ text-shadow: 0 3px 14px color-mix(in srgb, var(--tone) 45%, #000 0%); }

/* Badges get faint tint per card */
.tone-dino .badge{ background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.35); }
.tone-hp  .badge{ background: rgba(139,92,246,.22); border-color: rgba(139,92,246,.35); }

/* Stronger contrast over media backgrounds */
.event-card .overlay{
  background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.72) 100%);
}
.card-body .short,
.card-body .mini li{ color:#f8fafc; }
.card-body .mini i{ color:#fff; opacity:.95; }

/* Optional: brighten primary CTA a touch on cards */
.event-card .btn-primary{
  background:#ff4242;
  box-shadow:0 10px 22px rgba(255,66,66,.32);
}
.event-card .btn-primary:hover{
  background:#ff5656; transform:translateY(-2px);
}

/* ===== Ticket Modal: clean layout + clear field borders ===== */
.ticket-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.6);
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.ticket-panel {
  position: relative;
  width: min(720px, 96vw);
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  color: #0f172a;
  box-sizing: border-box;
}

.ticket-head { display:flex; gap:.6rem; align-items:center; margin-bottom:.2rem; }
.ticket-head i { color:#FF4040; }
.ticket-sub   { margin:.2rem 0 .6rem; color:#475569; }

.form-error {
  background: #fff5f5;
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: .6rem .8rem;
  margin: .4rem 0 .2rem;
  font-weight: 700;
}

.form-row { display:grid; gap:.6rem; margin:.5rem 0; }
.form-two { grid-template-columns: 1fr 1fr; gap: .8rem; }
.form-two .col { min-width: 0; }            /* prevents overflow on small screens */

@media (max-width: 640px){
  .form-two { grid-template-columns: 1fr; }
}

.ticket-panel label {
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
  color: #334155;
}

.ticket-panel input,
.ticket-panel select {
  width: 100%;
  border: 2px solid #cbd5e1; /* clearer border */
  background: #fff;
  font-size: 1rem;
  padding: .6rem .7rem;
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;     /* prevents “overflowing” look */
}

.ticket-panel input:focus,
.ticket-panel select:focus {
  border-color: #FF4040;
  box-shadow: 0 0 0 3px rgba(255, 64, 64, 0.2);
  outline: none;
}

.total-line {
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem .8rem;
  background:#f8fafc; border:2px dashed #d1d5db; border-radius:10px;
  font-weight:800; margin-top:.2rem;
}

.close-x {
  background: transparent; border: 0; font-size: 1.6rem;
  position: absolute; right: 16px; top: 10px; cursor: pointer; color:#334155;
}