/* =========================================================
   Catalunyaar — What's On This Week (24 Sep – 4 Oct 2026)
   Everything is scoped under .cyr-events-post
   ========================================================= */

/* ---------- 0. DEFENSIVE TEXT-COLOR RESET (mandatory) ----------
   The host theme applies gradient/clipped text to h1/h3 via
   -webkit-text-fill-color: transparent + background-clip:text.
   A plain `color:` can't beat that, so we neutralise it here. */
.cyr-events-post h1,
.cyr-events-post h2,
.cyr-events-post h3,
.cyr-events-post h4,
.cyr-events-post p,
.cyr-events-post span,
.cyr-events-post a,
.cyr-events-post li {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  text-fill-color: currentColor !important;
}

/* ---------- 1. Tokens ---------- */
.cyr-events-post {
  --cyr-bg-1: #0a0a18;
  --cyr-bg-2: #171235;
  --cyr-bg-3: #241247;
  --cyr-gold: #f0a202;
  --cyr-gold-light: #ffd873;
  --cyr-violet: #8b5cf6;
  --cyr-sapphire: #4c6ef5;
  --cyr-rose: #e64980;
  --cyr-free: #22c55e;
  --cyr-paid: #f0a202;
  --cyr-text: #ece9f7;
  --cyr-muted: #b7b1d1;
  --cyr-card: rgba(255, 255, 255, 0.045);
  --cyr-card-border: rgba(255, 255, 255, 0.09);

  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--cyr-text) !important;
  background: linear-gradient(160deg, var(--cyr-bg-1) 0%, var(--cyr-bg-2) 55%, var(--cyr-bg-3) 100%) !important;
  border-radius: 20px;
  padding: 0 0 40px;
  overflow: hidden;
  line-height: 1.55;
  position: relative;
  box-sizing: border-box;
}
.cyr-events-post *,
.cyr-events-post *::before,
.cyr-events-post *::after { box-sizing: border-box; }

.cyr-events-post .cyr-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 2. Hero ---------- */
.cyr-events-post .cyr-hero {
  position: relative;
  padding: 64px 40px 48px;
  text-align: center;
  overflow: hidden;
}
.cyr-events-post .cyr-hero-deco {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0.9;
}
.cyr-events-post .cyr-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.cyr-events-post .cyr-eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyr-gold-light) !important;
  border: 1px solid rgba(240, 162, 2, 0.45);
  border-radius: 999px; padding: 6px 16px; margin: 0 0 18px;
}
.cyr-events-post .cyr-hero-title {
  font-family: "Anton", "Impact", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(44px, 8vw, 84px) !important;
  line-height: 1.02 !important;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--cyr-gold) !important;
  text-shadow: 0 4px 24px rgba(240, 162, 2, 0.28), 0 2px 0 rgba(0, 0, 0, 0.35);
  margin: 0 0 16px !important;
}
.cyr-events-post .cyr-hero-sub {
  font-size: 18px !important;
  color: var(--cyr-text) !important;
  max-width: 620px; margin: 0 auto 22px !important;
}
.cyr-events-post .cyr-hero-stats {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  list-style: none; padding: 0; margin: 0;
}
.cyr-events-post .cyr-hero-stats li {
  font-size: 13px; font-weight: 600;
  color: var(--cyr-text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--cyr-card-border);
  border-radius: 999px; padding: 6px 14px;
}

/* ---------- 3. Sections ---------- */
.cyr-events-post .cyr-section { padding: 28px 40px 8px; }
.cyr-events-post .cyr-section-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 8px;
}
.cyr-events-post .cyr-section-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cyr-events-post .cyr-section-icon svg { width: 24px; height: 24px; }
.cyr-events-post .cyr-section-title {
  font-family: "Anton", "Impact", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(26px, 4vw, 36px) !important;
  letter-spacing: 0.02em; text-transform: uppercase;
  margin: 0 !important; line-height: 1.1 !important;
}
.cyr-events-post .cyr-section-intro {
  color: var(--cyr-muted) !important; font-size: 15px !important; margin: 0 0 20px !important;
}

.cyr-events-post .cyr-sec-festes .cyr-section-title { color: var(--cyr-violet) !important; }
.cyr-events-post .cyr-sec-general .cyr-section-title { color: var(--cyr-sapphire) !important; }
.cyr-events-post .cyr-sec-indian .cyr-section-title { color: var(--cyr-rose) !important; }

.cyr-events-post .cyr-sec-festes .cyr-section-icon { background: rgba(139, 92, 246, 0.16); color: var(--cyr-violet); }
.cyr-events-post .cyr-sec-general .cyr-section-icon { background: rgba(76, 110, 245, 0.16); color: var(--cyr-sapphire); }
.cyr-events-post .cyr-sec-indian .cyr-section-icon { background: rgba(230, 73, 128, 0.16); color: var(--cyr-rose); }

/* ---------- 4. Cards ---------- */
.cyr-events-post .cyr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.cyr-events-post .cyr-card {
  position: relative;
  background: var(--cyr-card) !important;
  border: 1px solid var(--cyr-card-border);
  border-left: 4px solid var(--cyr-accent, var(--cyr-violet));
  border-radius: 14px;
  padding: 20px 20px 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.cyr-events-post .cyr-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
.cyr-events-post .cyr-sec-festes .cyr-card { --cyr-accent: var(--cyr-violet); }
.cyr-events-post .cyr-sec-general .cyr-card { --cyr-accent: var(--cyr-sapphire); }
.cyr-events-post .cyr-sec-indian .cyr-card { --cyr-accent: var(--cyr-rose); }

.cyr-events-post .cyr-card-top { display: flex; align-items: flex-start; gap: 12px; }
.cyr-events-post .cyr-cat {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--cyr-accent);
  background: color-mix(in srgb, var(--cyr-accent) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--cyr-accent) 45%, transparent);
}
.cyr-events-post .cyr-cat svg { width: 22px; height: 22px; }
.cyr-events-post .cyr-card-title {
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-size: 18px !important; font-weight: 700 !important; line-height: 1.25 !important;
  color: #ffffff !important;
  margin: 0 !important;
}
.cyr-events-post .cyr-meta {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.cyr-events-post .cyr-meta li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; color: var(--cyr-muted) !important;
}
.cyr-events-post .cyr-meta i { font-size: 16px; color: var(--cyr-accent); margin-top: 2px; }
.cyr-events-post .cyr-desc {
  font-size: 15px !important; color: var(--cyr-text) !important; margin: 0 !important;
}
.cyr-events-post .cyr-card-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-top: 6px;
}

/* Price chips — semantic colors, never themed */
.cyr-events-post .cyr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 999px; padding: 5px 12px;
}
.cyr-events-post .cyr-chip-free {
  color: var(--cyr-free) !important;
  background: rgba(34, 197, 94, 0.13) !important;
  border: 1px solid rgba(34, 197, 94, 0.5);
}
.cyr-events-post .cyr-chip-paid {
  color: var(--cyr-paid) !important;
  background: rgba(240, 162, 2, 0.13) !important;
  border: 1px solid rgba(240, 162, 2, 0.5);
}
.cyr-events-post .cyr-chip-date {
  color: var(--cyr-muted) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px dashed rgba(255, 255, 255, 0.3);
}

.cyr-events-post .cyr-link {
  font-size: 14px; font-weight: 700;
  color: var(--cyr-gold) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent;
}
.cyr-events-post .cyr-link:hover,
.cyr-events-post .cyr-link:focus-visible { border-bottom-color: var(--cyr-gold); color: var(--cyr-gold-light) !important; }

.cyr-events-post .cyr-badge-indian {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--cyr-rose) !important;
  background: rgba(230, 73, 128, 0.14) !important;
  border: 1px solid rgba(230, 73, 128, 0.45);
  border-radius: 999px; padding: 3px 9px;
}
.cyr-events-post .cyr-sec-indian .cyr-card-title { padding-right: 90px; }

.cyr-events-post .cyr-flag {
  font-size: 13px !important; color: var(--cyr-gold-light) !important;
  margin: 0 !important; font-style: italic;
}

/* ---------- 5. CTA ---------- */
.cyr-events-post .cyr-cta {
  margin: 36px 40px 0;
  padding: 32px 28px;
  border-radius: 18px;
  text-align: center;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(76, 110, 245, 0.18) 50%, rgba(230, 73, 128, 0.2)) !important;
  border: 1px solid rgba(240, 162, 2, 0.35);
}
.cyr-events-post .cyr-cta-title {
  font-family: "Anton", "Impact", sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(26px, 4vw, 38px) !important;
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--cyr-gold) !important;
  margin: 0 0 10px !important;
}
.cyr-events-post .cyr-cta-text { color: var(--cyr-text) !important; margin: 0 auto 20px !important; max-width: 560px; }
.cyr-events-post .cyr-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cyr-events-post .cyr-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px;
  padding: 12px 22px; border-radius: 999px;
  text-decoration: none !important;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.cyr-events-post .cyr-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.cyr-events-post .cyr-btn-wa { background: #25d366 !important; color: #0a0a18 !important; }
.cyr-events-post .cyr-btn-site {
  background: transparent !important; color: var(--cyr-gold) !important;
  border: 2px solid var(--cyr-gold);
}

/* ---------- 6. Social footer ---------- */
.cyr-events-post .cyr-social {
  margin: 32px 40px 0; text-align: center;
}
.cyr-events-post .cyr-social-label {
  font-size: 13px !important; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cyr-muted) !important; margin: 0 0 12px !important;
}
.cyr-events-post .cyr-social-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.cyr-events-post .cyr-social-list a {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: var(--cyr-text) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--cyr-card-border);
  text-decoration: none !important;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.cyr-events-post .cyr-social-list a:hover { color: var(--cyr-gold) !important; border-color: var(--cyr-gold); transform: translateY(-2px); }
.cyr-events-post .cyr-signoff {
  margin: 22px 40px 0 !important; text-align: center;
  font-size: 13px !important; color: var(--cyr-muted) !important; font-style: italic;
}

/* ---------- 7. Progressive-enhancement reveal (JS adds .cyr-js) ---------- */
.cyr-events-post.cyr-js .cyr-card.cyr-reveal { opacity: 0; transform: translateY(14px); }
.cyr-events-post.cyr-js .cyr-card.cyr-reveal.cyr-in {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cyr-events-post .cyr-card,
  .cyr-events-post.cyr-js .cyr-card.cyr-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- 8. Mobile ---------- */
@media (max-width: 700px) {
  .cyr-events-post { border-radius: 0; }
  .cyr-events-post .cyr-hero { padding: 44px 20px 34px; }
  .cyr-events-post .cyr-hero-sub { font-size: 16px !important; }
  .cyr-events-post .cyr-section { padding: 22px 16px 4px; }
  .cyr-events-post .cyr-grid { grid-template-columns: 1fr; gap: 14px; }
  .cyr-events-post .cyr-card { padding: 18px 16px 16px; }
  .cyr-events-post .cyr-cta { margin: 28px 16px 0; padding: 26px 18px; }
  .cyr-events-post .cyr-social { margin: 26px 16px 0; }
  .cyr-events-post .cyr-signoff { margin: 18px 16px 0 !important; }
  .cyr-events-post .cyr-btn { width: 100%; justify-content: center; }
}