/* Home component: category mosaic - machined editorial edition.
   Cards on the photographed band: a 7/5 white shot stage (the product-card
   frame the client asked for), the category name under it, a coded index chip
   (CSS counter) on the stage. The stage cycles through shots from the same
   category. */

.categories-section {
  position: relative;
  padding: var(--space-16) 0;
  border-bottom: 1px solid var(--ds-border);
  background: var(--ds-bg);
}

/* ---- fixed architectural backdrop, veiled per theme so the heading and the
   mosaic stay readable (the same concept as the rituals and corporate bands).
   The finishes band directly above is deliberately photo-free - one of the
   two neighbouring bands carries the photograph, and it is this one. ---- */
.categories-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../../../images/lifestyle/categories-backdrop.jpg') center / cover fixed;
}

/* veil lives on its own layer so the per-theme brightness tuning applies to
   the photograph only - filtering a combined layer also lightens the veil
   and cancels itself out. It is a light veil: the photograph is the point of
   this band, and a heavy scrim turned the top of it into a black wall on
   phones. */
.categories-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ds-bg) 40%, transparent) 0%,
    color-mix(in srgb, var(--ds-bg) 24%, transparent) 46%,
    color-mix(in srgb, var(--ds-bg) 20%, transparent) 100%);
}

[data-theme="light"] .categories-section::before {
  /* the source photo is dark; a *gentle* lift keeps it readable on a pale
     page - the 1.55 lift washed the photograph out into a grey nothing */
  filter: brightness(1.3) contrast(0.95) saturate(0.9);
}

[data-theme="light"] .categories-section::after {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ds-bg) 32%, transparent) 0%,
    color-mix(in srgb, var(--ds-bg) 18%, transparent) 46%,
    color-mix(in srgb, var(--ds-bg) 14%, transparent) 100%);
}

/* phones: the mosaic covers most of the band, so every percent of veil is
   visible darkness - keep the photograph ahead of it */
@media (max-width: 640px) {
  .categories-section::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--ds-bg) 26%, transparent) 0%,
      color-mix(in srgb, var(--ds-bg) 16%, transparent) 46%,
      color-mix(in srgb, var(--ds-bg) 12%, transparent) 100%);
  }

  [data-theme="light"] .categories-section::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--ds-bg) 22%, transparent) 0%,
      color-mix(in srgb, var(--ds-bg) 14%, transparent) 46%,
      color-mix(in srgb, var(--ds-bg) 10%, transparent) 100%);
  }
}

.categories-section > .container { position: relative; z-index: 1; }

/* iOS ignores background-attachment: fixed and would jitter, so fall back */
@media (hover: none) {
  .categories-section::before,
  [data-theme="light"] .categories-section::before { background-attachment: scroll; }
}

.category-mosaic {
  counter-reset: cat;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

.category-card-monolith {
  counter-increment: cat;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
  text-decoration: none;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.category-card-monolith:hover {
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--ds-primary) 50%, var(--ds-border));
}

/* the shot stage: the product-card frame - 7/5, white, `contain`. The white is
   not decoration: these photographs are cut-outs shot on pure white, so a
   white stage makes the letterboxing around a contain-fit image disappear. */
.category-card-stage {
  position: relative;
  aspect-ratio: 7 / 5;
  background: #ffffff;
  border-bottom: 1px solid var(--ds-border);
  overflow: hidden;
}

.category-card-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  opacity: 0;
  transition: opacity 420ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.category-card-shot.is-on { opacity: 1; }

.category-card-monolith:hover .category-card-shot.is-on { transform: scale(1.045); }

/* coded index chip on the top-start edge of the stage */
.category-card-monolith::after {
  content: counter(cat, decimal-leading-zero);
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--lu-neutral-0);
  background: color-mix(in srgb, var(--lu-ink-950) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--lu-neutral-0) 22%, transparent);
  border-radius: 6px;
  padding: 4px 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* the name sits under the stage, on the card surface (not over a scrim) */
.category-card-info {
  position: relative;
  z-index: 2;
  padding: var(--space-5) var(--space-4) var(--space-4);
}

.category-card-info h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--ds-text);
  line-height: 1.2;
}

.category-card-info p {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ds-text-muted);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .category-mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .category-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* phones: one card per row, full width - the same framing the product cards
   use, and the stage is a little shorter so five of them still scan quickly */
@media (max-width: 640px) {
  .categories-section { padding: var(--space-10) 0; }
  .category-mosaic { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .category-card-stage { aspect-ratio: 3 / 2; }
  .category-card-info { padding: var(--space-4); }
}

@media (max-width: 420px) {
  .category-card-stage { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .category-card-monolith { transition: none; }
  .category-card-shot { transition: none; }
}

/* ---- responsive backdrop -------------------------------------------------
   The full-size photograph is 1584 px wide to cover a desktop viewport, but a
   phone was downloading all of it for a ~390 px screen. tools/media_audit/
   optimize_images.py writes downscaled JPEG renditions; naming a JPEG (not a
   WebP) here keeps the rule working for every browser, because .htaccess
   serves the matching .jpg.webp twin when one exists. */
@media (max-width: 1440px) {
  .categories-section::before {
    background-image: url('../../../images/lifestyle/categories-backdrop.jpg@1440w.jpg');
  }
}

@media (max-width: 760px) {
  .categories-section::before {
    background-image: url('../../../images/lifestyle/categories-backdrop.jpg@760w.jpg');
  }
}