/* cat-tag-override.css
   Load AFTER index.css.

   index.css defines .cat-tag / .all-links as a horizontal-scroll row
   (this is intentional UX — swipe between groups of cards, same pattern
   as the items swiper) and .links-swipper-slide as a flex-column inside
   that row. The squished look came from .links-swipper-slide staying a
   flex-column while holding up to `itemsPerRow` buttons at width:
   max-content — they never wrapped, they just kept growing sideways.

   Fix: keep .cat-tag / .all-links as the horizontal scroller (unchanged
   from index.css), but turn each .links-swipper-slide into its own small
   grid, so every "page" of the swipe is a clean 2-column (or N-column)
   block of cards rather than a single squeezed row. */

/* Fill DOWN first (grid-auto-flow: column): the grid packs cards into
   rows top-to-bottom, and only starts a new column (pushing the slide
   wider) once the row budget for that column is full. Combined with
   .cat-tag's existing horizontal scroll, this gives "wrap into as many
   rows as fit without vertical scroll, then continue sideways" on both
   mobile and desktop — driven by card size vs. container height, not
   by any item-count grouping from the server. Requires the EJS to
   render entries as ONE flat .links-swipper-slide (see
   EJS-EDIT-2-flatten-grid.txt) rather than pre-split slide groups. */
.links-swipper-slide {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-auto-columns: 120px;
  gap: 0.9rem;
  width: max-content;
  height: 100%;
  align-content: start;
  padding-bottom: 10px;
  padding-right: 10px;
}

/* Desktop: bigger container (.cat-tag is 80vh), so more rows fit before
   horizontal scroll needs to take over. Card width matches mobile per
   your last request — same physical card size, just more of them fit
   vertically before wrapping sideways. */
@media (min-width: 992px) {
  .links-swipper-slide {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-auto-columns: 200px;
    height: 76vh;
  }
}

@media (max-width: 480px) {
  .links-swipper-slide {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    grid-auto-columns: 170px;
  }
}

/* Card shell — inline style already sets background-color/color per entry,
   this only restructures layout so text sits below the image. */
.cat-tag-btn {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  width: 100% !important;   /* index.css sets width: max-content on this selector; fills the fixed grid-auto-columns track */
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border: none;
  border-radius: 14px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.cat-tag-btn:hover,
.cat-tag-btn:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5);
}

.cat-tag-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.cat-tag-img-wrap {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #ffffff;
}

.cat-tag-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.cat-tag-btn:hover .cat-tag-img {
  transform: scale(1.06);
}

/* Text block sits under the image, keeps the color-coded background/text
   the EJS already assigns per entry. */
.cat-tag-btn p {
  margin: 0;
  padding: 0.15rem 0.75rem;
}

.cat-tag-btn p:first-of-type {
  font-weight: 700;
  font-size: 0.95rem;
  padding-top: 0.55rem;
}

.cat-tag-btn p:last-of-type {
  font-size: 0.78rem;
  opacity: 0.85;
  padding-bottom: 0.6rem;
}

/* Buttons without a resolved image (has-image not set) skip the empty
   gap the aspect-ratio box would otherwise leave. */
.cat-tag-btn:not(.has-image) .cat-tag-img-wrap {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cat-tag-btn,
  .cat-tag-img {
    transition: none;
  }
}