/*
 * ═══════════════════════════════════════════════════════════════════════════
 * EVENTS PORTAL - PUBLIC EVENT PAGES
 * events.css · LOAD ON: home (landing), events/index (discover) and
 * events/show (event details) - the three attendee-facing pages that
 * revolve around browsing and reading about events.
 * ───────────────────────────────────────────────────────────────────────────
 * This file defines NO colors, radii, shadows or fonts of its own - every
 * value below is a var() reference into the shared tokens already defined
 * in styles.css (:root). That file must be loaded first. navbar.css loads
 * alongside it as usual for the shared header.
 *
 *    1. Shared layout & type (.events-container, .events-section, kickers)
 *    2. Home hero (search, quick filters, stats)
 *    3. Discover hero + floating filter card
 *    4. Event detail hero (poster, badges, meta, actions)
 *    5. Event card - ONE component reused on home, discover and both the
 *       "related events" and detail-page usage
 *    6. Why Events Portal (home feature section)
 *    7. CTA band - reused for the home/discover closing CTA and the
 *       "Ask a Question" prompt on the detail page
 *    8. Empty state + pagination
 *    9. Event detail - section tabs, content blocks, panelists/organizer,
 *       schedule/timeline, sidebar, share, map
 * ═══════════════════════════════════════════════════════════════════════════
 */

@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════
   1. SHARED LAYOUT & TYPE
   ═══════════════════════════════════════════════════════════════ */
.events-container {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 24px;
}

.events-section {
  padding: 72px 0;
}

/* Drops the top padding when a section immediately follows another one
   that already carries its own bottom spacing (e.g. results grid right
   under the filter bar). */
.events-section-flush-top {
  padding-top: 0;
}

.events-section-soft {
  background: var(--surface-1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.events-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--brand-deeper);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.events-kicker::after {
  content: "";
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand), transparent);
}

/* Brighter accent color for a kicker sitting on a light card background
   (e.g. the "Organizing an Event?" CTA), instead of the deeper default
   tone used on the darker hero/section backgrounds. */
.events-kicker-brand {
  color: var(--brand);
}

/* Numbered section index (01, 02, 03...) on the event detail page's
   .events-block sections - styled as a small embossed seal rather than
   a flat tag, so the "formal report" numbering reads as a deliberate
   document convention (think programme booklet) instead of a UI badge. */


.events-section-heading {
  max-width: 1020px;
  margin-bottom: 40px;
}

.events-section-heading h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.3vw, 2.65rem);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.02em;
  color: var(--text-head);
}

.events-section-heading p {
  max-width: 860px;
  margin: 14px 0 0;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.8;
}

.events-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

/* Stat trio - the animated counters baked into the home hero
   (Events Listed / Categories / Cities Covered). The discover page's own
   copy of this strip now uses the .form-mini-card shell instead - see
   .events-stat-card-value below - so this pair is home-hero only. */
.events-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.events-stat {
  padding: 18px;
  border: 1px solid var(--border);
  /* --r-xl + solid --surface, matching .events-filter-card and
     .web-top-card - the translucent white + smaller radius this used to
     carry was left over from when this card only ever sat on top of a
     dark hero image; it now also sits in plain light sections (home,
     events index) next to those other cards, so it should look like
     them. */
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.events-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 700;
  color: var(--text-head);
}

.events-stat span {
  display: block;
  margin-top: 7px;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 600;
}

/* Discover-page counter cards - same .form-mini-card shell as the
   "After You Register" cards (form.css), just with the count standing in
   for the card's h4. Only the number needs to read bigger/bolder than a
   normal mini-card title; everything else (icon badge, padding, radius,
   shadow, hover lift) comes free from .form-mini-card/.portal-summary-card. */


/* Quick-filter chips - used in the home hero's search form and in the
   discover page's floating filter card. */
.events-quick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.events-quick-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: .76rem;
  font-weight: 600;
  text-decoration: none;
}

.events-quick-filter:hover,
.events-quick-filter.is-active {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-deeper);
}

.events-quick-filter.is-clear {
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   2. HOME HERO
   ───────────────────────────────────────────────────────────────
   Unlike every other public page, the home hero does NOT use the
   shared dark .web-panel-hero treatment - it's a light, two-column
   hero (copy + CTAs on the left, a photo collage on the right) with
   the search bar and stat row spanning full width beneath it.
   ═══════════════════════════════════════════════════════════════ */
.events-home-hero {
  position: relative;
  overflow: hidden;
  padding: 152px 0 64px;
  background: var(--surface-1);
}

.events-home-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.events-home-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .14;
}

.events-home-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(248, 250, 252, .97) 0%, rgba(248, 250, 252, .92) 45%, rgba(248, 250, 252, .8) 100%);
}

.events-home-hero>.events-container {
  position: relative;
  z-index: 2;
}

.events-home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 52px;
  align-items: center;
}

.events-home-hero-copy .web-hero-badge {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-deeper);
  backdrop-filter: none;
}

.events-home-hero-copy h1 {
  margin: 0 0 16px;
  color: var(--text-head);
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.3vw, 2.85rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.02em;
}

.events-home-hero-copy>p {
  max-width: 560px;
  margin: 0;
  color: var(--text-muted);
  font-size: .98rem;
  line-height: 1.75;
}

.events-hero-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
}

.events-hero-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-head);
  font-size: .865rem;
  font-weight: 600;
}

.events-hero-checklist li i {
  flex-shrink: 0;
  color: var(--brand-deeper);
  font-size: 1.05rem;
}

.events-home-hero-gallery {
  position: relative;
  height: 400px;
}

.events-home-hero-photo {
  position: absolute;
  border-radius: var(--r-xl);
  border: 4px solid var(--n-0);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
}

.events-home-hero-photo-1 {
  top: 0;
  left: 0;
  width: 64%;
  height: 56%;
  z-index: 1;
}

.events-home-hero-photo-2 {
  top: 6%;
  right: 0;
  width: 52%;
  height: 44%;
  z-index: 2;
}

.events-home-hero-photo-3 {
  bottom: 0;
  left: 16%;
  width: 56%;
  height: 42%;
  z-index: 3;
}

/* Search bar */
.events-search-bar {
  padding: 22px;
  margin-top: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-lg);
}

.events-search-bar .form-label {
  color: var(--text-head);
  font-size: .78rem;
  font-weight: 700;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.events-home-hero .events-stats-row {
  max-width: 700px;
  margin-top: 34px;
}

/* ═══════════════════════════════════════════════════════════════
   3. DISCOVER HERO + FLOATING FILTER
   ═══════════════════════════════════════════════════════════════
   The discover hero itself is NOT a bespoke component - it is the
   same .page-title.web-hero.web-panel-hero + .web-hero-badge +
   .breadcrumbs used on every other public page (About, Contact,
   Pricing, Sponsors, Register...) with nothing baked in beyond that.
   The stat row it used to carry now sits below it as its own strip
   (.events-index-stats), reusing the .events-stat/.events-stats-row
   component from section 1. The floating filter card follows in
   normal flow underneath. */

.events-index-stats {
  padding: 40px 0 22px;
}

.events-filter-shell {
  position: relative;
  z-index: 10;
}

.events-filter-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.events-filter-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.events-filter-head small {
  display: block;
  margin-bottom: 4px;
  color: var(--brand-deeper);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.events-filter-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-head);
}

.events-filter-head span {
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
}

.events-filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(170px, .8fr) minmax(170px, .8fr) auto;
  gap: 14px;
  align-items: end;
}

.events-filter-button {
  min-width: 150px;
  width: 100%;
}

/* Page intro band (used above the results grid on discover) - just
   section spacing now, the heading itself is the shared
   .form-section-title-row > .section-title.form-section-title
   component (see styles.css / form.css) so it matches every admin
   listing page and the home page's "Upcoming Events" heading. */
.events-page-intro {
  padding: 46px 0 26px;
}





/* ═══════════════════════════════════════════════════════════════
   4. EVENT DETAIL HERO
   ═══════════════════════════════════════════════════════════════
   Same .page-title.web-hero.web-panel-hero used on every other
   public page (About, Contact, Pricing...) - centered, 860px
   container, dark gradient over a background-image (the event
   poster, same as .web-panel-hero's own background-size/position
   already support). .events-detail-hero is now only a small marker
   for the breadcrumb/back-button row that sits ABOVE the badge+h1
   instead of below the intro paragraph like the default pattern. */






/* Faint brand glow bleeding out from behind the poster, echoing the
   ::after glow every .web-panel-hero already carries - same source
   color (--brand), just anchored to the poster instead of the corner. */




/* Corner ribbon on the poster, flagging registration state at a glance -
   a certificate/programme-cover convention that gives the hero a more
   "official" feel than a plain badge would. Colour follows the same
   green/amber/red semantics already used for .status-success/-warning/
   -danger elsewhere, just applied to a banner instead of a pill. */










/* Optional tagline/theme, sitting between the title and the
   description summary - brand-colored so it reads as a short accent
   line rather than more body copy. */




.events-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin-top: 22px;
}

.events-meta-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 72px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base);
}

.events-meta-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.events-meta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-deeper);
  font-size: .9rem;
}

.events-meta-copy small {
  display: block;
  margin-bottom: 3px;
  color: var(--text-muted);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.events-meta-copy strong {
  display: block;
  color: var(--text-head);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.45;
}

.events-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

/* ═══════════════════════════════════════════════════════════════
   5. EVENT CARD — one component, three uses (home top picks, discover
      grid, related events on the detail page)
   ═══════════════════════════════════════════════════════════════ */
/* Same white-surface / rounded / soft-shadow language as the
   .form-mini-card "After You Register" cards (form.css) - r-2xl radius,
   a shadow visible at rest (not only on hover), so this card reads as
   the same component family as the rest of the app. */
.events-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.events-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-md);
  box-shadow: var(--shadow-md);
}

.events-card-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, var(--brand-soft), transparent 55%),
    linear-gradient(180deg, var(--surface-1) 0%, var(--n-150) 100%);
  border-bottom: 1px solid var(--border);
}

.events-card-image img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: contain;
  object-position: center;
  transition: transform .3s ease;
}

.events-card:hover .events-card-image img {
  transform: scale(1.015);
}

.events-card-tags {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.events-card-featured {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--text-head);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .03em;
}

.events-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
}

.events-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-head);
}

.events-card-desc {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1.7;
}

/* Boxed detail rows (Date / Time / Venue / Contact) - each its own
   bordered row rather than a bare icon+text line, so the card reads as
   a small info panel instead of a plain meta list. Same icon-badge
   language as .form-mini-card-icon (form.css) - a light brand-tinted
   square instead of a bare glyph. */
.events-card-detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}

.events-card-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-1);
}

.events-card-detail-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-deeper);
  font-size: .88rem;
}

.events-card-detail-body {
  flex: 1 1 auto;
  min-width: 0;
}

.events-card-detail-label {
  display: block;
  margin-bottom: 3px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.events-card-detail-value {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-head);
  line-height: 1.4;
  word-break: break-word;
}

.events-card-detail-extra {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* Free Entry / price / capacity chips - reuses .events-chip as-is
   (already defined above for the detail-page hero), just wrapped in its
   own row so it sits correctly inside the card's flow. */
.events-card-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

/* Organizer website/social icons - same .portal-social-icons/-icon-btn
   component as the admin organizer profile (form.css), just smaller so
   it fits a card instead of a full-width profile page. */
.events-card-social {
  margin-top: 14px;
}

.events-card-social .portal-social-icon-btn {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  font-size: .85rem;
}

.events-card-footer {
  margin-top: auto;
  padding-top: 16px;
}

/* .events-card-cta now shares the canonical .btn-primary treatment —
   see styles.css, section 6 (BUTTONS) — so every primary CTA across the
   app (hero search, "View Event", card CTA) looks and behaves the same. */

.events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* ═══════════════════════════════════════════════════════════════
   6. WHY EVENTS PORTAL (home feature section)
   ═══════════════════════════════════════════════════════════════ */
.events-why-layout {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
  gap: 30px;
  align-items: stretch;
  margin-top: 30px;
}

.events-why-feature-card {
  position: relative;
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: linear-gradient(160deg, var(--text-head) 0%, #16233b 100%);
  box-shadow: var(--shadow-md);
  color: #fff;
}

.events-why-feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(80, 197, 255, .18);
  color: var(--brand);
  font-size: .7rem;
  font-weight: 800;
}

.events-why-feature-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

.events-why-feature-card p {
  margin: 12px 0 0;
  color: #c6d2e0;
  font-size: .88rem;
  line-height: 1.75;
}

.events-why-feature-visual {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.events-why-visual-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--brand);
  font-size: 1.1rem;
}

.events-why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.events-why-card {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: all var(--t-base);
}

.events-why-card:hover {
  border-color: var(--border-md);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.events-why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 12px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  color: var(--brand-deeper);
  font-size: 1.05rem;
}

.events-why-card h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-head);
}

.events-why-card p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1.65;
}

/* ═══════════════════════════════════════════════════════════════
   7. CTA BAND — closing CTA (home/discover) and the in-page
      "Ask a Question" prompt on the detail page
   ═══════════════════════════════════════════════════════════════ */
.events-cta-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding: 40px;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(circle at 88% 18%, rgba(80, 197, 255, .16), transparent 28%),
    var(--text-head);
  box-shadow: var(--shadow-md);
}

/* Faint oversized glyph bleeding off the corner - the same "premium
   watermark" treatment print programmes use on a closing page, kept
   subtle enough not to compete with the copy or buttons. */


.events-cta-copy {
  max-width: 720px;
}

.events-cta-copy h3,
.events-cta-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.3;
  font-weight: 700;
  color: #fff;
}

.events-cta-copy p {
  margin: 12px 0 0;
  color: var(--n-300);
  font-size: .88rem;
  line-height: 1.8;
}

.events-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   8. EMPTY STATE + PAGINATION
   ═══════════════════════════════════════════════════════════════ */
.events-empty {
  padding: 56px 26px;
  border: 1px dashed var(--border-md);
  border-radius: var(--r-lg);
  text-align: center;
  background: var(--surface);
}

.events-empty i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  border-radius: var(--r-lg);
  background: var(--brand-50);
  color: var(--brand-deeper);
  font-size: 1.3rem;
}

.events-empty h3,
.events-empty h6 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-head);
}

.events-empty p {
  margin: 8px 0 18px;
  color: var(--text-muted);
  font-size: .85rem;
}

.events-pagination {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: 34px;
}

.events-pagination nav {
  margin-left: auto;
}

.events-pagination .pagination {
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
}

.events-pagination .page-link {
  min-width: 42px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md) !important;
  background: var(--surface);
  color: var(--text);
  font-size: .8rem;
  font-weight: 700;
  box-shadow: none !important;
}

.events-pagination .page-link:hover {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-deeper);
}

.events-pagination .page-item.active .page-link {
  background: var(--brand-deeper);
  border-color: var(--brand-deeper);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   9. EVENT DETAIL — tabs, content blocks, panelists/organizer,
      schedule, sidebar, share, map
   ═══════════════════════════════════════════════════════════════ */
/* Sticks right below the sticky site header (.dc-command-header is
   82px tall, 74px under the 767.98px breakpoint - see navbar.css) so
   it never gets hidden underneath it. */
.events-tabs {
  position: sticky;
  top: 82px;
  z-index: 60;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}

.events-tabs-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 60px;
  overflow-x: auto;
  scrollbar-width: none;
}

.events-tabs-inner::-webkit-scrollbar {
  display: none;
}

.events-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 13px;
  border-radius: var(--r-md);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--t-base);
}

.events-tab:hover,
.events-tab.is-active {
  background: var(--brand-50);
  color: var(--brand-deeper);
}

.events-content-section {
  padding-top: 44px;
}





/* Sits below both the sticky site header (82px) and the sticky
   section tabs directly above it (60px min-height + 1px borders) so
   it never scrolls in underneath either. */


.events-block {
  position: relative;
  overflow: hidden;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  /* Same resting depth every other card on the page carries
     (.events-side-card, .form-mini-card, .web-top-card...) - this
     section previously sat flat next to a sidebar full of shadowed
     cards, which read as unfinished. */
  box-shadow: var(--shadow-sm);
}

.events-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), transparent 70%);
}

.events-block + .events-block {
  margin-top: 20px;
}









/* Drop cap on the opening line of the description - a small letterhead/
   programme-note convention that signals "read this formally" without
   requiring a different typeface (none of the loaded fonts carry a serif
   companion, so the emphasis comes from scale + colour instead). */


/* Panelists */
.events-people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.events-person-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: all var(--t-base);
}

.events-person-card:hover {
  border-color: var(--border-md);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.events-person-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: var(--r-lg);
  background: var(--brand-50);
  color: var(--brand-deeper);
  font-size: .95rem;
  font-weight: 700;
}

.events-person-name {
  display: block;
  color: var(--text-head);
  font-size: .86rem;
  font-weight: 700;
}

.events-person-title {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: .74rem;
  line-height: 1.5;
}

/* Organizer - framed like a letterhead: a brand rule down the left edge
   of the whole card, echoing the top accent line every .events-block
   already carries, so the organizer reads as the section's "signature"
   block rather than a plain profile row. */
.events-organizer-card {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 18px 18px 18px 22px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--surface-1);
}

.events-organizer-logo-shell {
  position: relative;
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
}

.events-organizer-logo {
  width: 96px;
  height: 96px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: 8px;
  box-shadow: var(--shadow-xs);
}

/* Verified seal - overlaps the logo's bottom-right corner like an
   authentication stamp, instead of competing with the name/badge row
   as another inline pill. */
.events-organizer-seal {
  position: absolute;
  bottom: -6px;
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  font-size: .8rem;
  box-shadow: 0 0 0 3px var(--surface-1);
}

.events-organizer-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.events-organizer-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-head);
}

.events-organizer-desc {
  margin: 9px 0 0;
  color: var(--text-muted);
  font-size: .86rem;
  line-height: 1.75;
}

.events-organizer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.events-small-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--t-base);
}

.events-small-action:hover {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-deeper);
}

.events-social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: all var(--t-base);
}

.events-social-btn:hover {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-deeper);
}

/* Schedule / timeline - numbered as a formal running order (counters
   span both columns in source order, so "No. 01" always lands on the
   first session regardless of how the two-column split falls). */
.events-schedule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  counter-reset: events-agenda;
}

.events-schedule-column {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  padding-left: 22px;
  border-left: 2px solid var(--border);
}

.events-schedule-item {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 13px 40px 13px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: all var(--t-base);
  counter-increment: events-agenda;
}

/* "No. 01" running-order tag, top-right of each session - the agenda
   equivalent of the .events-block-index seal used for the page's main
   sections, scaled down to sit inline with a single card. */
.events-schedule-item::after {
  content: "No. " counter(events-agenda, decimal-leading-zero);
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--text-muted);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
}

/* Timeline dot, sitting on top of .events-schedule-column's rail */
.events-schedule-item::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -28px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-50);
}

.events-schedule-item:hover {
  border-color: var(--border-md);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.events-schedule-time {
  color: var(--brand-deeper);
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.45;
}

.events-schedule-time span {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: .65rem;
  font-weight: 600;
}

.events-schedule-date {
  display: block;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.events-schedule-content strong {
  display: block;
  color: var(--text-head);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.5;
}

.events-moderator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  color: var(--brand-deeper);
  font-size: .68rem;
  font-weight: 700;
}

/* Sidebar cards */
.events-side-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.events-side-card + .events-side-card {
  margin-top: 16px;
}

/* The "at a glance" card carries the primary register/ask actions, so
   it gets a light brand wash to read as the sidebar's lead card - same
   brand-50/brand-200 tokens used for hover states everywhere else. */
.events-side-card--primary {
  border-color: var(--brand-200);
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 140px);
}

.events-side-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-head);
}

.events-side-list {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.events-side-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.events-side-item i {
  color: var(--brand-deeper);
  margin-top: 2px;
}

.events-side-item small {
  display: block;
  color: var(--text-muted);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.events-side-item strong {
  display: block;
  margin-top: 2px;
  color: var(--text-head);
  font-size: .76rem;
  line-height: 1.5;
  font-weight: 700;
}

.events-side-actions {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

/* Ticket-stub perforation between the event details and the register/
   ask actions on the primary sidebar card - a small nod to a physical
   event pass rather than a generic dashed <hr>. The two notches are
   filled with the page background (--bg) so they read as punched
   holes cut through the card's edge. */
.events-ticket-divider {
  position: relative;
  height: 0;
  margin: 18px -20px;
  border-top: 2px dashed var(--border-md);
}

.events-ticket-divider::before,
.events-ticket-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  transform: translateY(-50%);
}

.events-ticket-divider::before {
  left: -8px;
}

.events-ticket-divider::after {
  right: -8px;
}

.events-side-actions .btn-primary,
.events-side-actions .btn-secondary {
  width: 100%;
}

/* Registration state pill (closed / full) */
.events-registration-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  font-size: .8rem;
  font-weight: 700;
  background: var(--red-50);
  color: var(--red-dark);
  border: 1px solid rgba(239, 68, 68, .25);
}

/* "Full" isn't the same story as "Closed" - it means the event is
   healthy and popular, not unavailable - so it borrows the amber
   warning tokens instead of red. */
.events-registration-state.is-full {
  background: var(--amber-50);
  color: var(--amber-dark);
  border-color: rgba(245, 158, 11, .25);
}

/* Share */
.events-share-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.events-share-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--t-base);
}

.events-share-action:hover {
  background: var(--brand-50);
  border-color: var(--brand-200);
  color: var(--brand-deeper);
}

/* Map card */
.events-map-card {
  padding: 18px;
}









.events-map-frame {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--n-150);
}

.events-map-frame iframe {
  display: block;
  width: 100%;
  height: 330px;
  border: 0;
}

.events-map-place {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
}

.events-map-place i {
  color: var(--brand-deeper);
  margin-top: 2px;
}

.events-map-place strong {
  display: block;
  color: var(--text-head);
  font-size: .78rem;
  font-weight: 700;
}

.events-map-place span {
  display: block;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: .7rem;
  line-height: 1.55;
}

.events-map-actions {
  margin-top: 12px;
}

.events-map-actions .btn-secondary {
  width: 100%;
}

/* Related events section */
.events-related-section {
  background: var(--surface-1);
  border-top: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════
   10. EVENT DETAIL v2 — quick-stat row, main info card, chips,
       section-card icon head (Schedule/Map/Organizer/Panelists/
       Guidelines/FAQ), guideline & FAQ lists.
   ───────────────────────────────────────────────────────────────
   This composes the page with Bootstrap's row/col grid (already
   loaded on every public page) inside the usual .events-container,
   so it keeps the same page width as the rest of the site without
   a bespoke CSS grid. Most sub-pieces reuse existing components
   (.events-block shell, .events-meta-grid, .events-actions,
   .events-organizer-card, .events-person-card, .events-map-card,
   .events-side-card/.events-ticket-divider) — only the pieces with
   no earlier equivalent get new classes here.
   ═══════════════════════════════════════════════════════════════ */

/* Quick-stat row */
.events-quickstat-card {
  height: 100%;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: all var(--t-base);
}

.events-quickstat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-md);
}

.events-quickstat-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.events-quickstat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-deeper);
  font-size: 1rem;
}

.events-quickstat-label {
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.events-quickstat-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-head);
}

.events-quickstat-card p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.6;
}

/* Main info card */
.events-main-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.events-main-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, var(--brand-soft), transparent 55%),
    linear-gradient(180deg, var(--surface-1) 0%, var(--n-150) 100%);
  border-bottom: 1px solid var(--border);
}

.events-main-image {
  width: 100%;
  height: 100%;
  max-height: 380px;
  object-fit: contain;
  object-position: center;
}

.events-main-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 0;
  color: var(--text-muted);
}

.events-main-placeholder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-lg);
  background: var(--brand-50);
  color: var(--brand-deeper);
  font-size: 1.4rem;
}

.events-main-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.events-main-body {
  padding: 26px;
}

.events-main-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.events-main-heading h3 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-head);
}

.events-main-theme {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  color: var(--brand-deeper);
  font-size: .86rem;
  font-weight: 700;
}

.events-mini-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-deeper);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.events-main-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.events-copy-block h4 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-head);
}

.events-copy-block p {
  margin: 0;
  color: var(--text);
  font-size: .9rem;
  line-height: 1.85;
}

/* Chips */
.events-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.events-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-1);
  color: var(--text);
  font-size: .76rem;
  font-weight: 600;
}

.events-chip i {
  color: var(--brand-deeper);
}

/* Section-card head — an icon-box variant of .events-block-head, used
   by the Schedule/Map/Organizer/Panelists/Guidelines/FAQ cards below
   the main row. Combine with .events-block for the shared shell
   (top accent line, shadow, radius, padding). */
.events-section-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.events-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--r-md);
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  color: var(--brand-deeper);
  font-size: 1.1rem;
}

.events-section-head h3 {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-head);
}

.events-section-head p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: .8rem;
  line-height: 1.6;
}

/* Single-column modifier for .events-schedule-grid, used now that the
   timeline sits in a narrower col-lg-7 next to the map instead of
   spanning the full main column. */
.events-schedule-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}

/* Guidelines */
.events-guideline-list {
  display: grid;
  gap: 12px;
}

.events-guideline-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: .85rem;
  line-height: 1.65;
}

.events-guideline-item i {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--green-dark);
}

/* FAQ */
.events-faq-list {
  display: grid;
  gap: 16px;
}

.events-faq-item {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.events-faq-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.events-faq-item h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-head);
}

.events-faq-item p {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.75;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1199.98px) {
  

  .events-filter-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }

  .events-filter-button-wrap {
    grid-column: 1 / -1;
  }

  

  .events-home-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    gap: 36px;
  }

  .events-home-hero-gallery {
    height: 340px;
  }
}

@media (max-width: 991.98px) {
  .events-section {
    padding: 60px 0;
  }

  .events-home-hero {
    padding: 128px 0 56px;
  }

  .events-home-hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .events-home-hero-gallery {
    height: 320px;
    max-width: 460px;
  }

  .events-why-layout,
  .events-filter-grid {
    grid-template-columns: 1fr 1fr;
  }

  .events-why-layout {
    grid-template-columns: 1fr;
  }

  .events-filter-search,
  .events-filter-button-wrap {
    grid-column: 1 / -1;
  }

  .events-grid,
  .events-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .events-cta-card {
    flex-direction: column;
    align-items: flex-start;
  }

  

  

  
}

@media (max-width: 767.98px) {
  .events-container {
    padding: 0 18px;
  }

  /* .dc-command-header drops to 74px tall at this breakpoint. */
  .events-tabs {
    top: 74px;
  }

  .events-section {
    padding: 50px 0;
  }

  .events-home-hero {
    padding: 104px 0 44px;
  }

  .events-home-hero-gallery {
    height: 240px;
    max-width: 340px;
  }

  .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-dark,
  .hero-cta-row .btn-secondary {
    width: 100%;
  }

  .events-stats-row {
    grid-template-columns: 1fr;
  }

  .events-index-stats {
    padding: 32px 0 12px;
  }

  .events-filter-card {
    padding: 20px;
  }

  .events-filter-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .events-filter-grid {
    grid-template-columns: 1fr;
  }

  .events-filter-search,
  .events-filter-button-wrap {
    grid-column: auto;
  }

  .events-section-head{
    align-items: flex-start;
    flex-direction: column;
  }

  .events-grid,
  .events-why-grid,
  .events-people-grid,
  .events-schedule-grid {
    grid-template-columns: 1fr;
  }

  .events-card-image {
    min-height: 300px;
  }

  

  

  .events-organizer-card {
    grid-template-columns: 1fr;
  }

  .events-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .events-actions .btn-primary,
  .events-actions .btn-secondary,
  .events-actions .events-registration-state {
    width: 100%;
  }

  .events-cta-card {
    padding: 24px;
  }

  .events-cta-actions .btn-primary,
  .events-cta-actions .btn-secondary {
    width: 100%;
  }

  .events-main-media {
    min-height: 220px;
    padding: 12px;
  }

  .events-main-body {
    padding: 20px;
  }

  .events-main-actions {
    width: 100%;
  }

  .events-main-actions .btn-secondary{
    flex: 1 1 auto;
  }

  .events-section-head {
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {
  .events-share-grid {
    grid-template-columns: 1fr;
  }

  .events-map-frame iframe {
    height: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .events-card,
  .events-card-image img,
  .events-why-card,
  .events-person-card,
  .events-schedule-item {
    transition-duration: .01ms !important;
  }
}