/* ==========================================================================
   Traficar Spot – Frontend Styles
   Sekcje: belka z ceną, „2 korzyści”
   Design system: ITCAvantGardePro headings, Roboto body, #7114ac accent
   (spójny z wtyczką Traficar Cennik)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

.ts-wrap {
    /* ── Brand palette ────────────────────────────────────────── */
    --ts-primary:        #7114ac;
    --ts-secondary:      #9234ce;
    --ts-teal:           #57ab9e;
    --ts-navy:           #262262;

    /* ── Surface ──────────────────────────────────────────────── */
    --ts-bg:             #ffffff;
    --ts-bg-alt:         #f7f5f9;
    --ts-primary-light:  #f1c0ff;

    /* ── Text ─────────────────────────────────────────────────── */
    --ts-text:           #000000;
    --ts-text-muted:     #666666;

    /* ── Radius / shadow ──────────────────────────────────────── */
    --ts-radius:         12px;
    --ts-radius-lg:      28px;
    --ts-radius-pill:    60px;
    --ts-shadow-hover:   rgba(0,0,0,.15) 0px 4px 16px 0px;

    /* ── Typography ───────────────────────────────────────────── */
    --ts-font-heading:   'ITCAvantGardePro', 'Avant Garde', 'Century Gothic', 'Helvetica Neue', Arial, sans-serif;
    --ts-font-body:      'Roboto', sans-serif;

    font-family: var(--ts-font-body);
    font-size: 16px;
    color: var(--ts-text);
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    /* teal akcent i telefon „Jak to działa” wystają poza kolumnę — przycinamy
       poziomo. `clip` (a nie `hidden`) nie tworzy kontenera przewijania, więc
       nie pojawia się pionowy pasek przewijania po prawej stronie. */
    overflow-x: clip;
}

.ts-wrap *, .ts-wrap *::before, .ts-wrap *::after {
    box-sizing: border-box;
}

.ts-wrap img {
    max-width: 100%;
    height: auto;
}

/* Scroll reveal */
.ts-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
    transition-delay: calc(var(--d, 0) * .1s);
}

.ts-reveal.ts-in {
    opacity: 1;
    transform: translateY(0);
}

/* Fallback: bez JS wszystko widoczne */
.ts-wrap.ts-no-js .ts-reveal {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   PRICE BAR
   -------------------------------------------------------------------------- */
.ts-pricebar {
    margin-top: clamp(28px, 4vw, 44px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    background: linear-gradient(120deg, var(--ts-primary) 0%, var(--ts-secondary) 100%);
    border-radius: var(--ts-radius-lg);
    padding: clamp(24px, 4vw, 36px) clamp(24px, 5vw, 48px);
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Płaskie kształty w stylu traficar.pl — turkusowy i granatowy
   zaokrąglony prostokąt wystające zza krawędzi belki */
.ts-pricebar::before {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 64px;
    background: var(--ts-teal);
    right: -180px; top: -200px;
    pointer-events: none;
}

.ts-pricebar::after {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 64px;
    background: var(--ts-navy);
    left: -190px; bottom: -210px;
    pointer-events: none;
}

.ts-pricebar__left,
.ts-pricebar__badges {
    position: relative;
    z-index: 1;
}

.ts-pricebar__left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.ts-pricebar__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.ts-pricebar__price-label {
    font-family: var(--ts-font-body);
    font-size: clamp(15px, 2vw, 18px);
    font-weight: 500;
    color: rgba(255,255,255,.85);
}

.ts-wrap .ts-pricebar__price-value {
    font-family: var(--ts-font-heading);
    font-weight: 900;
    font-size: clamp(30px, 5vw, 46px);
    line-height: 1;
    letter-spacing: -.01em;
    color: #fff !important;
}

.ts-pricebar__note {
    margin: 0;
    font-family: var(--ts-font-body);
    font-size: 14px;
    color: rgba(255,255,255,.8);
}

.ts-pricebar__note a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 4px;
}

.ts-pricebar__note a:hover {
    color: var(--ts-primary-light);
}

.ts-pricebar__badges {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.ts-pricebar__badges a {
    display: block;
    transition: transform .25s cubic-bezier(.22,1,.36,1), opacity .25s;
}

.ts-pricebar__badges a:hover {
    transform: translateY(-3px);
    opacity: .9;
}

.ts-pricebar__badges img {
    display: block;
    height: 44px;
    width: auto;
}

/* --------------------------------------------------------------------------
   BENEFITS — „Jeden Spot, 2 korzyści”
   -------------------------------------------------------------------------- */
.ts-benefits {
    margin-top: clamp(48px, 7vw, 84px);
}

.ts-benefits__head {
    text-align: center;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.ts-wrap .ts-benefits__heading {
    margin: 0;
    font-family: var(--ts-font-heading);
    font-weight: 900;
    font-size: var(--ts-heading-size, 26px);
    line-height: 1.15;
    text-align: center;
    color: var(--ts-text);
}

.ts-benefits__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.ts-benefit {
    display: flex;
    align-items: center;
    gap: 22px;
    background: var(--ts-bg-alt);
    border-radius: var(--ts-radius-lg);
    padding: clamp(24px, 3.5vw, 36px);
    transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, background .3s;
}

.ts-benefit:hover {
    transform: translateY(-6px);
    background: #fff;
    box-shadow: var(--ts-shadow-hover);
}

.ts-benefit__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px; height: 88px;
    border-radius: 50%;
    background: var(--ts-primary);
}

.ts-benefit__icon img {
    width: 52px;
    height: 52px;
    display: block;
}

.ts-wrap .ts-benefit__text {
    margin: 0;
    font-family: var(--ts-font-body);
    font-size: clamp(16px, 2vw, 19px);
    line-height: 1.45;
    font-weight: 500;
    color: var(--ts-text);
}

/* --------------------------------------------------------------------------
   HOW IT WORKS — „Jak to działa” (mockup telefonu + kroki)
   -------------------------------------------------------------------------- */
.ts-hiw {
    position: relative;
    isolation: isolate;
    padding: clamp(32px, 6vw, 72px) 0 clamp(24px, 4vw, 48px);
    margin-bottom: clamp(40px, 6vw, 72px);
}

.ts-hiw__bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(100%, 1100px);
    height: auto;
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

.ts-hiw__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 48%) minmax(0, 1fr);
    align-items: center;
    gap: clamp(16px, 2.5vw, 40px);
}

/* ── Left: phone mockups (cross-fade) ───────────────────────── */
.ts-hiw__media {
    position: relative;
}

.ts-hiw__phones {
    display: grid;
    /* Obraz telefonu ma szerokie, przezroczyste marginesy + cień po lewej, a
       sama bryła telefonu jest w prawej części kadru (środek ~77% szerokości).
       Powiększamy i przesuwamy w lewo, aby telefon był większy i wyśrodkowany
       między strzałkami — nadmiar (cień/puste) wychodzi poza kadr i jest
       przycinany przez overflow-x:clip na .ts-wrap. */
    width: 135%;
    margin-left: -54%;
    /* Cień telefonu (lewa, przezroczysta część kadru) inaczej urywałby się
       ostrą pionową krawędzią na granicy overflow-x:clip. Maska płynnie wygasza
       lewą część, więc cień naturalnie zanika. Bryła telefonu (prawe ~59%
       szerokości) pozostaje w pełni widoczna. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56%);
            mask-image: linear-gradient(to right, transparent 0, #000 56%);
}

.ts-hiw__phone {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity .45s cubic-bezier(.22,1,.36,1);
    pointer-events: none;
}

.ts-hiw__phone.is-active {
    opacity: 1;
    pointer-events: auto;
}

.ts-hiw__phone img {
    display: block;
    width: 100%;
    height: auto;
}

/* Strzałki nawigacyjne — po bokach telefonu, wyśrodkowane pionowo */
.ts-hiw__arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(26px, 7vw, 34px);
    height: auto;
    padding: 8px;
    border: 0;
    background: none;
    color: var(--ts-primary);
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
    transition: transform .2s ease, opacity .2s ease;
}

.ts-hiw__arrow svg {
    display: block;
    width: 100%;
    height: auto;
    fill: currentColor;
}

.ts-hiw__arrow--prev {
    left: 0;
    transform: translateY(-50%) scaleX(-1);
}

.ts-hiw__arrow--next {
    right: 0;
    transform: translateY(-50%);
}

.ts-hiw__arrow--prev:hover,
.ts-hiw__arrow--prev:focus-visible {
    transform: translateY(-50%) scaleX(-1) translateX(4px);
}

.ts-hiw__arrow--next:hover,
.ts-hiw__arrow--next:focus-visible {
    transform: translateY(-50%) translateX(4px);
}

/* ── Right: title, nav, card ────────────────────────────────── */
.ts-wrap .ts-hiw__title {
    margin: 0 0 clamp(24px, 4vw, 48px);
    font-family: var(--ts-font-heading);
    font-weight: 700;
    font-size: clamp(24px, 3.4vw, 32px);
    line-height: 1.2;
    color: var(--ts-text);
}

.ts-hiw__nav {
    list-style: none;
    margin: 0 0 clamp(24px, 4vw, 44px);
    padding: 0;
    display: flex;
    align-items: center;
}

.ts-hiw__nav-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #cfcfcf;
    transition: color .25s ease;
    user-select: none;
}

.ts-hiw__nav-num {
    font-family: var(--ts-font-heading);
    font-weight: 900;
    font-size: clamp(28px, 4vw, 36px);
    line-height: 1;
}

.ts-hiw__nav-item.is-active {
    color: var(--ts-primary);
}

.ts-hiw__chev {
    width: 12px;
    height: auto;
    margin: 0 clamp(10px, 1.4vw, 16px);
    fill: #cfcfcf;
    flex-shrink: 0;
}

.ts-hiw__nav-item:last-child .ts-hiw__chev {
    display: none;
}

/* Card + teal accent shape behind it */
.ts-hiw__cardwrap {
    position: relative;
}

.ts-hiw__cardwrap::after {
    content: '';
    position: absolute;
    top: 40px;
    left: 55px;
    right: -35px;
    bottom: -20px;
    background: var(--ts-teal);
    border-radius: 0 0 30px 0;
    z-index: 0;
}

.ts-hiw__card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: var(--ts-primary);
    border-radius: 30px 0 0 0;
    color: #fff;
}

.ts-hiw__track {
    display: flex;
    transition: transform .35s cubic-bezier(.22,1,.36,1);
}

.ts-hiw__slide {
    flex: 0 0 100%;
    min-width: 100%;
    min-height: clamp(220px, 26vw, 280px);
    padding: clamp(28px, 3.5vw, 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ts-wrap .ts-hiw__slide-text {
    margin: 0;
}

.ts-wrap .ts-hiw__slide-text p {
    margin: 0;
    font-family: var(--ts-font-heading);
    font-weight: 400;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.38;
    color: #fff;
}

.ts-wrap .ts-hiw__slide-text b,
.ts-wrap .ts-hiw__slide-text strong {
    font-weight: 900;
}

.ts-hiw__slide-sign {
    margin-top: 20px;
    font-family: var(--ts-font-body);
    font-size: clamp(16px, 2vw, 20px);
    color: rgba(255,255,255,.95);
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
    .ts-benefits__grid {
        grid-template-columns: 1fr;
    }
    .ts-hiw__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(28px, 8vw, 44px);
        justify-items: center;
    }
    .ts-hiw__media {
        width: min(360px, 82%);
    }
    .ts-hiw__content {
        width: 100%;
    }
    .ts-hiw__title,
    .ts-hiw__nav {
        justify-content: center;
    }
    .ts-hiw__title {
        text-align: center;
    }
    .ts-hiw__cardwrap::after {
        right: -20px;
    }
}

@media (max-width: 640px) {
    .ts-pricebar {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .ts-benefit {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ts-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}