/* V2 Kategorie (sections-v2/v2-kategorie.mjs). Ramka zdjęcia i powiększenie na hover z prymitywów
   css/v2/layout.css (.v2-zoom, .v2-media); tu siatka i pigułka podpisu.
   Desktop: 6 kolumn, Krzesła i Stoły 2×2, cztery kafle 4:5 obok, trzy szerokie pod spodem. Wysokość rzędu
   liczona z szerokości kolumny (jednostki kontenera), więc duże kafle wypełniają dokładnie dwa rzędy małych.
   Zdjęcie jest absolutne w ramce: kadr trzyma ramka, a pionowe zdjęcie krzesła nie rozpycha rzędu. */

.v2-kategorie .v2-container {
  container-type: inline-size;
}

.v2-kategorie__grid {
  --v2-kat-col: calc((100cqi - 5 * var(--v2-gap)) / 6);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: calc(var(--v2-kat-col) * 1.25);
  grid-auto-flow: row dense;
  gap: var(--v2-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2-kategorie__item--big {
  grid-column: span 2;
  grid-row: span 2;
}

.v2-kategorie__item--wide {
  grid-column: span 2;
}

.v2-kategorie__tile {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--v2-r-card);
  color: var(--v2-ink);
  text-decoration: none;
}

.v2-kategorie__media {
  height: 100%;
}

.v2-kategorie__media img {
  position: absolute;
  inset: 0;
}

/* ---------- Pigułka podpisu: chłodna jasna szarość z odcieniem błękitu, nazwa w kroju nagłówków ----------
   Jedna wielkość pigułki na wszystkich kaflach (także na dużych Krzesłach i Stołach), 12 px od rogu. */

.v2-kategorie__name {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 9px 14px 9px 16px;
  border-radius: var(--v2-r-control);
  background: var(--v2-pack);
  font-family: var(--gs-font-display);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-wrap: balance;
  transition: background-color var(--v2-t-control);
}

.v2-kategorie__last {
  white-space: nowrap;
}

.v2-kategorie__go,
.v2-kategorie__go .gs-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
}

/* Strzałka przelatuje (.v2-fly, layout.css) i ciemnieje razem z jaśniejącą pigułką. */
.v2-kategorie__go {
  margin-left: 6px;
  vertical-align: -2px;
  color: var(--v2-muted);
  transition: color var(--v2-t-control);
}

@media (hover: hover) {
  .v2-kategorie__tile:hover .v2-kategorie__name {
    background: var(--gs-bg);
  }

  .v2-kategorie__tile:hover .v2-kategorie__go {
    color: var(--v2-ink);
  }
}

.v2-kategorie__tile:focus-visible .v2-kategorie__go {
  color: var(--v2-ink);
}

/* 1024–1279: kafle 4:5 mają ~140 px, więc wszystkie pigułki są mniejsze, a na wąskich nie ma strzałki. */
@media (max-width: 1279px) {
  .v2-kategorie__name {
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 6px 12px;
    font-size: var(--v2-small-size);
    line-height: 20px;
  }

  .v2-kategorie__item--side .v2-kategorie__go {
    display: none;
  }
}

/* ---------- Tablet: 12 kolumn, 2 duże, 4 pionowe, 3 szerokie; wysokość z proporcji ramki ---------- */

@media (max-width: 1023px) {
  .v2-kategorie__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .v2-kategorie__item--big {
    grid-column: span 6;
    grid-row: auto;
  }

  .v2-kategorie__item--side {
    grid-column: span 3;
  }

  .v2-kategorie__item--wide {
    grid-column: span 4;
  }

  .v2-kategorie__media {
    height: auto;
    aspect-ratio: 4 / 5;
  }

  .v2-kategorie__item--big .v2-kategorie__media {
    aspect-ratio: 6 / 7;
  }

  .v2-kategorie__item--wide .v2-kategorie__media {
    aspect-ratio: 4 / 3;
  }
}

/* ---------- Mobile: 2 duże, Zestawy na całą szerokość, reszta w trzech kolumnach z podpisem pod zdjęciem ---------- */

@media (max-width: 767px) {
  .v2-kategorie__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: 20px;
  }

  .v2-kategorie__item--big {
    grid-column: span 3;
  }

  .v2-kategorie__item--side,
  .v2-kategorie__item--wide {
    grid-column: span 2;
  }

  .v2-kategorie__item--lead {
    grid-column: 1 / -1;
  }

  .v2-kategorie__item--big .v2-kategorie__media,
  .v2-kategorie__item--wide .v2-kategorie__media {
    aspect-ratio: 4 / 5;
  }

  .v2-kategorie__item--lead .v2-kategorie__media {
    aspect-ratio: 16 / 9;
  }

  .v2-kategorie__item--big .v2-kategorie__name,
  .v2-kategorie__item--lead .v2-kategorie__name {
    left: 12px;
    bottom: 12px;
    max-width: calc(100% - 24px);
    padding: 7px 12px 7px 14px;
    font-size: 16px;
    line-height: 22px;
  }

  .v2-kategorie__item--lead .v2-kategorie__go {
    display: inline-block;
  }

  /* Wąskie kafle (110 px w trzech kolumnach): podpis pod zdjęciem, bez pigułki, która zasłoniłaby pół zdjęcia. */
  .v2-kategorie__item:not(.v2-kategorie__item--big, .v2-kategorie__item--lead) .v2-kategorie__name {
    position: static;
    display: block;
    max-width: none;
    margin-top: 8px;
    padding: 0;
    border-radius: 0;
    background: none;
    font-size: var(--v2-small-size);
    line-height: 20px;
  }

  .v2-kategorie__item:not(.v2-kategorie__item--big, .v2-kategorie__item--lead) .v2-kategorie__go {
    display: none;
  }
}