/* Gedeeld tussen de tablet en de grid-designer in de admin, zodat de preview
   in de designer er precies zo uitziet als wat er in de bak hangt.
   Themaneutraal: de host zet --tile-bg, --tile-border en --tile-text. */

.grid {
  /* De tegels schalen mee met de breedte van dit vlak, niet met het scherm.
     Zo blijft 12 kolommen leesbaar en 4 kolommen niet lachwekkend groot. */
  container-type: inline-size;

  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  /* grid-template-rows wordt per pagina gezet in renderPage(): een tussenkopje
     krijgt een eigen dunne rij, tegelrijen delen de rest. */

  /* Minder lucht naarmate er meer kolommen zijn. */
  gap: max(4px, calc(15px - var(--cols, 4) * 0.65px));

  /* Vult de hoogte, maar tegels worden nooit absurd hoog bij weinig rijen.
     Daarmee past 12 x 9 op een scherm zonder te scrollen. */
  height: 100%;
  /* De limiet is relatief aan de breedte van het vlak, niet een vast aantal
     pixels. Zo klopt de verhouding in de designer-preview net zo goed als op
     de tablet zelf, zonder een tweede getal om bij te houden. */
  max-height: min(100%, calc(var(--rows, 1) * var(--tile-cap, 13cqi)));
}

.tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35em;

  border: 1px solid var(--tile-border, #dfe3e8);
  border-radius: clamp(6px, calc(60cqi / var(--cols, 4) / 6), 14px);
  background-color: var(--tile-bg, #f1f3f5);
  background-size: cover;
  background-position: center;

  font-family: inherit;
  color: var(--tile-text, #1c2530);
  text-align: center;
  cursor: pointer;

  /* Touchscreen: geen tekstselectie, geen dubbeltik-zoom, geen tap-highlight. */
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;

  transition: transform .08s ease, filter .08s ease;
}

.tile:active { transform: scale(.97); filter: brightness(.94); }

.tile-icon {
  font-size: clamp(13px, calc(34cqi / var(--cols, 4)), 44px);
  line-height: 1;
}

/* Lijnicoon en eigen afbeelding schalen mee met de tegel, net als een emoji. */
.tile-icon-svg {
  width: clamp(15px, calc(38cqi / var(--cols, 4)), 46px);
  height: auto;
}
.tile-icon-img {
  width: clamp(16px, calc(44cqi / var(--cols, 4)), 64px);
  max-height: 46%;
  object-fit: contain;
}

.tile-label {
  padding: 0 .5em;
  font-size: clamp(9px, calc(16cqi / var(--cols, 4)), 18px);
  font-weight: 600;
  line-height: 1.2;
  /* Lange titels mogen de tegel niet uit elkaar duwen. */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

/* Foto-achtergrond: leesbaarheid gaat voor, dus witte tekst op een donkere
   sluier in plaats van hopen dat de foto meewerkt. */
.tile-image { color: #fff; border-color: transparent; }
.tile-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .66), rgb(0 0 0 / .14));
}
.tile-image .tile-icon,
.tile-image .tile-label {
  position: relative;
  text-shadow: 0 1px 3px rgb(0 0 0 / .55);
}

/* Donkere effen kleur krijgt witte tekst. Zie isDark() in render.js. */
.tile-dark { color: #fff; border-color: transparent; }

/* Speelt nu */
.tile[aria-current="true"] {
  outline: 3px solid var(--tile-live, #16a34a);
  outline-offset: -3px;
}

/* Lege plek in het raster: houdt de ruimte vast zodat de rest niet opschuift. */
.tile-blank { visibility: hidden; }

/* Tussenkopje: een dunne regel over de volle breedte die het raster opdeelt.
   Bewust geen tegel, zodat het niet uitnodigt om erop te tikken. */
.grid-header {
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .25em .2em;
  font-size: clamp(11px, calc(13cqi / var(--cols, 4)), 15px);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--header-text, #6b7785);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grid-header::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--header-line, #dfe3e8);
}