/**
 * ERMS Public Events - Layout Fix
 * Wraps default Drupal Views structure with our custom layout
 *
 * Layout: 3-column design
 * - Left: Filter sidebar (fixed)
 * - Center: Event grid (responsive 1-3 columns)
 * - Right: Calendar sidebar (fixed, visible ≥1280px)
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */
:root {
  --color-primary: #1a4d8f;
  --color-primary-light: rgba(26, 77, 143, 0.1);
  --color-accent: #4a90e2;
  --color-bg: #f5f7fa;
  --color-bg-alt: #ffffff;
  --color-border: #e2e8f0;
  --color-text: #1a1a1a;
  --color-text-muted: #64748b;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-hover: 0 12px 32px rgba(26, 77, 143, 0.15);
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* ==========================================================================
   Main Container
   ========================================================================== */
.view-public-event-list {
  min-height: 100vh;
  background-color: transparent !important; /* No background on container */
  padding: var(--spacing-xl) 0 !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* Reset max-width for child elements */
.view-public-event-list .view-filters,
.view-public-event-list .view-content,
#events-calendar-sidebar {
  max-width: none !important;
}

/* ==========================================================================
   Left Sidebar - Filters
   ========================================================================== */
.view-public-event-list .view-filters {
  position: fixed !important;
  left: max(1rem, calc((100vw - 1400px) / 2)) !important;
  /* Dynamic position using CSS variable, updated by JavaScript */
  /* Default 260px - safely below header+toolbar to prevent overlap flash */
  top: var(--filter-top, 260px) !important;
  width: 280px !important;
  /* Dynamic max-height based on filter position */
  max-height: calc(100vh - var(--filter-top, 260px) - 20px) !important;
  overflow-y: auto !important;
  background: var(--color-bg-alt) !important;
  border-radius: var(--radius-xl) !important;
  padding: var(--spacing-xl) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--color-border) !important;
  z-index: 10 !important;
  /* No transition on top/max-height to prevent overlap during scroll */
}

/* Custom scrollbar for filters */
.view-public-event-list .view-filters::-webkit-scrollbar {
  width: 6px;
}

.view-public-event-list .view-filters::-webkit-scrollbar-track {
  background: transparent;
}

.view-public-event-list .view-filters::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.view-public-event-list .view-filters::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ==========================================================================
   Main Content - Event Grid
   ========================================================================== */
.view-public-event-list .view-content {
  /* Fixed: Filter width 280px + gap = 320px */
  margin-left: 320px !important;
  margin-right: 1rem !important;
  padding: var(--spacing-lg) !important;
  display: grid !important;
  /* Use smaller min-width to allow more columns */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: var(--spacing-lg) !important;
  align-items: start !important;
  /* Background on view-content instead of container */
  background-color: var(--color-bg) !important;
  border-radius: var(--radius-lg) !important;
}

/* ==========================================================================
   Page Header and Title - Positioned to the right of filter
   ========================================================================== */
.view-public-event-list > .view-header,
.view-public-event-list > h1,
.view-public-event-list > h2,
.view-public-event-list .view-title,
.view-public-event-list .events-page-header {
  margin-left: 320px !important;
  margin-right: 1rem !important;
  margin-top: 0 !important;
}

/* ==========================================================================
   Parent Container - Region Content Wrapper
   ========================================================================== */
/* Remove fixed-width constraint from parent containers when they contain the events view */
/* Using :has() for modern browsers */
.region-content:has(.view-public-event-list),
.region.region-content:has(.view-public-event-list),
.fixed-width:has(.view-public-event-list) {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Fallback: JS adds .has-events-view class for browsers without :has() support */
.region-content.has-events-view,
.region.region-content.has-events-view,
.fixed-width.has-events-view {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* The view itself handles all positioning */
.view-public-event-list {
  position: relative !important;
}

/* ==========================================================================
   Hide List/Grid View Toggle Buttons
   ========================================================================== */
.view-public-event-list .view-toggle,
.view-public-event-list .events-page-header .view-toggle {
  display: none !important;
}

/* ==========================================================================
   Event Cards - New Structure: Title -> Image -> Event Date -> Reg Date -> Description -> Org -> Ticket Type
   ========================================================================== */
.view-public-event-list .views-row {
  position: relative !important;
  width: 100% !important;
  height: auto !important; /* Auto height to fit content */
  min-height: auto !important;  /* No min-height - let content determine size */
  max-height: none !important;
  background: linear-gradient(to bottom, #ffffff, #fafbfc) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--transition-fast) !important;
  cursor: pointer !important;
  border: 1px solid rgba(26, 77, 143, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  /* Animation for entrance */
  animation: fadeInUp 0.5s ease-out !important;
  animation-fill-mode: both !important;
}

/* Flex order for card elements - Image -> Title -> Date -> Description -> Org */
.view-public-event-list .views-row figure,
.view-public-event-list .views-row [role="group"],
.view-public-event-list .views-row .field--name-field-cover-image-thumbnail {
  order: 1 !important;
}

/* Title below Image, above Date */
.view-public-event-list .views-row h3,
.view-public-event-list .views-row .event-title {
  order: 2 !important;
}

/* Date rows below Title */
.view-public-event-list .views-row .event-date-row {
  order: 3 !important;
}

.view-public-event-list .views-row .reg-date-row {
  order: 4 !important;
}

.view-public-event-list .views-row .event-venue-row {
  order: 5 !important;
}

/* Description below venue */
.view-public-event-list .views-row p,
.view-public-event-list .views-row .views-field-body,
.view-public-event-list .views-row .views-field-field-description {
  order: 6 !important;
}

/* Organization link */
.view-public-event-list .views-row a[href*="taxonomy"],
.view-public-event-list .views-row .views-field-field-allowed-department {
  order: 7 !important;
}

.view-public-event-list .views-row .event-type-badge {
  order: 7 !important;
}

/* Staggered entrance delays */
.view-public-event-list .views-row:nth-child(1) { animation-delay: 0.05s !important; }
.view-public-event-list .views-row:nth-child(2) { animation-delay: 0.1s !important; }
.view-public-event-list .views-row:nth-child(3) { animation-delay: 0.15s !important; }
.view-public-event-list .views-row:nth-child(4) { animation-delay: 0.2s !important; }
.view-public-event-list .views-row:nth-child(5) { animation-delay: 0.25s !important; }
.view-public-event-list .views-row:nth-child(6) { animation-delay: 0.3s !important; }
.view-public-event-list .views-row:nth-child(7) { animation-delay: 0.35s !important; }
.view-public-event-list .views-row:nth-child(8) { animation-delay: 0.4s !important; }
.view-public-event-list .views-row:nth-child(9) { animation-delay: 0.45s !important; }

/* Hover effect */
.view-public-event-list .views-row:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-hover) !important;
  border-color: var(--color-primary) !important;
}

/* Event card content transitions */
.view-public-event-list .views-row * {
  transition: color var(--transition-fast), background var(--transition-fast) !important;
}

/* Event card image */
.view-public-event-list .views-row img {
  width: 100% !important;
  height: 160px !important;
  object-fit: cover !important;
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* Image fallback container styling - position relative for badge overlay */
.view-public-event-list .views-row figure,
.view-public-event-list .views-row .field--name-field-thumbnail,
.view-public-event-list .views-row [role="group"] {
  position: relative !important;
  min-height: 160px !important;
  background: linear-gradient(135deg, #e8ecf1 0%, #d1d8e0 100%) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Group containing image link - no margin */
.view-public-event-list .views-row > [role="group"],
.view-public-event-list .views-row > figure {
  margin: 0 !important;
  padding: 0 !important;
}

/* Image fallback placeholder when image fails to load */
.view-public-event-list .views-row .image-fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 160px !important;
  background: linear-gradient(135deg, #e8ecf1 0%, #d1d8e0 100%) !important;
}

.view-public-event-list .views-row .image-fallback::after {
  content: '\1F4C5' !important; /* Calendar emoji */
  font-size: 3rem !important;
  opacity: 0.3 !important;
}

/* Event card content area */
.view-public-event-list .views-row .event-card-content,
.view-public-event-list .views-row .views-field {
  padding: var(--spacing-md) !important;
}

/* Ensure card content fills available space */
.view-public-event-list .views-row > *:last-child {
  margin-top: auto !important;
}

/* Event titles - bold, blue, 17px */
.view-public-event-list .views-row h3,
.view-public-event-list .views-row .views-field-title {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important; /* Bold */
  font-size: 17px !important;
  line-height: 1.4 !important;
  color: rgb(0, 116, 188) !important; /* Blue */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0.75rem 1rem !important;
  background: transparent !important; /* No background */
}

.view-public-event-list .views-row h3 a,
.view-public-event-list .views-row .views-field-title a {
  color: inherit !important;
  text-decoration: none !important;
}

.view-public-event-list .views-row h3 a:hover,
.view-public-event-list .views-row .views-field-title a:hover {
  color: rgb(0, 90, 150) !important; /* Darker blue on hover */
}

/* Event meta text (dates) - hide original time elements */
.view-public-event-list .views-row time,
.view-public-event-list .views-row .views-field-created,
.view-public-event-list .views-row .views-field-field-event-date,
.view-public-event-list .views-row .event-start-date,
.view-public-event-list .views-row .event-end-date,
.view-public-event-list .views-row .reg-start-date,
.view-public-event-list .views-row .reg-end-date,
.view-public-event-list .views-row .event-venue-source {
  display: none !important;
}

/* New combined date row styling */
.view-public-event-list .views-row .event-date-row,
.view-public-event-list .views-row .reg-date-row,
.view-public-event-list .views-row .event-venue-row {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgb(66, 66, 66) !important;
  line-height: 1.5 !important;
  padding: 0.6rem 1rem !important;
  margin-top: 0 !important; /* No margin top */
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.view-public-event-list .views-row .event-date-row .date-label,
.view-public-event-list .views-row .reg-date-row .date-label,
.view-public-event-list .views-row .event-venue-row .venue-label {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 600 !important;
  color: rgb(66, 66, 66) !important;
  margin-right: 0.25rem !important;
}

/* ==========================================================================
   Meta row icons — inline stroke SVG (size/color via existing row styles)
   ========================================================================== */

.view-public-event-list .views-row .event-date-row .date-icon,
.view-public-event-list .views-row .reg-date-row .date-icon,
.view-public-event-list .views-row .event-venue-row .venue-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  background: transparent !important;
  flex-shrink: 0 !important;
  color: #4a6fa5 !important;
}

.view-public-event-list .views-row .event-date-row .date-icon svg,
.view-public-event-list .views-row .reg-date-row .date-icon svg,
.view-public-event-list .views-row .event-venue-row .venue-icon svg {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
}

/* Event description field wrapper - border below to separate from Org Name */
.view-public-event-list .views-row .views-field-field-description {
  padding: 0.6rem 26px !important; /* 10px more left/right than 1rem (16px) */
  background: transparent !important;
  border-bottom: 1px solid #e5e7eb !important; /* Divider line below description */
  order: 6 !important;
}

/* Event description text styling - NO border on p tags */
.view-public-event-list .views-row .views-field-field-description p,
.view-public-event-list .views-row .views-field-field-description .field-content {
  font-size: 14px !important; /* Reduced by 1px */
  color: rgb(66, 66, 66) !important;
  line-height: 1.5 !important;
  /* Limit to 3 lines with ellipsis */
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 4.5em !important; /* Fallback: 3 lines * 1.5 line-height */
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-bottom: none !important; /* NO border on individual paragraphs */
}

/* Fallback for legacy p element (without field wrapper) */
.view-public-event-list .views-row > p {
  font-size: 14px !important; /* Reduced by 1px */
  color: rgb(66, 66, 66) !important;
  line-height: 1.5 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-height: 4.5em !important;
  padding: 0.6rem 26px !important; /* 10px more left/right */
  background: transparent !important;
  border-bottom: 1px solid #e5e7eb !important; /* Divider line below description */
  order: 6 !important;
}

/* ==========================================================================
   Event Type Badges - Ticket Stub Style (Paid/Free/RSVP)
   Classic ticket shape with notch cutouts and perforation line
   ========================================================================== */
.event-type-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 70px !important;
  height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: help !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  /* Position absolute at bottom-right of image */
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  z-index: 5 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  border-radius: 4px !important;
  overflow: visible !important;
  /* Ticket notch using radial gradient mask */
  -webkit-mask:
    radial-gradient(circle at 0% 50%, transparent 6px, black 6.5px),
    radial-gradient(circle at 100% 50%, transparent 6px, black 6.5px) !important;
  -webkit-mask-composite: source-in !important;
  mask:
    radial-gradient(circle at 0% 50%, transparent 6px, black 6.5px),
    radial-gradient(circle at 100% 50%, transparent 6px, black 6.5px) !important;
  mask-composite: intersect !important;
}

.event-type-badge:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

/* Ticket main body */
.event-type-badge .badge-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  position: relative !important;
  /* More padding-left to keep text away from perforation line */
  padding-left: 22px !important;
  padding-right: 8px !important;
  border-radius: 4px !important;
}

/* Perforation line using pseudo-element */
.event-type-badge .badge-text::before {
  content: '' !important;
  position: absolute !important;
  left: 12px !important;
  top: 2px !important;
  bottom: 2px !important;
  width: 0 !important;
  border-left: 2px dashed rgba(255, 255, 255, 0.5) !important;
}

/* Paid Ticket - Orange/Amber */
.event-type-badge.event-type-paid .badge-text {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
}

/* Free Ticket - Green */
.event-type-badge.event-type-free .badge-text {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
}

/* RSVP Ticket - Blue */
.event-type-badge.event-type-rsvp .badge-text {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   Field Wrapper Styles - With default_field_elements: true
   ========================================================================== */

/* Image Field Wrapper - position relative for badge overlay */
/* Image comes FIRST (order: 1) */
.view-public-event-list .views-row .views-field-field-cover-image-thumbnail {
  order: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

/* Title Field Wrapper - Title below image; flex aligns title link + HMAW badge */
.view-public-event-list .views-row .views-field-field-title-mcp {
  order: 2 !important;
  padding: 0.75rem 1rem !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
}

/* HMAW1905 Certified badge */

.view-public-event-list .views-row .views-field-field-title-mcp .event-hmaw-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  width: fit-content;
  flex-shrink: 0;
}

.event-hmaw-badge svg {
  flex-shrink: 0;
}

/* Event Date Fields (hidden - replaced by JS) */
.view-public-event-list .views-row .views-field-field-event-start-date-time,
.view-public-event-list .views-row .views-field-field-event-end-date-time {
  display: none !important;
}

/* Registration Date Fields (hidden - replaced by JS) */
.view-public-event-list .views-row .views-field-field-event-registration-date,
.view-public-event-list .views-row .views-field-field-event-registration-end {
  display: none !important;
}

/* Allowed Department Field Wrapper - padding matches Title, reduced top to close gap with Description */
.view-public-event-list .views-row .views-field-field-allowed-department {
  order: 7 !important;
  padding: 0.25rem 1rem 0.5rem 1rem !important; /* Reduced bottom padding */
  background: transparent !important;
  border: none !important; /* No border under org name */
}

.view-public-event-list .views-row .views-field-field-allowed-department .field-content,
.view-public-event-list .views-row .views-field-field-allowed-department a {
  display: block !important;
  color: rgb(0, 116, 188) !important; /* Blue link */
  font-size: 14px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.view-public-event-list .views-row .views-field-field-allowed-department a:hover {
  color: rgb(0, 90, 150) !important;
  text-decoration: underline !important;
}

/* Event Type Field Wrapper - hidden (badge overlay on image instead) */
.view-public-event-list .views-row .views-field-field-event-type {
  display: none !important;
}

/* Event Categories Field (hidden) */
.view-public-event-list .views-row .views-field-field-event-categories {
  display: none !important;
}

/* Organization link styling (legacy fallback) - padding matches Title */
.view-public-event-list .views-row a[href*="taxonomy"],
.view-public-event-list .views-row .views-field-field-organization a {
  display: block !important;
  padding: 0.75rem 1rem !important; /* Match Title padding */
  background: transparent !important;
  color: rgb(0, 116, 188) !important; /* Blue link */
  font-size: 14px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  border: none !important; /* No border under org name */
}

.view-public-event-list .views-row a[href*="taxonomy"]:hover,
.view-public-event-list .views-row .views-field-field-organization a:hover {
  color: rgb(0, 90, 150) !important; /* Darker blue on hover */
  text-decoration: underline !important;
}

/* ==========================================================================
   Right Sidebar - Calendar (DISABLED per user request)
   ========================================================================== */
#events-calendar-sidebar {
  display: none !important;
}

/* Calendar styles removed - calendar sidebar disabled */

/* ==========================================================================
   Pagination - Horizontal Display
   ========================================================================== */
.view-public-event-list .pager {
  margin-left: 320px !important;
  margin-top: var(--spacing-xl) !important;
  display: flex !important;
  justify-content: center !important;
}

.view-public-event-list .pager__items {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.view-public-event-list .pager__item {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* All pager items - uniform sizing */
.view-public-event-list .pager__item a,
.view-public-event-list .pager__item > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 12px !important;
  border-radius: var(--radius-md) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all var(--transition-fast) !important;
  border: 1px solid var(--color-border) !important;
  background: var(--color-bg-alt) !important;
  color: var(--color-text) !important;
  box-sizing: border-box !important;
}

/* Wider buttons for text like "Next" and "Last" */
.view-public-event-list .pager__item--next a,
.view-public-event-list .pager__item--last a,
.view-public-event-list .pager__item--first a,
.view-public-event-list .pager__item--previous a {
  min-width: auto !important;
  padding: 0 16px !important;
}

.view-public-event-list .pager__item a:hover {
  background: var(--color-primary-light) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* Active/current page - filled primary color */
.view-public-event-list .pager__item.is-active > span,
.view-public-event-list .pager__item.is-active > a,
.view-public-event-list .pager__item--current > span,
.view-public-event-list .pager__item--current > a {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: white !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Hide visually hidden text in pager */
.view-public-event-list .pager .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Responsive - Large Desktop (≥1280px) - 3 columns (Calendar removed)
   ========================================================================== */
@media (min-width: 1280px) {
  .view-public-event-list .view-content {
    margin-right: 1rem !important;
    /* Force 3 columns on large screens */
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==========================================================================
   Responsive - Medium Desktop (1024px - 1279px) - Hide Calendar, 2-3 columns
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  #events-calendar-sidebar {
    display: none !important;
  }

  .view-public-event-list .view-content {
    margin-right: var(--spacing-md) !important;
    /* Force 2 columns minimum on medium screens */
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==========================================================================
   Responsive - Tablet (768px - 1023px) - Narrower sidebar, 2 columns
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  #events-calendar-sidebar {
    display: none !important;
  }

  .view-public-event-list .view-filters {
    width: 260px !important;
  }

  .view-public-event-list .view-content {
    margin-left: 290px !important;
    margin-right: var(--spacing-md) !important;
    grid-template-columns: repeat(1, 1fr) !important;
  }

  /* Header margins for tablet */
  .view-public-event-list > .view-header,
  .view-public-event-list > h1,
  .view-public-event-list > h2,
  .view-public-event-list .view-title,
  .view-public-event-list .events-page-header,
  .view-public-event-list > header {
    margin-left: 290px !important;
  }

  .view-public-event-list .pager {
    margin-left: 290px !important;
  }
}

/* ==========================================================================
   Responsive - Mobile (<768px) - Stacked layout, 1 column
   ========================================================================== */
@media (max-width: 767px) {
  .view-public-event-list {
    padding: var(--spacing-md) !important;
  }

  #events-calendar-sidebar {
    display: none !important;
  }

  .view-public-event-list .view-filters {
    position: relative !important;
    left: auto !important;
    top: auto !important; /* Override CSS variable on mobile */
    width: 100% !important;
    max-height: none !important;
    margin-bottom: var(--spacing-lg) !important;
    border-radius: var(--radius-lg) !important;
    transition: none !important; /* Disable transition on mobile */
    /* Drop the desktop sidebar z-index (10) on mobile — it put this in-flow
       filter card in the positive-z-index layer, painting it OVER the site
       header's mobile menu dropdown when opened. auto lets the menu win. */
    z-index: auto !important;
  }

  .view-public-event-list .view-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    grid-template-columns: 1fr !important;
    gap: var(--spacing-md) !important;
  }

  /* Reset header margins on mobile */
  .view-public-event-list > .view-header,
  .view-public-event-list > h1,
  .view-public-event-list > h2,
  .view-public-event-list .view-title,
  .view-public-event-list .events-page-header,
  .view-public-event-list > header {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important; /* Reset dynamic margin-top on mobile */
  }

  .view-public-event-list .pager {
    margin-left: 0 !important;
  }

  /* Reset empty state margins on mobile */
  .view-public-event-list .events-empty,
  .view-public-event-list .view-empty {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Card height on mobile - auto to fit content */
  .view-public-event-list .views-row {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  /* Pager on mobile */
  .view-public-event-list .pager {
    margin-left: 0 !important;
  }

  .view-public-event-list .pager__items {
    gap: 0.25rem !important;
  }

  .view-public-event-list .pager__item a,
  .view-public-event-list .pager__item span,
  .view-public-event-list .pager__item.is-active span {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    padding: 0 !important;
    font-size: 13px !important;
  }

  .view-public-event-list .pager__item--next a,
  .view-public-event-list .pager__item--last a,
  .view-public-event-list .pager__item--first a,
  .view-public-event-list .pager__item--previous a {
    width: auto !important;
    max-width: none !important;
    padding: 0 0.75rem !important;
  }

  /* Adjust title padding on mobile */
  .view-public-event-list .views-row h3,
  .view-public-event-list .views-row .views-field-title {
    padding: 0.5rem 0.75rem !important;
    font-size: 1rem !important;
  }

  /* Adjust date padding on mobile */
  .view-public-event-list .views-row time,
  .view-public-event-list .views-row .views-field-created,
  .view-public-event-list .views-row .views-field-field-event-date {
    padding: 0.4rem 0.75rem !important;
  }

  /* Adjust description padding on mobile */
  .view-public-event-list .views-row p,
  .view-public-event-list .views-row .views-field-body {
    padding: 0.4rem 0.75rem !important;
  }

  /* Smaller badge on mobile */
  .event-type-badge {
    margin: 0.4rem 0.75rem 0.5rem !important;
    font-size: 11px !important;
  }
}

/* ==========================================================================
   Page Header (if present) - Using div instead of header tag
   ========================================================================== */
.events-page-header {
  margin-bottom: var(--spacing-xl) !important;
  padding-bottom: var(--spacing-md) !important;
  border-bottom: 2px solid var(--color-primary-light) !important;
}

.events-page-header h1,
.events-page-header .page-title {
  color: var(--color-primary) !important;
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */
@media print {
  .view-public-event-list .view-filters,
  #events-calendar-sidebar {
    display: none !important;
  }

  .view-public-event-list .view-content {
    margin: 0 !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .view-public-event-list .views-row {
    break-inside: avoid !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}

/* ==========================================================================
   Enhanced Filter UI - Phase 1: Input Heights & Flatpickr
   ========================================================================== */

/* 1. Reduced input height for all filter inputs */
.view-public-event-list .view-filters input[type="text"],
.view-public-event-list .view-filters input[type="date"],
.view-public-event-list .view-filters select {
  padding: 0.5rem 0.75rem !important;
  height: 36px !important;
  font-size: 0.875rem !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-bg-alt) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.view-public-event-list .view-filters input[type="text"]:focus,
.view-public-event-list .view-filters input[type="date"]:focus,
.view-public-event-list .view-filters select:focus {
  outline: none !important;
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1) !important;
}

/* 2. Date range picker - hide original date inputs */
.view-public-event-list .view-filters .form-item-date-from,
.view-public-event-list .view-filters .form-item-date-to {
  display: none !important;
}

/* Date range wrapper styling - prevent collapse */
.view-public-event-list .date-range-wrapper {
  margin-bottom: 0.75rem !important;
  min-height: auto !important;
}

.view-public-event-list .date-range-wrapper label {
  display: block !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  color: var(--color-text) !important;
  margin-bottom: 0.5rem !important;
}

.view-public-event-list .date-range-wrapper .date-range-input {
  width: 100% !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%2394a3b8' d='M4 0a1 1 0 0 1 1 1v1h6V1a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h1V1a1 1 0 0 1 1-1zm9 6H3v8h10V6z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  padding-right: 2.5rem !important;
}

/* Flatpickr custom styling */
.flatpickr-calendar {
  border-radius: var(--radius-md) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid var(--color-border) !important;
  font-family: inherit !important;
}

.flatpickr-months {
  background: var(--color-primary) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}

.flatpickr-months .flatpickr-month {
  color: white !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: white !important;
  fill: white !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: white !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: white !important;
}

.flatpickr-current-month {
  color: white !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent !important;
  color: white !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.flatpickr-day.inRange {
  background: var(--color-primary-light) !important;
  border-color: var(--color-primary-light) !important;
  box-shadow: -5px 0 0 var(--color-primary-light), 5px 0 0 var(--color-primary-light) !important;
}

.flatpickr-day:hover {
  background: var(--color-primary-light) !important;
  border-color: var(--color-primary-light) !important;
}

/* ==========================================================================
   Enhanced Filter UI - Phase 2: Multi-select with Tags
   ========================================================================== */

/* Multi-select wrapper - prevent collapse during render */
.view-public-event-list .multi-select-wrapper {
  position: relative !important;
  margin-bottom: 0.75rem !important;
  min-height: auto !important;
}

.view-public-event-list .multi-select-wrapper > select {
  display: none !important;
}

/* Hide native select immediately to prevent FOUC (Flash of Unstyled Content) */
.view-public-event-list .view-filters select[multiple] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}

/* Also hide non-multiple selects that will be converted */
.view-public-event-list .view-filters .form-item-event-type select {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

/* Multi-select display area - prevent collapse during render */
.view-public-event-list .multi-select-display {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.5rem 2rem 0.5rem 0.75rem !important;
  min-height: 36px !important;
  max-height: 120px !important;  /* Prevent excessive growth */
  overflow-y: auto !important;   /* Scroll if too many tags */
  cursor: pointer !important;
  background-color: var(--color-bg-alt) !important;
  display: flex !important;
  align-items: flex-start !important;  /* Align to top for multi-line */
  flex-wrap: wrap !important;
  gap: 0.25rem !important;
  transition: border-color var(--transition-fast) !important;
  position: relative !important;
  contain: layout !important;    /* Prevent parent reflow during render */
  /* Single solid dropdown arrow */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%231a4d8f' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
}

/* Remove any ::after arrow that might be added */
.view-public-event-list .multi-select-display::after {
  display: none !important;
  content: none !important;
}

/* Hide Font Awesome arrow from Drupal theme on form-item */
.view-public-event-list .view-filters .form-item-event-type::after,
.view-public-event-list .view-filters .form-item-organization::after {
  display: none !important;
  content: none !important;
}

.view-public-event-list .multi-select-display:hover {
  border-color: var(--color-accent) !important;
}

.view-public-event-list .multi-select-display.open {
  border-color: var(--color-accent) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  border-bottom-color: var(--color-border) !important;
}

.view-public-event-list .multi-select-display .placeholder {
  color: var(--color-text-muted) !important;
  font-size: 14px !important;
  /* display controlled by JavaScript - do not use !important */
}

/* Hide placeholder when tags are present */
.view-public-event-list .multi-select-tags:not(:empty) + .placeholder {
  display: none !important;
}

/* Selected tags - reserve minimum space */
.view-public-event-list .multi-select-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.25rem !important;
  min-height: 24px !important;  /* Height of one tag row */
}

.view-public-event-list .multi-select-tag {
  background: var(--color-primary) !important;
  color: white !important;
  padding: 0.125rem 0.5rem !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
  white-space: normal !important;  /* Allow text wrapping */
  word-break: break-word !important;  /* Break long words */
  max-width: 100% !important;  /* Don't overflow container */
}

.view-public-event-list .multi-select-tag .remove {
  cursor: pointer !important;
  opacity: 0.7 !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
}

.view-public-event-list .multi-select-tag .remove:hover {
  opacity: 1 !important;
}

/* Dropdown menu */
.view-public-event-list .multi-select-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--color-bg-alt) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
  border-top: none !important;
  margin-top: 0 !important;
  max-height: 200px !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
  display: none !important;
  box-shadow: var(--shadow-md) !important;
}

.view-public-event-list .multi-select-dropdown.open {
  display: block !important;
}

/* When dropdown is open, allow overflow on parent to prevent clipping */
.view-public-event-list .view-filters:has(.multi-select-dropdown.open) {
  overflow: visible !important;
}

/* Search box in dropdown */
.view-public-event-list .multi-select-search {
  padding: 0.5rem !important;
  border-bottom: 1px solid var(--color-border) !important;
  position: sticky !important;
  top: 0 !important;
  background: var(--color-bg-alt) !important;
}

.view-public-event-list .multi-select-search input {
  width: 100% !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 4px !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.8125rem !important;
  height: auto !important;
}

/* Dropdown options */
.view-public-event-list .multi-select-options {
  max-height: 150px !important;
  overflow-y: auto !important;
}

.view-public-event-list .multi-select-option {
  padding: 0.5rem 0.75rem !important;
  cursor: pointer !important;
  font-size: 0.875rem !important;
  transition: background var(--transition-fast) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.view-public-event-list .multi-select-option:hover {
  background: #f5f7fa !important;
}

.view-public-event-list .multi-select-option.selected {
  background: #e8f4fd !important;
}

.view-public-event-list .multi-select-option.hidden {
  display: none !important;
}

.view-public-event-list .multi-select-option::before {
  content: '' !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid var(--color-border) !important;
  border-radius: 3px !important;
  flex-shrink: 0 !important;
  transition: all var(--transition-fast) !important;
}

.view-public-event-list .multi-select-option.selected::before {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M10.28 2.28L4.5 8.06 1.72 5.28a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l6.5-6.5a.75.75 0 0 0-1.06-1.06z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* ==========================================================================
   Enhanced Filter UI - Phase 3: Side-by-side Buttons
   ========================================================================== */

/* Filter form actions container */
.view-public-event-list .view-filters .form-actions {
  display: flex !important;
  gap: 0.5rem !important;
  margin-top: 1rem !important;
}

.view-public-event-list .view-filters .form-actions > * {
  flex: 1 !important;
}

/* Filter button (primary) - 15px bold */
.view-public-event-list .view-filters input[type="submit"],
.view-public-event-list .view-filters .btn-filter {
  padding: 0.5rem 1rem !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: none !important;
  border: none !important;
  background: var(--color-primary) !important;
  color: white !important;
  height: 36px !important;
}

.view-public-event-list .view-filters input[type="submit"]:hover,
.view-public-event-list .view-filters .btn-filter:hover {
  background: var(--color-primary) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Clear button (secondary) - 15px bold */
.view-public-event-list .view-filters .btn-clear {
  padding: 0.5rem 1rem !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer !important;
  transition: none !important;
  background: #f5f7fa !important;
  color: #64748b !important;
  border: 1px solid var(--color-border) !important;
  height: 36px !important;
}

.view-public-event-list .view-filters .btn-clear:hover {
  background: #f5f7fa !important;
  color: #64748b !important;
}

/* Hide default reset button (we'll create a custom one) */
.view-public-event-list .view-filters input[type="reset"],
.view-public-event-list .view-filters input[value="Clear Filters"] {
  display: none !important;
}

/* ==========================================================================
   Enhanced Filter UI - Unified Font Sizes
   ========================================================================== */

/* Global: All text in view-filters = 14px */
.view-public-event-list .view-filters,
.view-public-event-list .view-filters *,
.view-public-event-list .view-filters input,
.view-public-event-list .view-filters select,
.view-public-event-list .view-filters .placeholder,
.view-public-event-list .view-filters .multi-select-display,
.view-public-event-list .view-filters .multi-select-option,
.view-public-event-list .view-filters .multi-select-tag,
.view-public-event-list .view-filters .multi-select-search input {
  font-size: 14px !important;
}

/* Labels: 15px bold */
.view-public-event-list .view-filters label,
.view-public-event-list .view-filters .form-item > label,
.view-public-event-list .view-filters .views-exposed-widget > label,
.view-public-event-list .date-range-wrapper > label {
  display: block !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  color: var(--color-text) !important;
  margin-bottom: 0.375rem !important;
}

/* Reduce form-item spacing in filters */
.view-public-event-list .view-filters .form-item {
  margin-bottom: 0.75rem !important;
}

/* ==========================================================================
   Empty State - White Card Style (matches Image #5)
   Position to the right of filter sidebar like view-content
   ========================================================================== */
.view-public-event-list .events-empty,
.view-public-event-list .view-empty {
  text-align: center !important;
  padding: 3rem 2rem !important;
  background: white !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid var(--color-border) !important;
  min-height: auto !important;
  /* Same margin as view-content to position to the right of filter */
  margin-left: 320px !important;
  margin-right: 1rem !important;
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}

.view-public-event-list .events-empty .empty-icon,
.view-public-event-list .view-empty .empty-icon {
  font-size: 2.5rem !important;
  margin-bottom: 0.75rem !important;
  opacity: 0.6 !important;
}

.view-public-event-list .events-empty .empty-title,
.view-public-event-list .view-empty .empty-title,
.view-public-event-list .events-empty h2,
.view-public-event-list .view-empty h2 {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--color-primary) !important;
  margin: 0 0 0.5rem 0 !important;
}

.view-public-event-list .events-empty .empty-text,
.view-public-event-list .view-empty .empty-text,
.view-public-event-list .events-empty p,
.view-public-event-list .view-empty p {
  font-size: 0.875rem !important;
  color: var(--color-text-muted) !important;
  margin: 0 !important;
}

.view-public-event-list .events-empty .empty-action,
.view-public-event-list .view-empty .empty-action {
  padding: 0.5rem 1.25rem !important;
  font-size: 0.9rem !important;
}

/* Responsive empty-state margins. The rule above sets margin-left:320px
   unconditionally (to clear the fixed 280px filter sidebar on desktop), and
   because it appears after the mobile media query it also wins there — pushing
   the "No Events Found" card 320px right into a narrow sliver on tablet/mobile.
   Re-assert the responsive margins here (later source order) so the card fills
   the content area: 290px on tablet (260px sidebar), 0 on mobile (stacked, no
   sidebar to clear). */
@media (min-width: 768px) and (max-width: 1023px) {
  .view-public-event-list .events-empty,
  .view-public-event-list .view-empty {
    margin-left: 290px !important;
    margin-right: var(--spacing-md) !important;
  }
}
@media (max-width: 767px) {
  .view-public-event-list .events-empty,
  .view-public-event-list .view-empty {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ==========================================================================
   Filter Input Field Text - 14px
   ========================================================================== */
.view-public-event-list .view-filters input[type="text"],
.view-public-event-list .view-filters input[type="date"],
.view-public-event-list .view-filters select,
.view-public-event-list .view-filters .form-text,
.view-public-event-list .view-filters .form-select {
  font-size: 14px !important;
}

/* ==========================================================================
   Org Embed Override - Horizontal Top Filter
   When events view is embedded inside org profile (.org-events__view),
   convert fixed sidebar filter to horizontal top bar.
   ========================================================================== */
.org-events__view .view-public-event-list .view-filters {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: flex-end !important;
  margin-bottom: var(--spacing-lg) !important;
  z-index: auto !important;
}

/* The form inside view-filters must also be horizontal flex */
.org-events__view .view-public-event-list .view-filters form {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: flex-end !important;
  width: 100% !important;
}

/* Ensure ALL direct children (form-item, multi-select-wrapper, etc.) flex inline */
.org-events__view .view-public-event-list .view-filters form > .form-item,
.org-events__view .view-public-event-list .view-filters form > .multi-select-wrapper,
.org-events__view .view-public-event-list .view-filters form > .date-range-wrapper {
  flex: 1 1 200px !important;
  min-width: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Keep date-from and date-to hidden (replaced by date-range picker) */
.org-events__view .view-public-event-list .view-filters form > .form-item-date-from,
.org-events__view .view-public-event-list .view-filters form > .form-item-date-to {
  display: none !important;
}

.org-events__view .view-public-event-list .view-filters .form-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  gap: 8px !important;
  align-self: flex-end !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Ensure buttons inside form-actions match input height for visual alignment */
.org-events__view .view-public-event-list .view-filters .form-actions input[type="submit"],
.org-events__view .view-public-event-list .view-filters .form-actions .btn-filter,
.org-events__view .view-public-event-list .view-filters .form-actions .btn-clear {
  height: 36px !important;
  margin-bottom: 0 !important;
}

/* Remove sidebar margin from content area in org embed */
.org-events__view .view-public-event-list .view-content {
  margin-left: 0 !important;
}

/* Remove sidebar margin from header elements in org embed */
.org-events__view .view-public-event-list > .view-header,
.org-events__view .view-public-event-list > h1,
.org-events__view .view-public-event-list > h2,
.org-events__view .view-public-event-list .view-title,
.org-events__view .view-public-event-list .events-page-header {
  margin-left: 0 !important;
}

/* Remove sidebar margin from pager in org embed */
.org-events__view .view-public-event-list .pager {
  margin-left: 0 !important;
}

/* Remove sidebar margin from empty state in org embed */
.org-events__view .view-public-event-list .events-empty,
.org-events__view .view-public-event-list .view-empty {
  margin-left: 0 !important;
}

/* ==========================================================================
   Filter Loading Animation - Shows while JS initializes
   ========================================================================== */

/* Loading overlay - covers filter form until initialized */
.view-public-event-list .view-filters:not(.filters-ready)::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  z-index: 50 !important;
  border-radius: var(--radius-xl) !important;
}

/* Spinning loader */
.view-public-event-list .view-filters:not(.filters-ready)::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 32px !important;
  height: 32px !important;
  margin: -16px 0 0 -16px !important;
  border: 3px solid var(--color-border) !important;
  border-top-color: var(--color-primary) !important;
  border-radius: 50% !important;
  z-index: 51 !important;
  animation: filterSpinner 0.8s linear infinite !important;
}

/* Spinner animation */
@keyframes filterSpinner {
  to {
    transform: rotate(360deg);
  }
}

/* Hide form content while loading - use visibility to preserve layout */
.view-public-event-list .view-filters:not(.filters-ready) form,
.view-public-event-list .view-filters:not(.filters-ready) > .form-item {
  visibility: hidden !important;
}

/* When ready, remove loading state smoothly */
.view-public-event-list .view-filters.filters-ready::before,
.view-public-event-list .view-filters.filters-ready::after {
  display: none !important;
}

/* Fade in form content when ready */
.view-public-event-list .view-filters.filters-ready form,
.view-public-event-list .view-filters.filters-ready > .form-item {
  visibility: visible !important;
  animation: filterFadeIn 0.3s ease-out !important;
}

@keyframes filterFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}