/* ---- accent per store ---- */
.acc-slo { --acc: var(--color-forest); --acc-10: var(--color-forest-10); --acc-dark: var(--color-forest-dark); }
.acc-gb  { --acc: var(--color-earth);  --acc-10: var(--color-earth-10);  --acc-dark: var(--color-earth-dark);  }
.acc-ro  { --acc: var(--color-ocean);  --acc-10: var(--color-ocean-10);  --acc-dark: var(--color-ocean-dark);  }

/* ---- page layout ---- */
.ev-bg { background: var(--color-shell); }
.ev-main {
  max-width: var(--max-width); margin: 0 auto;
  padding: 0 var(--gutter-mobile) var(--space-16);
}

/* ---- page intro ---- */
.ev-intro { padding: 24px 0 32px; }
.ev-intro .eyebrow {
  font-family: var(--font-label); font-size: var(--text-sm); font-weight: 500;
  letter-spacing: var(--tracking-wider); text-transform: uppercase;
  color: var(--color-slate-60); margin-bottom: 10px;
}
.ev-intro h1 {
  font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: 800; letter-spacing: -0.01em; line-height: 1.1;
}
.ev-intro p { max-width: 560px; margin-top: 12px; color: var(--color-slate-80); font-size: var(--text-md); }

/* ---- filter tabs (collective page only) ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 8px; }
.tab {
  font-family: var(--font-label); font-size: var(--text-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--color-haze);
  background: transparent; color: var(--color-slate-80); cursor: pointer; transition: 150ms ease;
}
.tab:hover { border-color: var(--color-slate-40); }
.tab[data-filter="all"].active { background: var(--color-slate); color: var(--color-shell); border-color: var(--color-slate); }
.tab[data-filter="slo"] { border-color: var(--color-forest); color: var(--color-forest-dark); }
.tab[data-filter="slo"]:hover { background: var(--color-forest-10); }
.tab[data-filter="slo"].active { background: var(--color-forest); color: var(--color-shell); border-color: var(--color-forest); }
.tab[data-filter="gb"] { border-color: var(--color-earth); color: var(--color-earth-dark); }
.tab[data-filter="gb"]:hover { background: var(--color-earth-10); }
.tab[data-filter="gb"].active { background: var(--color-earth); color: var(--color-shell); border-color: var(--color-earth); }
.tab[data-filter="ro"] { border-color: var(--color-ocean); color: var(--color-ocean-dark); }
.tab[data-filter="ro"]:hover { background: var(--color-ocean-10); }
.tab[data-filter="ro"].active { background: var(--color-ocean); color: var(--color-shell); border-color: var(--color-ocean); }

/* ---- featured event ---- */
.events-preview #ev-featured { max-width: var(--max-width); margin: 0 auto; }
.featured {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: var(--color-white); border: 1px solid var(--color-haze);
  border-radius: 10px; box-shadow: var(--shadow-card); overflow: hidden; margin-top: 8px;
}
.featured-media {
  background: var(--color-haze); min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.featured-media img { width: 100%; height: 100%; object-fit: cover; }
.featured-media-placeholder {
  font-family: var(--font-label); font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-slate-60);
}
.featured-body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; }
.featured-body .eyebrow { color: var(--acc-dark); }
.featured h2 {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 800; line-height: 1.1; margin: 6px 0 14px;
}
.featured-meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-family: var(--font-label); font-size: var(--text-sm);
  color: var(--color-slate-80); margin-bottom: 14px;
}
.featured p.desc { color: var(--color-slate-80); font-size: var(--text-base); margin-bottom: 22px; }
.ev-tag {
  display: inline-block; font-family: var(--font-label); font-size: var(--text-xs);
  font-weight: 500; letter-spacing: var(--tracking-wider); text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px; background: var(--acc-10); color: var(--acc-dark);
}
.ev-btn {
  display: inline-block; align-self: flex-start; font-family: var(--font-label);
  font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-shell); background: var(--acc); padding: 12px 24px;
  border: none; border-radius: 0; box-shadow: var(--shadow-btn); cursor: pointer; transition: 150ms ease;
}
.ev-btn:hover { box-shadow: var(--shadow-btn-hover); }

/* ---- month sections ---- */
.month { margin-top: 54px; }
.month-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.month-head h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; }
.month-head .rule { flex: 1; height: 1px; background: var(--color-haze); }

/* ---- event grid + card ---- */
.ev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.ev-card {
  background: var(--color-white); border: 1px solid var(--color-haze);
  border-radius: 10px; box-shadow: var(--shadow-card);
  overflow: hidden; display: flex; flex-direction: column; transition: 150ms ease;
}
.ev-card:hover { box-shadow: 0 6px 16px rgba(28,28,28,0.10); }
.ev-card-media { background: var(--color-haze); height: 150px; overflow: hidden; }
.ev-card-media img { width: 100%; height: 100%; object-fit: cover; }
.ev-card-body { display: flex; gap: 16px; padding: 20px; }
.ev-date {
  flex: 0 0 auto; width: 62px; text-align: center;
  background: var(--acc); color: var(--color-shell);
  border-radius: 10px; padding: 10px 0; align-self: flex-start;
}
.ev-date .d { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; line-height: 1; }
.ev-date .m {
  font-family: var(--font-label); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--tracking-wider); text-transform: uppercase; margin-top: 4px;
}
.ev-card-main { min-width: 0; }
.ev-card-main .ev-tag { margin-bottom: 8px; }
.ev-card-main h4 {
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: 700; line-height: 1.2; margin-bottom: 6px;
}
.ev-card-meta { font-family: var(--font-label); font-size: var(--text-sm); color: var(--color-slate-80); margin-bottom: 8px; }
.ev-card-desc {
  font-size: var(--text-sm); color: var(--color-slate-80);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 10px;
}
.ev-card-link {
  font-family: var(--font-label); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--acc-dark);
}

/* ---- empty state ---- */
.ev-empty {
  border: 1px dashed var(--color-haze); border-radius: 10px;
  background: var(--color-white); text-align: center; padding: 48px 24px; color: var(--color-slate-60);
}
.ev-empty h4 { font-family: var(--font-display); font-weight: 700; color: var(--color-slate-80); margin-bottom: 6px; }

/* ---- loading / error states ---- */
.ev-loading {
  text-align: center; padding: 64px 24px;
  font-family: var(--font-label); font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-slate-60);
}
.ev-error {
  border: 1px solid var(--color-haze); border-radius: 10px; background: var(--color-white);
  padding: 32px 24px; text-align: center; color: var(--color-slate-80);
  font-family: var(--font-label); font-size: var(--text-sm);
}

@media (max-width: 760px) {
  .featured { grid-template-columns: 1fr; }
  .featured-media { min-height: 200px; }
  .featured-body { padding: 26px 24px; }
  .ev-intro h1 { font-size: var(--text-2xl); }
}