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

/* Flexbox, not CSS Grid: with grid's auto-fit/auto-fill, column TRACKS are
   shared across every row, so once row 1 fills all N columns, row 2's
   unused columns stay reserved (they're "in use" by row 1) — that's the
   blank gap under a short last row of a multi-row grid; auto-fit only ever
   collapses a column when NO row uses it. Flexbox has no shared column
   grid: each row wraps and ends independently, so a short last row just
   has ordinary trailing margin, never a reserved blank block. */
.jsud-disc-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.jsud-disc-card {
  flex: 0 0 150px;
  border: 1px solid #e2e6ec; border-radius: 12px; padding: 16px 10px; background: #fff; text-align: center;
  cursor: pointer; transition: box-shadow .15s ease; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.jsud-disc-card:hover, .jsud-disc-card:focus-visible { box-shadow: 0 4px 16px rgba(13,27,42,.1); outline: none; }
.jsud-disc-pictogram { width: 56px; height: 56px; color: var(--jsud-navy); }
.jsud-disc-pictogram svg { width: 100%; height: 100%; }
.jsud-disc-pictogram--modal { width: 64px; height: 64px; flex: 0 0 auto; margin: 0; }
.jsud-disc-name { margin: 0; font-size: 13px; font-weight: 600; }

.jsud-disc-modal-header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.jsud-disc-category { margin: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--jsud-navy); }
.jsud-disc-modal-cities { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.jsud-disc-venue-box { cursor: default; margin-bottom: 8px; }
.jsud-disc-venue-box:hover { box-shadow: none; }

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

  /* Swipeable carousel: each page is its own flex-wrap box (2 cards per
     row). Flexbox rows aren't shared tracks like grid rows/columns are, so
     a page with fewer cards than a full page just wraps to fewer rows on
     its own — cards fill left-to-right first (2 sit side by side instead
     of stacking), and there's never a reserved blank cell. Density toggle
     (Ver más) just changes how many cards go in a page (4 vs 8, i.e. 2 vs
     4 rows), via JS re-chunking (see disciplinas-render.js). */
  .jsud-disc-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-disc-grid::-webkit-scrollbar { display: none; }
  .jsud-disc-grid .jsud-hcarousel-page {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .jsud-disc-grid .jsud-hcarousel-page .jsud-disc-card {
    flex: 0 0 calc(50% - 5px);
  }
}