/* ================================
   Events page — neon fun + bubbly
   I scope everything under .events-page so nothing bleeds to other pages
   ================================ */

/* animated neon backdrop */
.events-page {
  background: linear-gradient(135deg, #ff4ecd, #7b2ff7, #00e5cf);
  background-size: 400% 400%;
  animation: eventsGradientShift 12s ease infinite;
  color: #fff;
}

/* gentle motion so it feels alive but not tacky */
@keyframes eventsGradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* hero: positioned container + absolutely-positioned img */
.hero.events-hero {
  position: relative;
  min-height: 52vh;
  display: grid;
  place-items: center;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  overflow: hidden; /* keeps the rounded corners clean */
}

/* background image sits behind overlay */
.hero.events-hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills the hero without distortion */
  filter: saturate(1.05); /* I like a touch more pop */
}

/* overlay makes the heading readable without killing the neon */
.events-hero .hero-overlay{
  position: relative;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.25));
  padding: 36px 22px;
  text-align: center;
  border-radius: 14px;
  max-width: 900px;
}

.events-hero h1{
  font-size: 2.4rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: #fff;
}

.events-hero p{
  font-size: 1.05rem;
  margin-bottom: 14px;
  color: #f8fafc;
}

/* small screen adjustments */
@media (max-width: 768px){
  .hero.events-hero{ min-height: 40vh; }
  .events-hero .hero-overlay{ padding: 22px 16px; }
  .events-hero h1{ font-size: 1.9rem; }
  .events-hero p{ font-size: .98rem; }
}

/* intro banner under hero — friendly tone */
.banner{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 18px auto 0;
  padding: 14px 18px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.banner .dot{ width:10px; height:10px; border-radius:999px; background:#ffb703; }
.banner .lead{ color:#fdfdfd; }

/* section container */
.section{ position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:24px 20px; }
.section h2{
  margin:0 0 8px;
  font-size: 26px;
  font-weight: 800;
  color:#fff;
  text-align:center;
  text-shadow: 0 0 10px rgba(255,255,255,.35);
}

/* chips feel like little bubbles */
.filters{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:18px 0; }
.chip{
  border:none;
  background: rgba(255,255,255,0.14);
  color:#fff;
  padding:10px 18px;
  border-radius:30px;
  cursor:pointer;
  font-weight:700;
  transition: all .25s ease;
  backdrop-filter: blur(10px);
}
.chip:hover{ background: rgba(255,255,255,0.25); box-shadow:0 0 8px #fff; }
.chip[aria-pressed="true"]{ background:#ff4ecd; box-shadow:0 0 12px #ff4ecd; }

/* grid for cards */
.grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:760px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1080px){ .grid{ grid-template-columns:repeat(3,1fr); } }

/* frosted glass cards with neon lift */
.card{
  background: rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.35);
  border-radius:16px;
  padding:20px;
  color:#fff;
  backdrop-filter: blur(12px);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow:0 14px 40px rgba(255,255,255,.28);
}

.card-head { margin-bottom: 10px; }
.title{ font-size:1.25rem; font-weight:800; margin:4px 0; }
.meta{ display:inline-block; background: rgba(0,0,0,.35); padding:4px 10px; border-radius:999px; font-weight:700; font-size:.78rem; }

.desc{ margin:10px 0 14px; color:#f8fafc; }

.row{ display:flex; gap:10px; flex-wrap:wrap; }

.pill{
  background: rgba(255,255,255,0.20);
  border:none; border-radius:999px;
  padding:6px 14px; font-size:.85rem; color:#fff;
  backdrop-filter: blur(6px);
}

/* Call-to-action buttons match the neon look */
.btn, .btn-light{
  padding:10px 18px; border-radius:10px; font-weight:800; text-decoration:none; transition: all .25s ease;
}
.btn{
  background:#ff4ecd; color:#fff; box-shadow:0 0 12px #ff4ecd;
}
.btn:hover{
  background:#ff7ae5; box-shadow:0 0 16px #ff7ae5;
}
.btn-light{
  background: rgba(255,255,255,0.22); color:#fff; border:1px solid rgba(255,255,255,.35);
}
.btn-light:hover{
  background: rgba(255,255,255,0.40);
  box-shadow: 0 0 10px #fff;
}

/* announcement pills keep the glass look */
.announce{
  display:flex; gap:12px; align-items:flex-start;
  background: rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.35);
  border-radius:14px; padding:14px 16px;
  backdrop-filter: blur(8px);
  box-shadow:0 6px 14px rgba(0,0,0,.25)
}
.announce .badge{
  display:inline-grid; place-items:center; width:36px; height:36px;
  border-radius:10px; background: rgba(0,0,0,.35); font-weight:800; color:#fff;
}

/* newsletter form keeps contrast up */
.news{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.news input{
  flex:1; min-width:240px; padding:12px 14px;
  border:1px solid rgba(255,255,255,.35); border-radius:10px;
  background: rgba(255,255,255,.12); color:#fff;
}
.news input::placeholder{ color:#e5e7eb; }

/* --- readability patch: I drop the heavy blur and lift contrast so text is crisp --- */
.card,
.announce,
.banner,
.news input {
  backdrop-filter: none;
  background: rgba(18, 18, 31, 0.28);
  border: 1px solid rgba(255,255,255,0.22);
}

.card .desc,
.banner .lead,
.announce,
.news input,
.title,
.meta,
.pill,
.btn,
.btn-light {
  color: #fff;
  text-shadow: none;
}

/* small screens get a slightly darker glass so white text pops */
@media (max-width: 768px) {
  .card,
  .announce,
  .banner,
  .news input {
    background: rgba(10, 10, 20, 0.42);
  }
}

/* --- kill legacy hero backgrounds on this page so the <img> is the only layer --- */
.events-page .hero { 
  /* this removes the global .hero background image from styles.css on the events page */
  background: none !important;
}
.events-page header.hero.events-hero {
  /*  remove the old "events hero" background in styles.css */
  background: none !important;
}


/* I want the poster's letterbox to *match* the card's light gray */
.events-page .poster {
  /* same hue as the parent card */
  background-color: inherit;

  /* keep the whole flyer visible */
  background-image: var(--poster);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* create an even gray frame inside the card */
  padding: 14px;                /* tweak 8–14px to taste */
  background-origin: content-box;
  background-clip: content-box; /* keeps the image inside the padding */

  height: 280px;                /* bump if you want less letterboxing */
  border-radius: 10px;
  margin-bottom: 15px;
}

/* wider screens get a touch more height so proportions feel right */
@media (min-width: 1080px) {
  .events-page .poster { height: 320px; }
}

/* --- Nude brown / olive theme just for the Events page boxes --- */
/* I like using variables so I can tweak the palette quickly */
.events-page {
  --box-bg: rgba(236, 224, 208, 0.92);   /* warm nude-beige */
  --box-border: #cbb69d;                 /* soft cocoa border */
  --text: #2b261f;                       /* deep brown for readable text */
  --muted-text: #4a433a;                 /* slightly lighter body text */

  --chip-bg: rgba(236, 224, 208, 0.85);  /* default chip */
  --chip-text: #2b261f;
  --chip-active-bg: #7f8f4d;             /* olive when selected */
  --chip-active-shadow: 0 0 10px rgba(127,143,77,0.45);

  --pill-bg: rgba(233, 220, 204, 0.85);  /* small info pills */
  --badge-bg: #d9c9b5;                   /* announcement icon tile */

  --btn-bg: #7f8f4d;                     /* olive primary */
  --btn-bg-hover: #95a85a;
  --btn-text: #ffffff;

  --btn-light-bg: #e9dcc6;               /* light button */
  --btn-light-border: #c9b79e;
  --btn-light-text: #2b261f;
}

/* Boxes (cards, banner, announce) pick up the nude background */
.events-page .card,
.events-page .announce,
.events-page .banner,
.events-page .news input {
  background: var(--box-bg);
  border: 1px solid var(--box-border);
  backdrop-filter: none; /* I’m keeping it crisp for readability */
  color: var(--text);
}

/* I undo the earlier "force white text" so brown text shows correctly */
.events-page .card .desc,
.events-page .banner .lead,
.events-page .announce,
.events-page .news input,
.events-page .title,
.events-page .meta,
.events-page .pill {
  color: var(--text);
  text-shadow: none;
}

/* Meta chip at the top of cards (date/location) */
.events-page .meta{
  background: rgba(127,143,77,0.12); /* faint olive tint */
  color: var(--text);
}

/* Little “Type: Community” pill */
.events-page .pill{
  background: var(--pill-bg);
  color: var(--text);
}

/* Filter chips up top */
.events-page .chip{
  background: var(--chip-bg);
  color: var(--chip-text);
  box-shadow: none;
  backdrop-filter: none;
}
.events-page .chip:hover{ background: #efe5d4; }
.events-page .chip[aria-pressed="true"]{
  background: var(--chip-active-bg);
  color: #fff;
  box-shadow: var(--chip-active-shadow);
}

/* Buttons in olive */
.events-page .btn{
  background: var(--btn-bg);
  color: var(--btn-text);
  box-shadow: 0 0 12px rgba(127,143,77,.35);
}
.events-page .btn:hover{
  background: var(--btn-bg-hover);
  box-shadow: 0 0 16px rgba(127,143,77,.45);
}

/* Light/secondary button stays on the nude side */
.events-page .btn-light{
  background: var(--btn-light-bg);
  color: var(--btn-light-text);
  border: 1px solid var(--btn-light-border);
}
.events-page .btn-light:hover{ background: #efe5d4; }

/* Announcement badge tile picks up the palette too */
.events-page .announce .badge{
  background: var(--badge-bg);
  color: var(--text);
}

/* Poster keeps using the box background so the frame matches */
.events-page .poster{
  background-color: var(--box-bg);
}