/*
 * FBZ Events — Luxury Skin (v19.2.3)
 * Scope: ONLY Events section (home + /events/ archive)
 * NOTE: No changes to hover/countdown mechanics or PHP structure.
 * File: /css/fbz-events.css
 */

/* ==========================================================================
   0) SECTION WRAPPER + BACKDROP
   ========================================================================== */

.fbz-events-section{
  width:100%;
  position:relative;
  padding: 110px 0;
  overflow:hidden;

  /* Clean dark navy — no glow behind text */
  background:
    radial-gradient(900px 500px at 75% 80%, rgba(255,255,255,0.04), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, rgba(25,29,49,0.98) 0%, rgba(15,23,42,1) 100%);
}

.fbz-events-section::before,
.fbz-events-section::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.14), rgba(255,255,255,0));
  opacity:.9;
  pointer-events:none;
}
.fbz-events-section::before{ top:0; }
.fbz-events-section::after{ bottom:0; }

/* Container list wrapper */
.fbz-events-list{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ========================================================================== 
   HOME / FRONT-PAGE — DESKTOP SINGLE-ROW LAYOUT
   Goal: Date (left) → Title (fixed) → Meta fills remaining space → Stream badge / Actions (right)
   v19.4.0: Meta font bigger, stream badge at far right, min card width auto.
   ========================================================================== */

@media (min-width: 1024px){
  body.home .fbz-events-list,
  body.front-page .fbz-events-list{
    max-width: 1320px;
    padding: 0 40px;
  }

  /* The clickable link fills all horizontal space except actions */
  body.home .fbz-event-link,
  body.front-page .fbz-event-link{
    flex: 1;
    min-width: 0;
    align-items: center; /* vertically center date + main + badge */
  }

  /* Main content area is a horizontal flex row */
  body.home .fbz-event-main,
  body.front-page .fbz-event-main{
    display: flex;
    align-items: center;
    gap: 0;
    border-left: none;
    padding-left: 22px;
    min-width: 0;
    flex: 1;
  }

  /* Title: auto width, title and meta share horizontal space */
  body.home .fbz-event-title,
  body.front-page .fbz-event-title{
    flex: 0 0 auto;
    /* NO max-width — title takes natural width, meta fills rest */
  }

  body.home .fbz-event-title h3,
  body.front-page .fbz-event-title h3{
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    margin: 0;
    font-size: clamp(22px, 2vw, 30px);
  }

  /* Info (meta) fills ALL remaining space */
  body.home .fbz-event-info,
  body.front-page .fbz-event-info{
    flex: 1;
    min-width: 0;
    margin-top: 0;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center;
    gap: 8px;
    padding-left: 14px;
  }

  /* Much bigger meta text on home desktop — fills the visual space */
  body.home .fbz-events-section .fbz-event-loc,
  body.front-page .fbz-events-section .fbz-event-loc{
    font-size: clamp(14px, 1.3vw, 18px);
    letter-spacing: 0.02em;
    opacity: 0.80;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
  }

  body.home .fbz-event-actions,
  body.front-page .fbz-event-actions{
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  /* Stream badge inside link — pushed to far right via margin-left: auto */
  body.home .fbz-stream-badge,
  body.front-page .fbz-stream-badge{
    margin-left: auto;
    flex-shrink: 0;
    margin-right: 18px;
  }
}


/* ==========================================================================
   1) SECTION HEADER (v19.5 — usa sec-header / sec-tag / sec-title / sec-desc de style.css)
   font-size, color, line-height, text-transform, text-outline → style.css lo maneja.
   Aquí solo overrides específicos de la sección Events.
   ========================================================================== */

.fbz-events-head{
  margin-bottom: 56px;
  /* text-align:center viene de .sec-header en style.css */
}

/* ==========================================================================
   2) UPCOMING EVENT BAR (LIST ITEM)
   - IMPORTANT: Scoped to .fbz-events-section to avoid bleeding into single-event template.
   ========================================================================== */

.fbz-events-section .fbz-event-item{
  position:relative;
  display:flex;
  align-items:center;
  gap: 18px;

  padding: 22px 20px;
  border-radius: 22px;

  background: rgba(15, 23, 42, 0.34);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 48px rgba(0,0,0,0.35);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  overflow:hidden;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.fbz-events-section .fbz-event-item::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 4px;
  background: rgba(253,235,25,0.90);
  opacity: .95;
  transform: scaleY(1);
}

@media (hover:hover) and (pointer:fine){
  .fbz-events-section .fbz-event-item:hover{
    transform: translateY(-6px);
    background: rgba(30, 41, 59, 0.42);
    border-color: rgba(253,235,25,0.28);
    box-shadow: 0 28px 72px rgba(0,0,0,0.50);
  }
}

/* next event subtle emphasis (keeps your .fbz-event-item--next flag) */
.fbz-events-section .fbz-event-item--next{
  background: rgba(253, 235, 25, 0.08);
  border-color: rgba(253, 235, 25, 0.18);
}

/* link wrapper */
.fbz-events-section .fbz-event-link{
  flex:1;
  display:flex;
  align-items:center;
  gap: 18px;
  text-decoration:none;
  color: inherit;
  position:relative;
  z-index: 2;
  min-width: 0;
}

/* date block */
.fbz-events-section .fbz-event-date{
  width: 90px;
  min-width: 90px;
  text-align:center;
  padding: 14px 10px;
  border-radius: 18px;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);

  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

/* Home-only: weekday label above day number (rendered by PHP only on front-page) */
.fbz-events-section .fbz-event-dow{
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 6px;
  font-weight: 900;
  color: rgba(255,255,255,0.82);
}

.fbz-events-section .fbz-event-day{
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  color: rgba(253,235,25,0.95);
  /* v19.2.5: Removed text-shadow glow on date number */
}

.fbz-events-section .fbz-event-mon-year{
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 6px;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: rgba(255,255,255,0.78);
}

@media (hover:hover) and (pointer:fine){
  .fbz-events-section .fbz-event-item:hover .fbz-event-date{
    background: rgba(253,235,25,0.10);
    border-color: rgba(253,235,25,0.24);
    transform: translateY(-1px) scale(1.03);
  }
}

/* main content */
.fbz-events-section .fbz-event-main{
  flex:1;
  padding-left: 22px;
  border-left: 1px solid rgba(255,255,255,0.10);
  min-width: 0;
}

.fbz-events-section .fbz-event-title h3{
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 8px 0;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.96);
  transition: color .22s ease;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

@media (hover:hover) and (pointer:fine){
  .fbz-events-section .fbz-event-item:hover .fbz-event-title h3{
    color: rgba(253,235,25,0.96);
  }
}

.fbz-events-section .fbz-event-info{
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.86;
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items:center;
  color: rgba(255,255,255,0.78);
}

.fbz-events-section .fbz-event-cat{
  padding: 4px 12px;
  background: rgba(253,235,25,0.14);
  border: 1px solid rgba(253,235,25,0.18);
  border-radius: 999px;
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(253,235,25,0.92);
}

.fbz-events-section .fbz-event-loc,
.fbz-events-section .fbz-event-time{
  opacity: 0.92;
}

/* Base loc size — readable on all pages. Desktop home gets a bigger override above. */
.fbz-events-section .fbz-event-loc{
  font-size: 14.5px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
/* actions */
.fbz-events-section .fbz-event-actions{
  display:flex;
  align-items:center;
  gap: 12px;
  position:relative;
  z-index: 15; /* above overlay */
}

/* Buttons (scoped to Events) */
.fbz-events-section .fbz-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 44px;
  padding: 0 18px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);

  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration:none;
  white-space: nowrap;

  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.fbz-events-section .fbz-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.10);
  border-color: rgba(253,235,25,0.32);
  box-shadow: 0 12px 28px rgba(0,0,0,0.30);
}

/* keep class from markup for ticket btn */
.fbz-events-section .fbz-event-ticket{
  white-space: nowrap;
}

/* mobile-only button class exists in markup */
.fbz-events-section .fbz-mobile-btn{
  display:none;
}

/* footer CTA under list (View more events) — margin only; styling via .view-all-btn in style.css */

/* ==========================================================================
   3) COUNTDOWN OVERLAY (MECHANIC PRESERVED)
   - Class names MUST stay: .fbz-event-countdown + children
   ========================================================================== */

.fbz-events-section .fbz-event-countdown{
  position:absolute;
  left:0; top:0; right:0; bottom:0;

  display:flex;
  align-items:center;
  justify-content:center;

  pointer-events:none;
  opacity:0;

  background:
    linear-gradient(135deg, rgba(253,235,25,0.96) 0%, rgba(220,203,2,0.96) 100%);
  transition: opacity .22s ease;

  z-index: 10;
}

.fbz-events-section .fbz-event-countdown-content{
  text-align:center;
  padding: 10px 14px;
}

/* Home-only: when Tickets exists, we render 2 buttons inside overlay */
.fbz-events-section .fbz-event-countdown-actions{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fbz-events-section .fbz-event-countdown-btn--ticket{
  background: transparent;
  color: #191d31;
  border-color: rgba(25,29,49,0.90);
}

.fbz-events-section .fbz-event-countdown-btn--ticket:hover{
  background: rgba(25,29,49,0.12);
  border-color: rgba(25,29,49,1);
}

.fbz-events-section .fbz-event-countdown-timer{
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 900;
  color: #191d31;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.12);
}

.fbz-events-section .fbz-event-countdown-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 46px;
  padding: 0 28px;
  border-radius: 999px;

  background: rgba(25,29,49,0.96);
  color: rgba(253,235,25,0.98);

  border: 1px solid rgba(25,29,49,0.96);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration:none;

  pointer-events:auto;
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.fbz-events-section .fbz-event-countdown-btn:hover{
  transform: translateY(-1px) scale(1.02);
  background: rgba(25,29,49,1);
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
}

/* Show countdown on desktop hover — ONLY on true pointer devices (not touch) */
@media (hover:hover) and (pointer:fine){
  .fbz-events-section .fbz-event-item:hover .fbz-event-countdown{
    opacity:1;
  }

  /* Hide static right-side buttons while the hover overlay is shown */
  .fbz-events-section .fbz-event-item:hover .fbz-event-actions{
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
  }
}

/* mobile countdown text (same mechanic) */
.fbz-events-section .fbz-event-countdown-mobile{
  /* v19.4.2: Always hidden — mobile uses action buttons instead */
  display: none !important;
}

/* ==========================================================================
   4) TOUCH DEVICES / MOBILE BEHAVIOR (PRESERVED)
   ========================================================================== */

@media (hover:none){
  /* Touch devices: never show desktop hover overlay */
  .fbz-events-section .fbz-event-countdown{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }

  /* Disable main link wrapper — only individual buttons clickable */
  .fbz-events-section .fbz-event-link{
    pointer-events:none !important;
  }

  /* Always keep actions & buttons interactive — z-index ensures they stay on top */
  .fbz-events-section .fbz-event-actions{
    pointer-events:auto !important;
    opacity: 1 !important;
    transform: none !important;
    z-index: 20;
    position: relative;
  }
  .fbz-events-section .fbz-btn{
    pointer-events:auto !important;
  }

  /* Active state: prevent opacity flicker on tap */
  .fbz-events-section .fbz-event-item:active .fbz-event-actions{
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* Hide mobile countdown — mobile buttons serve this purpose */
  .fbz-events-section .fbz-event-countdown-mobile{
    display: none !important;
  }
}

/* ==========================================================================
   5) MOBILE LAYOUT (CENTERED, PREMIUM)
   ========================================================================== */

@media (max-width: 768px){
  .fbz-events-section{
    padding: 86px 0;
  }

  .fbz-events-title{
    font-size: 2.5rem; /* matches .sec-title mobile */
  }

  .fbz-events-section .fbz-event-item{
    flex-direction: column;
    text-align:center;
    padding: 26px 18px;
    gap: 16px;
  }

  .fbz-events-section .fbz-event-link{
    flex-direction: column;
    gap: 16px;
    width:100%;
  }

  .fbz-events-section .fbz-event-date{
    width: 104px;
    min-width: 104px;
    margin: 0 auto;
  }

  .fbz-events-section .fbz-event-main{
    border-left: none;
    padding-left: 0;
    width:100%;
  }

  .fbz-events-section .fbz-event-title h3{
    white-space: normal;
  }

  .fbz-events-section .fbz-event-info{
    justify-content:center;
  }

  .fbz-events-section .fbz-event-actions{
    justify-content:center;
    width:100%;
    flex-direction: column;
    gap: 12px;
    pointer-events:auto !important;
  }

  /* keep mobile rule: hide overlay; show mobile buttons */
  .fbz-events-section .fbz-event-countdown{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
  }

  .fbz-events-section .fbz-event-link{
    pointer-events:none !important;
  }

  .fbz-events-section .fbz-btn{
    width:100%;
    max-width: 360px;
    pointer-events:auto !important;
  }

  .fbz-events-section .fbz-mobile-btn{
    display:inline-flex;
  }

  .fbz-events-section .fbz-event-ticket{
    width:100%;
    max-width: 360px;
  }

  /* countdown-mobile always hidden — v19.4.2 */
  .fbz-events-section .fbz-event-countdown-mobile{
    display: none !important;
  }
}

/* ==========================================================================
   6) CTA (WHEN NO UPCOMING EVENTS) — same PHP condition, new skin
   ========================================================================== */

.fbz-events-cta{
  max-width: 980px;
  margin: 0 auto;
  padding: 44px 24px;
  text-align:center;

  background: rgba(15, 23, 42, 0.34);
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 48px rgba(0,0,0,0.35);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.fbz-events-cta-title{
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 900;
  color: rgba(253,235,25,0.95);
  margin-bottom: 18px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.fbz-events-cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height: 52px;
  padding: 0 44px;
  background: linear-gradient(135deg, rgba(253,235,25,1) 0%, rgba(220,203,2,1) 100%);
  color: #191d31;
  border-radius: 999px;

  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration:none;

  border: 1px solid rgba(253,235,25,0.9);
  box-shadow: 0 16px 36px rgba(253,235,25,0.20);
  transition: transform .18s ease, box-shadow .18s ease;
}

.fbz-events-cta-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 22px 52px rgba(253,235,25,0.26);
}

/* ==========================================================================
   7) PAST EVENTS (ARCHIVE) — keep your grid, refine skin
   ========================================================================== */

.fbz-events-past{
  max-width: 1200px;
  margin: 46px auto 0;
  padding: 0 24px;
}

.fbz-events-past-head{
  text-align:center;
  margin-bottom: 22px;
}

.fbz-events-toggle{
  padding: 14px 34px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(253,235,25,0.26);
  border-radius: 999px;
  color: rgba(253,235,25,0.92);
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.fbz-events-toggle:hover{
  transform: translateY(-1px);
  background: rgba(253,235,25,0.10);
  border-color: rgba(253,235,25,0.42);
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
}

.fbz-events-past-list{
  display:none;
  margin-top: 24px;
}
.fbz-events-past-list.fbz-show{
  display:block;
}

/* grid */
.fbz-past-events-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.fbz-past-event-card{
  background: rgba(15, 23, 42, 0.34);
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 18px 44px rgba(0,0,0,0.34);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.fbz-past-event-card:hover{
  transform: translateY(-6px);
  border-color: rgba(253,235,25,0.26);
  box-shadow: 0 26px 66px rgba(0,0,0,0.48);
}

.fbz-past-event-link{
  display:block;
  text-decoration:none;
  color: inherit;
}

.fbz-past-event-image{
  width:100%;
  aspect-ratio: 1;
  overflow:hidden;
  background: rgba(0,0,0,0.24);
}

.fbz-past-event-image img{
  width:100%;
  height:100%;
  object-fit: cover;
  transition: transform .24s ease;
}

.fbz-past-event-card:hover .fbz-past-event-image img{
  transform: scale(1.05);
}

.fbz-past-event-info{
  padding: 18px 18px 20px;
}

.fbz-past-event-title{
  font-size: 16px;
  font-weight: 900;
  color: rgba(255,255,255,0.94);
  margin: 0 0 8px;
  line-height: 1.25;
}

.fbz-past-event-location{
  font-size: 13px;
  color: rgba(255,255,255,0.70);
  margin-bottom: 6px;
}

.fbz-past-event-date{
  font-size: 12px;
  color: rgba(253,235,25,0.92);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* ==========================================================================
   8) VIEW MORE BUTTON (HOME)
   v19.4.0: Button uses class "view-all-btn fbz-events-more" — inherits from style.css
   ========================================================================== */

.fbz-events-actions{
  text-align: center;
  margin-top: 36px;
}

/* Desktop ticket/stream-cta button hidden — surfaced in hover overlay */
@media (min-width: 769px) {
  .fbz-events-section .fbz-event-ticket {
    display: none;
  }
}

/* ==========================================================================
   8b) STREAMING EVENTS — Card variant, STREAM badge, teal hover (v19.4.0)
   ========================================================================== */

/* Stream card: teal left border */
.fbz-events-section .fbz-event-item--stream::before{
  background: linear-gradient(180deg, #22d3ee 0%, #06b6d4 100%);
}

/* Subtle teal tint on the card */
.fbz-events-section .fbz-event-item--stream{
  background: rgba(6, 182, 212, 0.05);
  border-color: rgba(6, 182, 212, 0.14);
}

/* Stream card hover: teal glow instead of yellow — only on pointer:fine devices */
@media (hover:hover) and (pointer:fine){
  .fbz-events-section .fbz-event-item--stream:hover{
    border-color: rgba(6, 182, 212, 0.30);
    box-shadow: 0 28px 72px rgba(6, 182, 212, 0.10), 0 28px 72px rgba(0,0,0,0.40);
  }
  /* Date block teal on stream hover */
  .fbz-events-section .fbz-event-item--stream:hover .fbz-event-date{
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.26);
  }
  /* Title teal on stream hover */
  .fbz-events-section .fbz-event-item--stream:hover .fbz-event-title h3{
    color: rgba(6, 182, 212, 0.96);
  }
  /* Day number teal on stream hover */
  .fbz-events-section .fbz-event-item--stream:hover .fbz-event-day{
    color: rgba(6, 182, 212, 0.96);
  }
}

/* ── STREAM badge (far right of card) ── */
.fbz-stream-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.30);
  color: rgba(6, 182, 212, 0.95);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 16px;
}

/* Pulsing dot */
.fbz-stream-badge-dot{
  display: inline-block;
  font-size: 8px;
  animation: fbz-stream-pulse 1.6s ease-in-out infinite;
}

@keyframes fbz-stream-pulse{
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}

/* ── Countdown overlay: TEAL for stream events ── */
/* Normal overlay inherits yellow from existing rules. Stream overlay overrides. */
.fbz-events-section .fbz-event-item--stream .fbz-event-countdown{
  background: linear-gradient(
    180deg,
    rgba(6, 182, 212, 0.93) 0%,
    rgba(8, 145, 178, 0.97) 100%
  );
}

/* Stream platform chip in meta line */
.fbz-stream-platform-chip{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  opacity: 0.88;
}

/* Stream meta separator */
.fbz-events-section .fbz-event-stream-meta .fbz-meta-sep{
  opacity: 0.35;
  font-size: 10px;
  margin: 0 1px;
}

/* Watch buttons in countdown overlay — white on teal bg (higher specificity fix) */
.fbz-events-section .fbz-event-countdown-btn.fbz-event-countdown-btn--stream,
.fbz-events-section .fbz-event-item--stream .fbz-event-countdown-btn{
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.28);
  color: #fff !important;       /* override yellow from base rule */
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.fbz-events-section .fbz-event-countdown-btn.fbz-event-countdown-btn--stream svg,
.fbz-events-section .fbz-event-item--stream .fbz-event-countdown-btn svg{
  color: #fff !important;       /* force SVG fill (currentColor) to white */
  fill: #fff !important;
}

.fbz-events-section .fbz-event-countdown-btn.fbz-event-countdown-btn--stream:hover,
.fbz-events-section .fbz-event-item--stream .fbz-event-countdown-btn:hover{
  background: rgba(255,255,255,0.26);
  border-color: rgba(255,255,255,0.50);
  color: #fff !important;
}

/* Watch buttons in mobile actions — teal accent */
.fbz-events-section .fbz-event-stream-cta{
  background: rgba(6, 182, 212, 0.10);
  border-color: rgba(6, 182, 212, 0.35);
  color: rgba(6, 182, 212, 0.95);
}

.fbz-events-section .fbz-event-stream-cta:hover{
  background: rgba(6, 182, 212, 0.20);
  border-color: rgba(6, 182, 212, 0.55);
  color: rgba(6, 182, 212, 1);
}

/* ==========================================================================
   PRIVATE EVENTS — Red accent (Colombian flag: Yellow=stream/ticker, Teal=stream, Red=private)
   ========================================================================== */

/* Private card: red left border */
.fbz-events-section .fbz-event-item--private::before{
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

.fbz-events-section .fbz-event-item--private{
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.12);
}

@media (hover:hover) and (pointer:fine){
  .fbz-events-section .fbz-event-item--private:hover{
    border-color: rgba(239, 68, 68, 0.28);
    box-shadow: 0 28px 72px rgba(239, 68, 68, 0.08), 0 28px 72px rgba(0,0,0,0.40);
  }
  .fbz-events-section .fbz-event-item--private:hover .fbz-event-date{
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.24);
  }
  .fbz-events-section .fbz-event-item--private:hover .fbz-event-title h3{
    color: rgba(239, 68, 68, 0.96);
  }
  .fbz-events-section .fbz-event-item--private:hover .fbz-event-day{
    color: rgba(239, 68, 68, 0.96);
  }
  /* Private event countdown overlay: red */
  .fbz-events-section .fbz-event-item--private .fbz-event-countdown{
    background: linear-gradient(180deg, rgba(239,68,68,0.93) 0%, rgba(185,28,28,0.97) 100%);
  }
}

/* Private day number: red */
.fbz-events-section .fbz-event-item--private .fbz-event-day{
  color: rgba(239, 68, 68, 0.95);
}

/* ==========================================================================
   9) ARCHIVE PAGE OVERRIDES (kept from your v14.x intent)
   ========================================================================== */

body.post-type-archive-event .fbz-events-section{
  padding: 60px 0;
  background: linear-gradient(180deg, #191d31 0%, #3b4574 100%);
}

body.post-type-archive-event .fbz-events-list{
  max-width: 100%;
  padding: 0 60px;
}

body.post-type-archive-event .fbz-events-head{
  display:none;
}

body.post-type-archive-event .fbz-events-past{
  background: transparent;
  margin-top: 0;
  padding-top: 60px;
}

@media (max-width: 1024px){
  body.post-type-archive-event .fbz-events-list{
    padding: 0 40px;
  }
}

@media (max-width: 768px){
  body.post-type-archive-event .fbz-events-list{
    padding: 0 24px;
  }
  .fbz-past-events-grid{
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
  .fbz-past-event-info{
    padding: 16px;
  }
}

/* ==========================================================================
   10) SOCIAL SIDEBAR & FOOTER LOGOS SAFEGUARD (v19.2.5)
   Insurance rule: ensure the fixed social sidebar is always rendered above
   any stacking contexts created by the events section (backdrop-filter, etc.)
   This is additive-only and has no side-effects on any other section.
   ========================================================================== */

/* Sidebar: explicit z-index guard */
@media (min-width: 1024px) {
  #social-sidebar {
    z-index: 950; /* Raised slightly above events overlay (z-index:10) and actions (z-index:15) */
  }
}

/* Footer social icons: ensure SVGs inherit color and are always visible */
.footer-social-icon svg,
.footer-social-icon img {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  pointer-events: none;
}

/* ==========================================================================
   11) v19.4.1 — Fine-tune fixes
   ========================================================================== */

/* Stream day number: teal (consistent with stream accent throughout the card) */
.fbz-events-section .fbz-event-item--stream .fbz-event-day{
  color: rgba(6, 182, 212, 0.95);
}

/* Button icon→label gap (countdown overlay + mobile stream CTA) */
.fbz-events-section .fbz-event-countdown-btn svg,
.fbz-events-section .fbz-event-stream-cta svg{
  flex-shrink: 0;
  margin-right: 6px;
}

/* Eyebrow & heading: zero text-shadow / glow */
.sec-tag,
.fbz-events-head .sec-title,
.fbz-events-head .sec-title span{
  text-shadow: none;
  filter: none;
}

/* ==========================================================================
   12) v19.5 — SECTION HEADER POLISH
   sec-title / sec-tag / sec-desc desde style.css manejan todo lo base.
   Aquí solo overrides específicos de Events.
   ========================================================================== */

@media (max-width: 768px){
  .fbz-events-head{
    margin-bottom: 32px;
  }
}

/* Kill text-shadow en header — alta especificidad */
.fbz-events-section .fbz-events-head .sec-tag,
.fbz-events-section .fbz-events-head .sec-title,
.fbz-events-section .fbz-events-head .sec-title span,
.fbz-events-section .fbz-events-head .sec-desc{
  text-shadow: none !important;
  filter: none !important;
}

/* Prevent fbz-reveal clip-path paint artifacts */
.fbz-events-section .fbz-events-head .fbz-reveal{
  will-change: auto;
}

/* ==========================================================================
   13) v19.4.3 — MOBILE ACTIVE STATE (tap feedback without hiding buttons)
   When user taps a card on mobile:
   - Date block gets a subtle accent-colored tint
   - Event title changes to accent color
   - Buttons ALWAYS remain visible
   ========================================================================== */

/* Guard: on pointer:coarse (touch) devices, ensure actions never hide */
@media (pointer:coarse){
  .fbz-events-section .fbz-event-item .fbz-event-actions{
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .fbz-events-section .fbz-event-countdown{
    display: none !important;
    opacity: 0 !important;
  }
}

/* ── Active / tap state for LIVE events (yellow) ── */
@media (pointer:coarse){
  .fbz-events-section .fbz-event-item:active .fbz-event-date{
    background: rgba(253, 235, 25, 0.10);
    border-color: rgba(253, 235, 25, 0.30);
    transition: background 0.12s ease, border-color 0.12s ease;
  }
  .fbz-events-section .fbz-event-item:active .fbz-event-title h3{
    color: rgba(253, 235, 25, 0.96);
    transition: color 0.12s ease;
  }

  /* ── Active state: STREAM events → teal ── */
  .fbz-events-section .fbz-event-item--stream:active .fbz-event-date{
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.30);
  }
  .fbz-events-section .fbz-event-item--stream:active .fbz-event-title h3{
    color: rgba(6, 182, 212, 0.96);
  }

  /* ── Active state: PRIVATE events → red ── */
  .fbz-events-section .fbz-event-item--private:active .fbz-event-date{
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.30);
  }
  .fbz-events-section .fbz-event-item--private:active .fbz-event-title h3{
    color: rgba(239, 68, 68, 0.96);
  }
}