/* ---------------------------------------------------------------
   Category section — image + name cards.
   Horizontal snap-scroller on small screens, grid on desktop, so
   every category is visible at once where there's room for it.
   --------------------------------------------------------------- */

.jb-cats { padding-block: var(--jb-s7) var(--jb-s7); }

.jb-cats__title {
  margin: 0 0 var(--jb-s6);
  max-width: 22ch;
  font-family: var(--jb-font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: var(--jb-display-weight);
  line-height: 1.15;
  letter-spacing: var(--jb-display-tracking);
  color: var(--jb-ink);
  opacity: 0;
  animation: slide-up-from-bottom .5s ease forwards .6s;
}
.jb-cats__title em {
  font-style: italic;
  color: var(--jb-ink);
}
.jb-cats__mark {
  display: inline-block;
  margin-inline: 4px;
  color: var(--jb-amber);
}

/* ---------- Row ---------- */

.jb-cats__row {
  display: flex;
  gap: var(--jb-s4);
  min-width: 100%;
  margin: 0;
  padding: 0 var(--jb-s4) var(--jb-s2);
  /* Bleed to the screen edges on phones so cards run off the side and
     the row reads as scrollable. */
  margin-inline: calc(-1 * var(--jb-s4));
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  opacity: 0;
  animation: fade-in .4s ease forwards 1.2s;
  /* Without this the snap engine aligns the first card's edge to the
     container edge and swallows the padding above, leaving the card flush
     against the screen while the heading stays indented. */
  scroll-padding-inline: var(--jb-s4);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jb-cats__row::-webkit-scrollbar { display: none; }

.jb-cats__item {
  flex: 0 0 62%;
  max-width: 260px;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .jb-cats__item { flex-basis: 40%; }
}

/* Desktop: no scrolling — show them all. A catalog benefits more from
   every category being visible than from a carousel. */
@media (min-width: 900px) {
  .jb-cats__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--jb-s5);
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  .jb-cats__item { flex: none; max-width: none; }
}
@media (min-width: 1100px) {
  .jb-cats__row { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Card ---------- */

.jb-cat {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  background: var(--jb-ink-2);
  isolation: isolate;
  transition: box-shadow .2s ease, transform .2s ease;
}
.jb-cat:hover {
  box-shadow: 0 12px 28px rgba(16, 21, 27, .16);
  transform: translateY(-2px);
}

.jb-cat__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .6, .3, 1);
}
.jb-cat:hover .jb-cat__img { transform: scale(1.06); }

/* Scrim: category names are white, and the image underneath is whatever the
   client uploaded — this keeps the text readable regardless. */
.jb-cat::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(16, 21, 27, .86) 0%,
    rgba(16, 21, 27, .52) 34%,
    rgba(16, 21, 27, .06) 62%,
    rgba(16, 21, 27, .28) 100%
  );
}

.jb-cat__body {
  position: absolute;
  inset-inline: 10px;
  bottom: 10px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--jb-s3) var(--jb-s3) var(--jb-s4);
  text-align: center;
  color: #fff;
}

.jb-cat__eyebrow {
  font-size: var(--jb-fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
}

.jb-cat__name {
  font-family: var(--jb-font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  font-weight: var(--jb-display-weight);
  font-style: italic;
  line-height: 1.15;
  text-wrap: balance;
}

/* Arrow only, frosted, pinned to the top-right corner of the card. */
.jb-cat__btn {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.jb-cat:hover .jb-cat__btn {
  background: var(--jb-amber);
  border-color: var(--jb-amber);
  color: var(--jb-ink);
  transform: translateX(2px);
}

/* Without backdrop-filter the frosted look collapses to near-invisible;
   fall back to a solid translucent disc. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .jb-cat__btn { background: rgba(16, 21, 27, .55); }
}

/* The whole card is the link, so give it one visible focus ring rather
   than none. */
.jb-cat:focus-visible {
  outline: 3px solid var(--jb-amber);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .jb-cat__img, .jb-cat__btn { transition: none; }
  .jb-cat:hover .jb-cat__img { transform: none; }
}