/* ── JBL Catalog Grid ──────────────────────────────────────── */
/* Dense product-catalog feel. ~6 cols, variable rows.        */
/* Fills viewport. 1px black borders between cells.           */

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: var(--color-black);
}

/* ── Vignette — cool gray, fades to black at edges ─────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 500;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent                  0%,
    rgba(180, 180, 175, 0.04)   62%,
    rgba(100, 100,  95, 0.20)   84%,
    rgba( 20,  20,  18, 0.50)  100%
  );
  mix-blend-mode: multiply;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* overridden by squarify() */
  grid-template-rows: repeat(6, 1fr);    /* overridden by squarify() */
  grid-auto-flow: dense;                 /* outer blank cells fill all gaps */
  gap: var(--grid-gap);
  background-color: var(--color-black);
  width: 100%;
  height: 100vh;
}

/* ── Cell base ──────────────────────────────────────────── */
.cell {
  background-color: var(--color-white);
  padding: 14px 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border-right:  1px dotted rgba(30, 30, 30, 0.35);
  border-bottom: 1px dotted rgba(30, 30, 30, 0.35);
}

/* Edge borders removed via JS getBoundingClientRect in squarify() */

.cell[data-href] {
  cursor: pointer;
}

/* ── Cell number ────────────────────────────────────────── */
.cell-number {
  display: none;
}

/* ── Spanning ───────────────────────────────────────────── */
.span-2c { grid-column: span 2; }
.span-3c { grid-column: span 3; }
.span-2r { grid-row: span 2; }
.span-2c2r { grid-column: span 2; grid-row: span 2; }