.jsud-sedes-filters { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.jsud-venue-heading { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--jsud-muted); margin: 16px 0 8px; }
/* Flexbox, not CSS Grid — see disciplinas.css for why (grid's auto-fit only
   collapses a column when no row anywhere uses it, so a short last row
   under a full row still leaves a reserved blank gap). */
.jsud-sedes-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.jsud-sedes-grid .jsud-sede-card { flex: 0 0 260px; }

.jsud-sede-photo--modal { aspect-ratio: 3 / 2; border-radius: 12px; margin-bottom: 12px; }
.jsud-sede-location { display: flex; align-items: center; gap: 6px; }
.jsud-sede-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

@container jsud-widget (max-width: 600px) {
  .jsud-sedes-filters { flex-direction: column; align-items: stretch; }

  /* Swipeable carousel: each page is its own flex-column box, 2 cards
     stacked. A short last page (1 card) just ends at its own content
     height instead of leaving a reserved blank cell, since flexbox
     doesn't share row tracks across separate boxes the way grid does. */
  .jsud-sedes-grid {
    display: flex;
    flex-wrap: nowrap; /* the desktop rule sets flex-wrap:wrap; without this reset, pages stack vertically instead of overflowing sideways */
    align-items: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .jsud-sedes-grid::-webkit-scrollbar { display: none; }
  .jsud-sedes-grid .jsud-hcarousel-page {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* The desktop rule below sets a fixed 260px flex-basis for the card grid's
     row layout — but here the page is flex-direction:column, so that same
     property would fix the card's HEIGHT at 260px instead of its width
     (flex-basis follows the main axis, which is vertical here). Reset it. */
  .jsud-sedes-grid .jsud-hcarousel-page .jsud-sede-card {
    flex: 0 0 auto;
    width: 100%;
  }
}