/**
 * pysiectiles - "Zacznij od kategorii". Namespace .pysiec-tiles*.
 * 1:1 z surowego pliku źródłowego makiety (Pysiec Sklep.dc.html, linie 255-299),
 * tokeny z assets/css/custom.css.
 */

.pysiec-tiles {
  /* .page-content--home (rodzic, native Hummingbird) to display:grid - bez jawnego
     width:100% dziecko potrafi skurczyć się do ciasnego "fit-content" przez znany babol
     interakcji CSS Grid: repeat(auto-fit, minmax(...)) wewnątrz elementu bez jawnej,
     odziedziczonej szerokości. .pysiec-hero unikał tego przez przypadek (ma
     overflow:hidden, które wymusza definitywną szerokość). Znalezione live, sesja
     2026-09-16 - user zauważył że sekcje nie są wyrównane do tej samej lewej krawędzi.
     Padding boczny POPRAWIONY (sesja 2026-09-16, przy okazji tego samego znaleziska
     dla Bestsellery w shelf.css): dosłowna wartość z pliku źródłowego makiety (linia
     255) to clamp(16px,4vw,32px), NIE clamp(32px,8vw,120px) - ta druga dawała kafelki
     226×251px, użytkownik zmierzył w DevTools na makiecie 269×276.58px. Przy
     max-width:1200 i padding 32px/stronę kontener ma 1136px - to samo co Bestsellery.
     UWAGA: ten komentarz mówił "POPRAWIONY" już w sesji 2026-09-16, ale sama wartość
     padding NIGDY faktycznie się nie zmieniła - dopiero teraz naprawione naprawdę
     (sesja 2026-09-17, user ponownie zauważył zbyt wąski środek). */
  width: 100%;
  min-width: 0;
  max-width: 1200px;
  margin: 0 auto;
  /* Górny padding pomniejszony (32px -> 16px na szerokich ekranach) - razem z
     przyciętym dolnym paddingiem .pysiec-hero (hero.css), user: "zmniejsz gapa
     między hero a kategoriami" (sesja 2026-09-25). */
  padding: clamp(8px, 1.5vw, 16px) clamp(16px, 4vw, 32px) clamp(32px, 5vw, 56px);
  box-sizing: border-box;
}

.pysiec-tiles__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.pysiec-tiles__title {
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: clamp(24px, 3.4vw, 34px);
  letter-spacing: -.02em;
  color: var(--pysiec-text, #1a1a18);
  margin: 0;
}

/* "Wszystkie kategorie" jako przycisk w stylu strony (obrys espresso, piguła, wypełnia się
   marką na hover) - wcześniej goły brązowy link, na beżowym tle prawie niewidoczny. */
.pysiec-tiles__all {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--pysiec-espresso, #3e2f23);
  border-radius: var(--pysiec-radius-pill, 999px);
  font-weight: 700;
  font-size: 14px;
  color: var(--pysiec-espresso, #3e2f23);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}

.pysiec-tiles__all:hover,
.pysiec-tiles__all:focus-visible {
  background: var(--pysiec-brand-hover, #704f27);
  border-color: var(--pysiec-brand-hover, #704f27);
  color: #fff;
}

.pysiec-tiles__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(12px, 2vw, 20px);
}

.pysiec-tiles__tile {
  display: block;
  position: relative;
  border-radius: var(--pysiec-radius-xl, 22px);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--pysiec-line-20, rgba(62, 47, 35, .2));
  text-decoration: none;
  color: inherit;
}

.pysiec-tiles__tile:hover,
.pysiec-tiles__tile:focus-visible {
  border-color: var(--pysiec-espresso, #3e2f23);
}

.pysiec-tiles__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--pysiec-radius-pill, 999px);
}

.pysiec-tiles__badge--new {
  background: var(--pysiec-accent-green, #8fa35c);
  color: #fff;
}

.pysiec-tiles__badge--sale {
  background: var(--pysiec-accent-pink, #d9a7a0);
  color: var(--pysiec-espresso, #3e2f23);
}

.pysiec-tiles__image {
  display: block;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    135deg,
    var(--pysiec-cream, #e8dcc5) 0 10px,
    #f0e7d5 10px 20px
  );
}

.pysiec-tiles__image--photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.pysiec-tiles__body {
  display: block;
  /* Dolny padding zwiększony z 16px do 46px - na żądanie użytkownika, żeby kafelek
     wydłużyć z 226×251 na ~226×281 (sesja 2026-09-16), niezależnie od dosłownej
     wartości z makiety. */
  padding: 14px 16px 46px;
}

.pysiec-tiles__label {
  display: block;
  font-family: var(--pysiec-font-heading, 'Nunito', sans-serif);
  font-weight: 800;
  font-size: 19px;
  color: var(--pysiec-text, #1a1a18);
}

.pysiec-tiles__subtitle {
  display: block;
  font-size: 13px;
  color: var(--pysiec-espresso, #3e2f23);
  opacity: .75;
  margin-top: 3px;
}

/**
 * Na telefonie (nie tablet - auto-fit z minmax(200px,1fr) daje tam już sensowne
 * 2-3 kolumny) - najpierw wypróbowane 4 kafelki w jednym rzędzie (sesja
 * 2026-09-20), ale przy ~375-430px wychodziło ~85-100px/kafelek: za ciasno na
 * czytelny label/badge nawet po zmniejszeniu (zgłoszone przez użytkownika
 * zrzutem ekranu - "nie siedzi"). Zamienione na 2×2: przy tej samej szerokości
 * to ~185-200px/kafelek, więc zostają domyślne rozmiary (żaden dodatkowy
 * override poza samą liczbą kolumn). Breakpoint 767.98px (Bootstrap sm/md),
 * inny niż reszta motywu (991.98px) celowo - to dotyczy tylko telefonów, nie
 * tabletów.
 */
@media (max-width: 767.98px) {
  .pysiec-tiles__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}