/* Events listing — mirrors stories-grid layout. */

.events-grid {
    display: flex;
    flex-direction: column;
    gap: var(--secan-space-12xl);
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--secan-space-12xl);
    box-sizing: border-box;
  }
  
  .events-grid__filters {
    width: 100%;
  }
  
  .events-grid__grid,
  .events-grid__grid > .views-infinite-scroll-content-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--secan-space-2xl);
  }
  
  .events-grid__grid > .views-infinite-scroll-content-wrapper {
    grid-column: 1 / -1;
    min-width: 0;
  }
  
  .events-grid__grid > .views-infinite-scroll-content-wrapper::after {
    display: none;
  }
  
  .events-grid__pager:empty,
  .events-grid__pager:not(:has(*)) {
    display: none;
  }
  
  .events-grid__pager {
    display: flex;
    justify-content: center;
  }
  
  .events-grid__filters-wrapper {
    position: sticky;
    top: calc(var(--secan-header-height) + var(--drupal-displace-offset-top, 0px));
    z-index: 90;
    background-color: var(--secan-white);
    padding: var(--secan-space-s) 0;
  }
  
  @media (max-width: 1023px) {
    .events-grid {
      gap: var(--secan-space-3xl);
      padding: var(--secan-space-12xl) var(--secan-space-2xl);
    }
  
    .events-grid__grid,
    .events-grid__grid > .views-infinite-scroll-content-wrapper {
      grid-template-columns: repeat(2, 1fr);
    }

    /* Allow for horizontal scrolling of filters on mobile. */
    .events-grid__filters {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        /* Optional: softer edge when scrolling */
        scrollbar-width: none; /* Firefox */
    }
    .events-grid__filters::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
    }
    .events-grid__filters .tabs__list {
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    }
    .events-grid__filters .tabs__item,
    .events-grid__filters .tabs__link {
    flex: 0 0 auto;
    white-space: nowrap;
    }
  }
  
  @media (max-width: 600px) {
    .events-grid {
      padding: var(--secan-space-12xl) var(--secan-space-s);
    }
  
    .events-grid__grid,
    .events-grid__grid > .views-infinite-scroll-content-wrapper {
      grid-template-columns: 1fr;
    }
  }