/* ===== Base ===== */
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f6f6f6;
  color: #222;
}

/* ===== Navbar ===== */
.navbar {
  width: 100%;
  background-color: #0047ab;
  padding: 10px 0;
  z-index: 1000;
}
.nav-links li { list-style: none; }
.navbar .nav-links a { text-transform: uppercase !important; }

.navbar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 50px;
}

.logo-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logo { max-height: 90px; }

.nav-links {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
}
.burger { display: none; font-size: 24px; color: white; cursor: pointer; }

/* ===== Event header (hero) ===== */
.event-header .event-hero {
  background-size: cover;
  background-position: center;
  height: 300px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-header .overlay {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 30px;
  text-align: center;
  color: white;
  width: 100%;
}
.event-header h1 { font-size: 2.5rem; margin-bottom: 10px; }
.event-header p  { font-size: 1.1rem; }

/* ===== Featured Event ===== */
.event-featured {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
}
.event-card-large {
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 12px;
  overflow: hidden;
}
.event-card-large img {
  width: 100%;
  max-width: 500px;   /* keep your original cap */
  object-fit: cover;
}
.event-details {
  flex: 1;
  padding: 20px 30px;
  font-family: 'Courier New', Courier, monospace;
}
.event-details h2 {
  font-size: 3.8rem;
  color: #0047ab;
  margin-bottom: 10px;
}
.event-details p { margin-bottom: 10px; }

.event-buttons { margin-top: 20px; }
.btn {
  display: inline-block;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  margin-right: 10px;
}
.btn.instagram { background-color: #e1306c; color: white; }
.btn.instagram:hover { background-color: #c7255b; }
.btn.register { background-color: #0047ab; color: #fff; }
.btn.register:hover { background-color: #003080; }
.btn.details { color: #ffffff; background-color: #ff4747; }

/* ===== Old "More Events" wrapper (kept for spacing if used elsewhere) ===== */
.more-events {
  padding: 60px 20px;
  background-color: #fdfdfd;
  text-align: center;
}
.section-title {
  font-size: 2rem;
  margin-bottom: 30px;
  color: #3d5dc9;
  padding-top: 15px;
}

/* ===== New Events Grid (replaces all .event-grid* rules) ===== */
.events-wrap {
  padding-inline: 20px;
  background: #0b1216;   /* dark backdrop like your ref */
  color: #e9eef2;
    padding-bottom: 40px;
}
.events-wrap .section-title {
  max-width: 1600px;
  margin: 0 auto 24px;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 700;
  text-align: center;
}

/* Desktop/tablet grid: responsive columns with center alignment.
   We'll cap the container width at exact column counts via media queries below. */
.events-grid {
  --gap: 26px;
  --card: clamp(150px, 10vw, 175px);
  display: grid;
  gap: var(--gap);
  justify-content: center;
  margin-inline: auto;
  padding: 8px 0;
  grid-template-columns: repeat(auto-fit, minmax(var(--card), 1fr));
}
/* ===== Event Spotlight (ev-) ===== */
:root{
  --ev-brand:#0047ab;
  --ev-bg:#0f0f10;
  --ev-card:#ffffff;
  --ev-muted:#63666f;
}

.ev-spotlight{ background:var(--ev-bg); padding:40px 16px; }
.ev-card{
  max-width:1150px; margin:0 auto;
  display:grid; grid-template-columns: 1.1fr 1fr; gap:28px;
  background:var(--ev-card); border-radius:18px; overflow:hidden;
  box-shadow:0 14px 38px rgba(0,0,0,.28);
}

/* Media / poster */
.ev-media{ position:relative; background:#0d0e10; }
.ev-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.ev-datepill{
  position:absolute; top:14px; left:14px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 10px; border-radius:12px; background:rgba(0,0,0,.65); color:#fff;
  font-weight:800; letter-spacing:.3px; text-align:center;
}
.ev-day{ font-size:22px; line-height:1; }
.ev-mon{ font-size:12px; opacity:.9; }
.ev-yr{ font-size:10px; opacity:.8; }

/* Body */
.ev-body{ padding:26px; display:flex; flex-direction:column; }
.ev-title{
  margin:0 0 8px; font-family:'Anton',sans-serif;
  font-size: clamp(28px, 3.2vw, 44px); color:#1a1b1f; line-height:1.05;
}
.ev-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.ev-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px; font-weight:700; font-size:12px;
  background:#f5f6f8; color:#222; border:1px solid #e8e9ee;
}
.ev-chip svg{ width:14px; height:14px; fill:currentColor; opacity:.8; }

.ev-desc{
  color:#2a2c33; line-height:1.6; margin:8px 0 18px;
  font-size:15px;
}

.ev-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }
.ev-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:10px; font-weight:800; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.ev-primary{
  background:linear-gradient(180deg, #2f6aff, var(--ev-brand));
  color:#fff; box-shadow:0 8px 22px rgba(0,71,171,.30);
}
.ev-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,71,171,.40); }

.ev-ghost{
  background:#eef1f7; color:#0f1a2e; border:1px solid #dbe1ee;
}
.ev-ghost:hover{ background:#e7ecf8; }
/* ===== Modern Event Card (evx-) ===== */
:root{
  --evx-brand:#0047ab;
  --evx-bg:#0f0f10;
  --evx-card:#ffffff;
  --evx-muted:#63666f;
}

.evx{ background:var(--evx-bg); padding:44px 16px; }
.evx-card{
  max-width:1150px; margin:0 auto;
  display:grid; grid-template-columns: 1.05fr 1fr; gap:28px;
  background:var(--evx-card); border-radius:20px; overflow:hidden;
  box-shadow:0 14px 38px rgba(0,0,0,.28);
}

/* Poster */
.evx-media{ position:relative; display:block; background:#0d0e10; }
.evx-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.evx-media::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 80% at 50% 10%, rgba(0,0,0,.10), transparent 55%);
  pointer-events:none;
}
/* Date pill */
.evx-date{
  position:absolute; top:14px; left:14px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:8px 10px; border-radius:12px;
  background:rgba(0,0,0,.65); color:#fff; font-weight:800; letter-spacing:.3px;
}
.evx-date .d{ font-size:22px; line-height:1; }
.evx-date .m{ font-size:12px; opacity:.9; }
.evx-date .y{ font-size:10px; opacity:.8; }

/* Body */
.evx-body{ padding:28px; display:flex; flex-direction:column; }
.evx-title{
  margin:0 0 10px; font-family:'Anton',sans-serif;
  font-size: clamp(28px, 3.2vw, 46px); line-height:1.04; color:#14161b;
}
.evx-meta{ list-style:none; padding:0; margin:0 0 14px; display:flex; flex-wrap:wrap; gap:10px; }
.evx-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px; font-weight:700; font-size:12px;
  background:#f5f6f8; color:#222; border:1px solid #e8e9ee;
}
.evx-chip svg{ width:14px; height:14px; fill:currentColor; opacity:.8; }

.evx-desc{ color:#2a2c33; line-height:1.6; margin:6px 0 18px; font-size:15px; }

/* Buttons */
.evx-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }
.evx-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px; font-weight:800; text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.evx-primary{
  background:linear-gradient(180deg, #2f6aff, var(--evx-brand));
  color:#fff; box-shadow:0 8px 22px rgba(0,71,171,.30);
}
.evx-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,71,171,.40); }
.evx-ghost{
  background:#eef1f7; color:#0f1a2e; border:1px solid #dbe1ee;
}
.evx-ghost:hover{ background:#e7ecf8; }
/* ===== Simple Modern Event Card (evm-) ===== */
:root{
  --evm-brand:#0047ab;         /* change once if you want a different accent */
  --evm-bg:#0f0f10;
  --evm-card:#ffffff;
  --evm-text:#14161b;
}

.evm{ background:var(--evm-bg); padding:40px 16px; }
.evm-card{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr 1fr; gap:24px;
  background:var(--evm-card); border-radius:16px; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}

/* Poster */
.evm-media{ position:relative; display:block; background:#0d0e10; }
.evm-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* date tag on poster */
.evm-tag{
  position:absolute; top:12px; left:12px;
  padding:6px 10px; border-radius:10px;
  background:rgba(0,0,0,.65); color:#fff; font-weight:800; font-size:12px; letter-spacing:.3px;
  backdrop-filter: blur(4px);
}

/* Body */
.evm-body{ padding:24px; display:flex; flex-direction:column; }
.evm-title{
  margin:0 0 10px; font-family:'Anton',sans-serif;
  font-size:clamp(26px,3vw,42px); line-height:1.05; color:var(--evm-text);
}
.evm-meta{
  list-style:none; padding:0; margin:0 0 12px;
  display:flex; flex-wrap:wrap; gap:10px;
}
.evm-meta li{
  font-size:12px; font-weight:700;
  padding:6px 10px; border-radius:999px;
  background:#f5f6f8; border:1px solid #e6e8ef; color:#111;
}
.evm-desc{ margin:8px 0 18px; color:#2a2c33; line-height:1.6; font-size:15px; }

/* Buttons */
.evm-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }
.evm-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:10px; font-weight:800; text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.evm-primary{
  background:linear-gradient(180deg,#2f6aff,var(--evm-brand)); color:#fff;
  box-shadow:0 8px 20px rgba(0,71,171,.30);
}
.evm-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 26px rgba(0,71,171,.40); }
.evm-ghost{ background:#eef1f7; color:#0f1a2e; border:1px solid #dbe1ee; }
.evm-ghost:hover{ background:#e7ecf8; }
@media (max-width: 960px){
  .evm-card{ grid-template-columns: 1fr; }
  .evm-media{ aspect-ratio: 3 / 4; }          /* portrait instead of 4/3 */
  .evm-media img{ object-fit: cover; object-position: top center; }
}

.breadcrumbs {
  font-size: 14px;
  margin: 10px 20px;
  color: #666;
}

.breadcrumbs a {
  color: #004aad;  /* or gray */
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  gap: 6px;
}

.breadcrumbs li::after {
  content: "›";
  margin-left: 6px;
  color: #aaa;
}

.breadcrumbs li:last-child::after {
  content: "";
}



/* Responsive */
@media (max-width:960px){
  .evm-card{ grid-template-columns:1fr; }
  .evm-media{ aspect-ratio:4/3; }         /* poster on top */
  .evm-actions .evm-btn{ flex:1 1 140px; }/* buttons stretch evenly */
}
@media (max-width:520px){
  .evm-body{ padding:18px; }
  .evm-desc{ font-size:14px; }
}

/* Responsive */
@media (max-width: 980px){
  .evx-card{ grid-template-columns: 1fr; }
  .evx-media{ aspect-ratio: 4/3; }          /* poster on top */
  .evx-btn{ flex:1 1 140px; }               /* buttons stretch evenly */
}
@media (max-width: 520px){
  .evx-body{ padding:18px; }
  .evx-desc{ font-size:14px; }
  .evx-chip{ font-size:11px; padding:6px 9px; }
}

/* Responsive */
@media (max-width: 980px){
  .ev-card{ grid-template-columns: 1fr; }
  .ev-media{ aspect-ratio: 4/3; }      /* nice top visual on mobile */
  .ev-actions .ev-btn{ flex:1 1 140px; } /* buttons stretch evenly */
}
@media (max-width: 520px){
  .ev-body{ padding:18px; }
  .ev-desc{ font-size:14px; }
  .ev-chip{ font-size:11px; padding:6px 9px; }
}

/* ≥1800px: full width 8 columns */
@media (min-width: 1800px) {
  .events-grid {
    max-width: none; /* let it span the full screen */
    grid-template-columns: repeat(8, 1fr);
  }
}
/* 6 columns (1381–1799px), full width */
@media (min-width: 1671px) and (max-width: 1799px) {
  .events-grid {
    max-width: none;
    grid-template-columns: repeat(6, 1fr);
  }
}

/* 5 columns (1381–1670px), full width */
@media (min-width: 1381px) and (max-width: 1670px) {
  .events-grid {
    max-width: none;
    grid-template-columns: repeat(5, 1fr);
  }
}
/* 4 columns (996–1380px), full width */
@media (min-width: 996px) and (max-width: 1380px) {
  .events-grid {
    max-width: none;
    grid-template-columns: repeat(4, 1fr);
  }
}
/* 995px and below → belt mode showing 3 fixed-size cards per view */
@media (max-width: 995px) {
  .events-grid {
    display: flex;
    gap: var(--gap);
    justify-content: flex-start;     /* ← ensure we start at the left */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 8px 4px 12px;
    max-width: 100%;
    scroll-padding-left: 4px;        /* ← matches the left padding above */
    scrollbar-gutter: stable both-edges; /* optional: steadier layout */


  }
  .event-card {
    /* fixed card width; ~3 per screen with nice spacing */
    flex: 0 0 calc((100vw - (2 * 4px) - (2 * var(--gap))) / 3);
    scroll-snap-align: start;
  }

  /* Optional: nicer scrollbar */
  .events-grid::-webkit-scrollbar { height: 8px; }
  .events-grid::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.25);
    border-radius: 4px;
  }
}

/* ===== Event Card Look (anchor or div) ===== */
.event-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #10191f;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.event-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.35);
}
.event-card > img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.event-date {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  text-align: center;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.75) 100%);
}
.event-org {
  margin: 10px 6px 6px;
  font-size: .95rem;
  font-weight: 600;
  color: #cfd9df;
}

/* ===== Footer ===== */
.footer {
  background-color: #0052cc;
  color: white;
  padding: 50px 20px;
  font-family: 'Arial', sans-serif;
  font-size: 15px;
}
.footer-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
  gap: 60px;
  align-items: flex-start;
}
.footer-column { flex: 1 1 200px; min-width: 200px; }
.footer-logo { width: 100px; margin-bottom: 15px; }
.logo-column p { font-size: 14px; line-height: 1.6; max-width: 250px; }
.footer-column h3 { font-size: 26px; margin-bottom: 20px; font-family: 'Anton', sans-serif; }
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column ul li { margin-bottom: 20px; font-size: 15px; }
.footer-column ul li a { color: white; text-decoration: none; }
.footer-column ul li a:hover { text-decoration: underline; }
.footer-column ul li i { margin-right: 10px; }

/* ===== Responsive nav & featured adjustments ===== */
@media (max-width: 768px) {
  .navbar-container { flex-direction: column; align-items: center; }
  .burger { display: block; }
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: center;
    background-color: #0047ab;
    width: 100%;
    padding: 20px 0;
    border-bottom: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
  }
  .nav-links li { margin: 10px 0; }
  .nav-links.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .overlay h1 { font-size: 50px; line-height: 1.2; }
  .overlay p  { font-size: 16px; }

  .event-card-large { flex-direction: column; }
  .event-details { padding: 20px; }

  .footer-content { flex-direction: column; align-items: center; text-align: center; }
  .footer-column { margin-bottom: 30px; }
  .footer-logo { margin: 0 auto 15px; }
}