/* Firefox-specific fixes - Complete layout override */
@-moz-document url-prefix() {
  /* Ensure the banner container and banner div adjust height */
  .banner-container, #banner {
      height: auto !important;       /* Overrides inline fixed height */
      max-height: none !important;   /* Removes max-height restrictions */
  }

  /* Make the banner image responsive */
  #banner img {
      width: 100% !important;        /* Scales image width to fit container */
      height: auto !important;       /* Maintains aspect ratio */
  }

  /* Force wider containers with proper padding */
  .container, .events-section {
      max-width: 100% !important;
      width: 96% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding: 0 20px !important;
  }
  
  /* Switch to inline-block layout for better Firefox rendering */
  .event-list {
      display: block !important;
      width: 100% !important;
      text-align: center !important;
      font-size: 0 !important; /* Fix inline-block spacing issues */
  }
  
  /* Set list items with percentage widths and margins */
  .event-list li {
      display: inline-block !important;
      vertical-align: top !important;
      width: 31% !important;
      margin: 1% !important;
      font-size: 16px !important; /* Reset font-size */
  }
  
  /* Set fixed card layout with absolute positioning for the date */
  .event-card {
      display: block !important;
      position: relative !important;
      width: 100% !important;
      min-height: 80px !important; /* Increased for better spacing */
      padding: 18px 120px 18px 20px !important; /* More right padding for date */
      text-align: left !important;
      box-sizing: border-box !important;
  }
  
  /* Style the city name */
  .event-city {
      display: block !important;
      font-size: 1.25rem !important;
      font-weight: 700 !important;
      margin: 0 !important;
  }
  
  /* Position the date badge to the right */
  .event-date {
      position: absolute !important;
      right: 20px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
  }
  
  /* Responsive design for medium screens */
  @media (max-width: 992px) {
      .event-list li {
          width: 47% !important;
          margin: 1.5% !important;
      }
  }
  
  /* Responsive design for smaller screens */
  @media (max-width: 768px) {
      .event-list li {
          width: 100% !important;
          margin: 10px 0 !important;
      }
  }
  
  /* Adjustments for very small screens */
  @media (max-width: 480px) {
      .event-card {
          padding: 15px !important;
          text-align: center !important;
      }
      
      .event-date {
          position: static !important;
          transform: none !important;
          margin-top: 10px !important;
          display: inline-block !important;
      }
  }
}