/* =================================================================
   TryVinci – Why Fitness + AsSeenIn
   ================================================================= */

/* Shared carousel utilities */
.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; }

.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 .3s, background .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 .2s;
}
.tv-carousel-arrow:hover { background: #3f3f46; }

/* ---- Wrapper (dark bg) ---- */
.tv-why-wrapper {
    background: #09090b;
    position: relative;
}

/* ---- Why section ---- */
.tv-why {
    padding: 6rem 0 3rem;
    position: relative;
    z-index: 1;
    border-radius: 50px 50px 0 0;
    margin-top: -2.5rem;
    box-shadow: 0 -20px 50px rgba(0,0,0,.5);
    overflow: hidden;
}
@media (min-width: 768px) {
    .tv-why {
        padding: 8rem 0 3rem;
        border-radius: 80px 80px 0 0;
    }
}

.tv-why__bg-texture {
    position: absolute;
    inset: 0;
    /* URL z lokalnego załącznika (var ustawiany w render.php) — bez obcych połączeń */
    background-image: var(--tv-why-texture);
    opacity: .03;
    mix-blend-mode: luminosity;
    filter: grayscale(1);
    background-size: cover;
    background-position: center;
    pointer-events: none;
}

.tv-why__header { position: relative; z-index: 2; }
.tv-why__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-why__track-wrap (margin-top) */
}
.tv-why__subtext {
    color: #a1a1aa;
    font-size: 1.125rem;
    font-weight: 700;
    max-width: 80rem;
    margin: 0 auto 1.5rem;
    line-height: 1.5;
}
@media (min-width: 768px) {
    .tv-why__subtext { font-size: 1.25rem; }
}
/* Specyficzność 0,2,0 (ancestor .tv-why__header) — MUSI wygrać z .tv-carousel-controls
   (0,1,0) z categories/style.css, które ładuje się PÓŹNIEJ na stronie głównej i inaczej
   nadpisywałoby gap/margin-top tej sekcji. */
.tv-why__header .tv-why__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-why__header .tv-why__controls .tv-carousel-arrows { margin-top: 2rem; }

/* ---- Track ---- */
.tv-why__track-wrap {
    position: relative;
    max-width: 87.5rem;
    margin: 3rem auto 0;   /* strzałki → rząd kart = 48px */
    overflow: hidden;
}
.tv-carousel-track#tv-why-track {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
@media (min-width: 768px) {
    .tv-carousel-track#tv-why-track { padding-left: 5rem; padding-right: 5rem; gap: 2rem; }
}
.tv-why__track-spacer { width: 1px; flex-shrink: 0; }
@media (min-width: 768px) { .tv-why__track-spacer { width: 4rem; } }

/* ---- Cards ---- */
.tv-why__card {
    flex-shrink: 0;
    min-width: 85vw;
    height: 28rem;
    border-radius: 2.5rem;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,.05);
    transition: transform .5s, box-shadow .5s;
}
@media (min-width: 768px) {
    .tv-why__card { min-width: 25rem; height: 31.25rem; }
}
@media (min-width: 1024px) {
    .tv-why__card { min-width: 27.5rem; }
}
.tv-why__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(239,106,35,.15);
}

.tv-why__card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: .9;
    transition: transform 1s ease;
}
.tv-why__card:hover .tv-why__card-img { transform: scale(1.05); }

.tv-why__card-overlay-top,
.tv-why__card-overlay-bot,
.tv-why__card-overlay-mid {
    position: absolute;
    pointer-events: none;
}
.tv-why__card-overlay-top {
    inset: 0 0 60% 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.6), transparent);
    z-index: 1;
}
.tv-why__card-overlay-bot {
    inset: 40% 0 0 0;
    background: linear-gradient(to top, rgba(0,0,0,.8), transparent);
    z-index: 1;
}
.tv-why__card-overlay-mid {
    inset: 0;
    background: rgba(0,0,0,.2);
    z-index: 1;
}

.tv-why__card-body {
    position: absolute;
    inset: 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    z-index: 2;
}
.tv-why__card-top { margin-bottom: 1.5rem; }
.tv-why__card-stat {
    font-size: 2.25rem;
    font-weight: 700;
    color: #EF6A23;
    margin-bottom: 0.75rem;
    text-shadow: 0 2px 6px rgba(0,0,0,.3);
    line-height: 1;
}
@media (min-width: 768px) { .tv-why__card-stat { font-size: 2.5rem; } }
.tv-why__card-stat-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 2px 6px rgba(0,0,0,.3);
}
@media (min-width: 768px) { .tv-why__card-stat-title { font-size: 1.875rem; } }

.tv-why__card-desc {
    color: #d4d4d8;
    font-size: 1rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
@media (min-width: 768px) { .tv-why__card-desc { font-size: 1.125rem; } }

.tv-why__card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #EF6A23;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    margin-top: auto;
    transition: gap .2s;
    position: relative;
    z-index: 20;
}
@media (min-width: 768px) { .tv-why__card-link { font-size: 1rem; } }
.tv-why__card:hover .tv-why__card-link { gap: 0.75rem; }

/* ================================================================
   AsSeenIn
   ================================================================ */
.tv-media {
    padding: 3rem 0 4rem;
    border-top: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}
@media (min-width: 768px) { .tv-media { padding: 4rem 0 6.5rem; } }

.tv-media__inner {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    text-align: center;
    margin-bottom: 5rem;
}
.tv-media__heading { margin-bottom: 0 !important; }

/* Marquee track */
.tv-media__marquee-wrap { width: 100%; overflow: hidden; }
.tv-media__marquee-track {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: max-content;
    animation: tv-marquee-scroll 35s linear infinite;
}
@keyframes tv-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.tv-media__logo-link {
    display: inline-block;
    padding: 0 3.5rem;
    text-decoration: none;
    transition: color .2s;
    cursor: default;
}
a.tv-media__logo-link { cursor: pointer; }
.tv-media__logo {
    font-size: 1.5rem;
    font-weight: 900;
    color: #71717a;
    transition: color .2s;
}
@media (min-width: 1024px) { .tv-media__logo { font-size: 1.875rem; } }
a.tv-media__logo-link:hover .tv-media__logo { color: #fff; }