/* =================================================================
   TryVinci – Categories (Dla kogo)
   Layout mirrors why-fitness exactly:
     • tv-carousel-track shared class on the scrollable div
     • no flex on the section
     • header-inner: text-align center (not flex column)
     • controls: margin-top, same as tv-why__controls
   ================================================================= */

/* ── Shared carousel utilities (self-contained copy, same as why-fitness) ── */
/* Defined here so the block works even without why-fitness on the page.      */
.tv-carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 3rem;
  padding-top: 1rem;
  cursor: grab;
}
.tv-carousel-track.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-snap-type: none;
}
.tv-carousel-snap {
  scroll-snap-align: center;
}

/* Nav controls (dots + round prev/next) — identical values to why-fitness,
   copied here so the single nav set is styled even without why-fitness on the page. */
.tv-carousel-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.tv-carousel-dots {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.tv-carousel-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: #3f3f46;
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    width 0.3s,
    background 0.3s;
}
.tv-carousel-dot.is-active {
  width: 2rem;
  background: #ef6a23;
}
.tv-carousel-arrows {
  display: flex;
  gap: 0.75rem;
}
.tv-carousel-arrow {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #27272a;
  border: 1px solid #3f3f46;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.tv-carousel-arrow:hover {
  background: #3f3f46;
}

/* ── Outer wrapper (mirrors tv-why-wrapper) ── */
.tv-cats-wrapper {
  background: #fff;
  position: relative;
}

/* ── Section ── */
/* Proste (niezaokrąglone) rogi — świadoma różnica względem why-fitness,
   którego sekcja ma zaokrąglony górny brzeg (50px/80px). Tu: 0 na wszystkich
   rogach, jednolite białe tło na całej szerokości (tło z .tv-cats-wrapper). */
.tv-cats {
  padding: 6rem 0 10rem;
  position: relative;
  z-index: 1;
  border-radius: 0;
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
@media (min-width: 768px) {
  .tv-cats {
    padding: 10rem 0 10rem;
  }
}

/* ── Header ── */
.tv-cats__header {
  position: relative;
  z-index: 2;
}
.tv-cats__header-inner {
  max-width: 87.5rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
  margin-bottom: 0;   /* odstęp strzałki→karty przeniesiony na .tv-cats__track-wrap (margin-top) */
}
/* nagłówek: scoped (wygrywa z globalnym .tv-section-heading); eksport: md:mb-4 (0/16px) */
.tv-cats .tv-section-heading {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .tv-cats .tv-section-heading {
    margin-bottom: 1rem;
  }
}

/* ── Controls: identical layout to tv-why__controls ── */
.tv-cats__controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 2rem;   /* podtytuł → rząd kropek = X = 32px (kropki na środku) */
}
/* kropki → strzałki = X = 32px (margin-top na rzędzie strzałek, gap kontenera = 0) */
.tv-cats__controls .tv-carousel-arrows { margin-top: 2rem; }

/* ── Track wrap (mirrors tv-why__track-wrap: overflow:hidden prevents page h-scroll) ── */
.tv-cats__track-wrap {
  position: relative;
  max-width: 87.5rem;
  margin: 3rem auto 0;   /* strzałki → rząd kart = 48px */
  overflow: hidden;
}

/* Boczna biała poświata/fade (1:1 z eksportem: hidden md:block, w-12=3rem,
   bottom-12=3rem, gradient white → white/90 → transparent). Tylko efekt —
   krawędziowe karty i ich cienie wtapiają się zamiast być twardo ucięte. */
.tv-cats__track-wrap::before,
.tv-cats__track-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 3rem; /* bottom-12 */
  width: 3rem; /* w-12 */
  z-index: 10;
  pointer-events: none;
  display: none;
}
@media (min-width: 768px) {
  .tv-cats__track-wrap::before {
    display: block;
    left: 0;
    background: linear-gradient(
      to right,
      #fff,
      rgba(255, 255, 255, 0.9),
      transparent
    );
  }
  .tv-cats__track-wrap::after {
    display: block;
    right: 0;
    width: 8rem; /* w-32 — szersza prawa poświata 1:1 z eksportem: łagodny,
                    miękki gradient zamiast wąskiej (3rem), twardej białej
                    krawędzi nachodzącej nienaturalnie na kartę. */
    background: linear-gradient(
      to left,
      #fff,
      rgba(255, 255, 255, 0.9),
      transparent
    );
  }
}

/* ── Track padding override (class+ID, same specificity as why-fitness) ── */
.tv-carousel-track#tv-cats-track {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media (min-width: 768px) {
  .tv-carousel-track#tv-cats-track {
    padding-left: 5rem;
    padding-right: 5rem;
    gap: 2rem;
  }
}

/* ── Spacer (same as tv-why__track-spacer) ── */
.tv-cats__track-spacer {
  width: 1px;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .tv-cats__track-spacer {
    /* Brak desktopowego dystansu po ostatniej karcie — track kończy się na
       padding-right (5rem), więc ostatnia karta równo dochodzi do prawej
       krawędzi (symetrycznie z pierwszą), bez pustej przestrzeni. Jak eksport
       (brak desktopowego spacera). */
    width: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Card — jasna karta: ZDJĘCIE u góry (z pill) + TEKST pod spodem.
   Zdjęcie i tekst to osobne, niezachodzące bloki. Wysokość karty rośnie
   z treścią (align-items:stretch w torze zrównuje wysokości) — pełny
   nagłówek i opis zawsze widoczne, bez ucinania. Typografia: Manrope.
   Szerokości/peek/gap NIE zmienione (mechanika carouselu).
   ───────────────────────────────────────────────────────────────── */
.tv-cats__card {
  flex-shrink: 0;
  /* DEFINITYWNA width (nie min-width): w tym układzie zdjęcie jest w przepływie,
       a przy min-width jego intrinsic szerokość rozdymała slajd do ~2000px.
       width + min-width:0 ustala flex-basis i przycina automatyczne minimum,
       dając tę samą geometrię co wzorzec (85vw / 25rem / 27.5rem). */
  width: 85vw;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid #f1f1f1;
  transition: box-shadow 0.3s;
}
@media (min-width: 768px) {
  .tv-cats__card {
    width: 25rem;
    border-radius: 2rem;
  }
}
@media (min-width: 1024px) {
  .tv-cats__card {
    width: 27.5rem;
  }
}
.tv-cats__card:hover {
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.12);
}

/* ── Zdjęcie (stałe proporcje, cover — bez zniekształceń) ── */
.tv-cats__card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  flex-shrink: 0;
  overflow: hidden;
  background: #e4e4e7;
}
.tv-cats__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}
.tv-cats__card:hover .tv-cats__card-img {
  transform: scale(1.04);
}

/* Pill w lewym dolnym rogu zdjęcia */
.tv-cats__card-pill {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #18181b;
  font-size: 0.625rem; /* text-[10px] */
  font-weight: 900; /* font-black */
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  /* eksport: etykieta normalną wielkością liter — bez uppercase/letter-spacing */
  line-height: 1.4;
}

/* ── Blok tekstu pod zdjęciem (białe tło karty) ── */
.tv-cats__card-text {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .tv-cats__card-text {
    padding: 1.75rem;
  }
}

.tv-cats__card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #18181b;
  line-height: 1.25;
}
@media (min-width: 768px) {
  .tv-cats__card-title {
    font-size: 1.5rem;
  }
}

.tv-cats__card-desc {
  color: #71717a;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
}
@media (min-width: 768px) {
  .tv-cats__card-desc {
    font-size: 0.9375rem;
  }
}