/**
 * Category tiles ([product-categories]): the featured Product Collection
 * strip's look (see collection.css) for categories - heading row with the
 * prev/next arrows, square photo tiles with hairline gaps, name / count
 * caption underneath.
 */

.mm-cats {
  --mm-ink: var(--wp--preset--color--mm-hero, #3a3e35);
  --mm-label: #a5a096;
  --mm-tile-gap: 3px;
  --mm-rail-w: clamp(58px, 7vw, 84px);
  --mm-head-gap: 24px;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* --- Heading row: script + title left, arrows right -------------- */
.mm-cats__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(24px, 4vh, 32px);
}
.mm-cats__titles { display: flex; align-items: baseline; gap: 18px; min-width: 0; }
.mm-cats__script {
  font-family: "Mistgak Signature", var(--mm-font);
  font-size: max(30px, var(--wp--preset--font-size--large, 1.5rem));
  line-height: 1;
  color: var(--wp--preset--color--mm-clay, #bc8c78);
}
.mm-cats__heading {
  margin: 0;
  font-size: 48px;
  font-weight: 200;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--mm-ink);
}
.mm-cats__nav { display: flex; gap: 24px; flex: none; }   /* same gap as the collection block's arrows */
.mm-cats__arrow {                                            /* same control as the carousels' arrows */
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);                     /* reads white on coloured sections too */
  color: var(--mm-ink) !important;                           /* dark arrow whatever the section's text colour */
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}
.mm-cats__arrow:hover,
.mm-cats__arrow:focus-visible { background: #fff; }
.mm-cats__arrow[disabled] { opacity: 0.4; cursor: default; }
.mm-cats__arrow::before,
.mm-cats__go {                                               /* the site's arrow */
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mm-cats__arrow--prev::before { transform: scaleX(-1); }

/* No heading of its own: the arrows lift onto the page's heading row above,
   at the right-hand end (the section's padding already clears the rail). */
.mm-cats--no-head > .mm-cats__nav {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--mm-head-gap) + 12px);
  z-index: 2;
}

/* bleed="right": the strip runs through the section's right padding to the
   rail (category-tiles.js measures the distance and sets --mm-bleed); the
   arrows stay on the content edge and the trailing spacer is not needed. */
.mm-cats--bleed-right { width: calc(100% + var(--mm-bleed, 0px)); max-width: none; }   /* widened, not margined: constrained layouts force margins with !important */
.mm-cats--bleed-right > .mm-cats__nav { right: var(--mm-bleed, 0px); }
.mm-cats--bleed-right .mm-cats__strip::after { display: none; }

/* --- The strip ----------------------------------------------------- */
.mm-cats__strip {
  container-type: inline-size;                               /* the tiles count themselves from its width */
  display: flex;
  gap: var(--mm-tile-gap);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.mm-cats__strip::-webkit-scrollbar { display: none; }
.mm-cats__strip::after { content: ""; flex: 0 0 var(--mm-rail-w); }  /* room to scroll the last tile clear of the rail */
/* Tiles in view: fractional so the next one peeks in. A `columns` attribute
   on the shortcode sets --mm-tiles-set on the strip and wins at every width. */
.mm-cats__tile { --mm-tiles: 3.4; }
@container (max-width: 1100px) { .mm-cats__tile { --mm-tiles: 2.4; } }
@container (max-width: 800px)  { .mm-cats__tile { --mm-tiles: 1.6; } }
@container (max-width: 520px)  { .mm-cats__tile { --mm-tiles: 1.25; } }

.mm-cats__tile {
  --n: var(--mm-tiles-set, var(--mm-tiles));
  flex: 0 0 calc((100% - var(--mm-tile-gap) * (var(--n) - 1)) / var(--n));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 14px;
  position: relative;                                        /* keeps the screen-reader text inside the strip (it escaped and widened the page) */
  background: var(--wp--preset--color--mm-base, #f2f1ee);
  color: var(--mm-ink) !important;                           /* the tile is bone whatever the section's link colour */
  text-decoration: none !important;
  scroll-snap-align: start;
  outline-offset: -3px;
}
.mm-cats__frame {
  grid-column: 1 / -1;
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;                                       /* square, like the product tiles */
  overflow: hidden;
  background: var(--wp--preset--color--mm-greige, #eae9e5);
}
.mm-cats__img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mm-cats__tile:hover .mm-cats__img,
.mm-cats__tile:focus-visible .mm-cats__img { transform: scale(1.045); }

/* Caption: name left, count right, same breathing room above and below the text */
.mm-cats__name {
  grid-column: 1;
  padding: 18px 0 18px 22px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.15;
  color: var(--mm-ink) !important;
  transition: color 0.2s ease;
}
.mm-cats__tile:hover .mm-cats__name,
.mm-cats__tile:focus-visible .mm-cats__name { color: var(--wp--preset--color--mm-clay, #bc8c78) !important; }
.mm-cats__count {
  grid-column: 2;
  align-self: center;                                        /* centred on the name */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--mm-ink) !important;
}
.mm-cats__go { width: 12px; height: 12px; transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.mm-cats__tile:hover .mm-cats__go,
.mm-cats__tile:focus-visible .mm-cats__go { transform: translateX(4px); }

/* In a column (a Spectra container that ends with the tiles) they sit at the
   bottom, level with whatever is beside them. */
.wp-block-spectra-container:has(> .mm-cats:last-child) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* --- Tablet / phone ------------------------------------------------ */
@media (max-width: 767px) {
  .mm-cats__heading { font-size: clamp(32px, 9vw, 40px); }
  .mm-cats__titles { flex-direction: column; gap: 6px; }
  .mm-cats__strip::after { display: none; }
  .mm-cats__name { padding: 14px 0 14px 14px; font-size: 15px; }
  .mm-cats__count { padding: 0 14px 0 0; }
}