/* strona glowna */

/* hero - pelnoekranowa karuzela */
.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

.hero-photo-mode {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.hero-carousel { position: absolute; inset: 0; z-index: 1; }

.hero-slide {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s var(--ease), visibility 1.2s var(--ease);
}
.hero-slide.is-active { opacity: 1; visibility: visible; }

.hero-photo { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    transform: scale(1.03);
}
.hero-slide.is-active .hero-photo img {
    animation: heroZoom 10s var(--ease) forwards;
}
@keyframes heroZoom {
    from { transform: scale(1.03); }
    to   { transform: scale(1.11); }
}

.hero-photo-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg,
        rgba(16, 16, 20, 0.62) 0%,
        rgba(16, 16, 20, 0.1) 34%,
        rgba(16, 16, 20, 0.22) 62%,
        rgba(16, 16, 20, 0.88) 100%);
    pointer-events: none;
}

.hero-photo-content {
    position: relative;
    z-index: 3;
    color: #fff;
    max-width: 1000px;
    padding: 0 var(--pad-x);
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(22px);
    opacity: 0;
    transition: transform 1s var(--ease) 0.25s, opacity 1s var(--ease) 0.25s;
}
.hero-slide.is-active .hero-photo-content { transform: translateY(0); opacity: 1; }

.hero-photo-headline {
    font-family: var(--font-d);
    font-size: clamp(38px, 6.2vw, 104px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 0.98;
    text-transform: uppercase;
    margin: 0 0 34px;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.45);
}

.hero-photo-sub { display: none; }

/* kropki karuzeli - mala, aktywna z obwodka */
.hero-dots {
    position: absolute;
    bottom: 104px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 10px;
}
/* kreski zamiast kropek - tak jak przy wyborze bolidu */
.hero-dot {
    width: 26px; height: 3px;
    background: rgba(255, 255, 255, 0.5);
    padding: 0;
    transition: background 0.3s var(--ease), width 0.3s var(--ease);
}
.hero-dot:hover { background: #fff; width: 34px; }
.hero-dot.is-active { background: var(--red); width: 52px; }

/* kim jestesmy - filmy w tle lecace po sobie */
.intro-strip {
    /* film przewija sie normalnie razem z sekcjami dzialow;
       warstwa wyzsza od kalendarza, bo na niego najezdza */
    position: relative;
    z-index: 1;
    padding: clamp(72px, 10vh, 130px) var(--pad-x);
    background: var(--deep);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    /* film ma wypelniac cale okno; "min-" a nie "height", zeby przy dluzszym
       tekscie albo niskim oknie sekcja moglaby urosnac zamiast go uciac */
    min-height: 100vh;
    min-height: 100svh;
    /* tresc na srodku wysokosci, zeby przy pelnym ekranie nie wisiala u gory */
    display: grid;
    align-content: center;
}
.intro-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.intro-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s var(--ease);
}
.intro-video.is-active { opacity: 1; }
.intro-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(16,16,18,0.92) 0%,
        rgba(16,16,18,0.74) 40%,
        rgba(16,16,18,0.74) 60%,
        rgba(16,16,18,0.94) 100%);
}

.intro-strip-inner {
    position: relative;
    z-index: 1;
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 110px);
    align-items: start;
}
@media (max-width: 900px) {
    .intro-strip-inner { grid-template-columns: 1fr; gap: 36px; }
}

.intro-strip .dept-strip-title {
    font-family: var(--font-d);
    font-size: clamp(34px, 4.4vw, 68px);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    margin: 0;
}
.intro-strip .dept-strip-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    background: var(--red);
    margin-top: 26px;
}

.intro-strip p {
    font-size: clamp(16px, 1.35vw, 19px);
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.75;
    margin-bottom: 22px;
    max-width: 66ch;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.intro-strip p:last-child { margin-bottom: 0; }

/* kontener przyklejonych tel - poza nim wszystko wraca do normalnego przewijania */
.scroll-stack { position: relative; }

/* kalendarz - czarna sekcja; zostaje w miejscu, film na niego najezdza.
   "top" ustawia skrypt: dla sekcji wyzszych niz ekran musi byc ujemny,
   inaczej przykleilyby sie za wczesnie i ich dol bylby nieosiagalny */
.events-strip {
    position: sticky;
    top: 0;
    z-index: 0;
    background: var(--black);
    padding: clamp(88px, 13vh, 160px) var(--pad-x);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.events-strip-inner { max-width: var(--maxw); margin: 0 auto; }

/* na waskim ekranie kalendarz jest wyzszy niz ekran - przyklejony ucialby
   czesc tresci, wiec tam przewija sie normalnie */
@media (max-width: 900px) {
    .events-strip { position: relative; }
}

.events-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 52px;
}
.events-head h2 { margin: 0 !important; }

/* rollout wut7 */
.event-featured {
    position: relative;
    overflow: hidden;
    min-height: clamp(380px, 52vh, 560px);
    display: flex;
    align-items: flex-end;
    margin-bottom: 2px;
}
.event-featured-photo { position: absolute; inset: 0; background: #1c1c21; }
.event-featured-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--ease), opacity 0.45s var(--ease);
}
.event-featured:hover .event-featured-photo img { transform: scale(1.035); }

.event-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(76deg,
        rgba(16, 16, 20, 0.88) 0%,
        rgba(16, 16, 20, 0.42) 46%,
        rgba(16, 16, 20, 0.1) 100%);
    pointer-events: none;
}

.event-featured-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(28px, 4vw, 56px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.event-featured-info { min-width: 0; }

.event-featured-title {
    font-size: clamp(26px, 3.1vw, 46px);
    margin: 0 0 10px;
}
.event-featured-meta {
    font-family: var(--font-d);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-2);
}

/* pasek nadchodzacych zawodow */
/* os startow — przewijalna poziomo */
.events-rail {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.events-races {
    display: flex;
    /* karty rozciagaja sie na cala szerokosc pod zdjeciem, bez szarych przerw */
    justify-content: flex-start;
    background: var(--deep);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.events-races::-webkit-scrollbar { display: none; }

.rail-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    font-family: var(--font-d);
    font-size: 26px;
    line-height: 1;
    color: #fff;
    background: rgba(16, 16, 20, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: background 0.25s, opacity 0.25s, border-color 0.25s;
}
.rail-nav:hover:not(:disabled) { background: var(--red); border-color: var(--red); }
.rail-nav:disabled { opacity: 0.25; cursor: default; }
.rail-nav[hidden] { display: none; }
.rail-prev { left: 6px; }
.rail-next { right: 6px; }

.race-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--black);
    padding: 30px 28px 34px;
    overflow: hidden;
    transition: background 0.35s, opacity 0.35s;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    /* rowne kolumny wypelniajace pasek; ponizej min-width pasek sie przewija */
    flex: 1 1 0;
    min-width: 200px;
    scroll-snap-align: start;
    /* separator zamiast przerwy - dzieki temu wysrodkowanie nie robi jasnych pasow */
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}
.race-card:first-child { border-left: 0; }

/* minione — wygaszone, z plakietka */
.race-card.is-past { opacity: 0.5; }
.race-card.is-past:hover,
.race-card.is-past.is-active { opacity: 1; }
.race-card.is-past .race-date { color: var(--text-3); }
.race-card.is-past::before { background: var(--text-3); }

.race-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 2px;
    background: var(--red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s var(--ease);
}
.race-card:hover { background: #1c1c21; }
.race-card:hover::before { transform: scaleX(1); }
.race-card.is-active { background: #1c1c21; }
.race-card.is-active::before { transform: scaleX(1); }
.race-card.is-active .race-name { color: #fff; }

.race-flag {
    line-height: 1;
    margin-bottom: 14px;
    filter: saturate(0.9);
}
.race-flag svg {
    display: block;
    width: 26px;
    height: auto;
    /* obwodka trzyma biale pasy w ryzach na ciemnym tle */
    outline: 1px solid rgba(255, 255, 255, 0.18);
    outline-offset: -1px;
}
.race-date {
    /* ta sama czcionka co nazwa wydarzenia, tylko lzejsza i mniejsza */
    font-family: var(--font-d);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--red);
}
.race-name {
    font-family: var(--font-d);
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin-top: 4px;
}
.race-loc {
    font-size: 13.5px;
    color: var(--text-2);
}

/* sekcje dzialow - trzy ukosne pasy: czerwien | czern | zdjecie */
.dept-strip {
    --media-w: 56%;
    position: relative;
    z-index: 2;
    min-height: clamp(520px, 82vh, 860px);
    overflow: hidden;
    display: grid;
    align-items: center;
}
.dept-strip.is-gray  { background: var(--black); }
.dept-strip.is-black { background: var(--deep); }

/* czerwony pas jest tlem pod samym opisem, a nie przez cala sekcje */
.dept-copy-in {
    position: relative;
    display: inline-block;
    padding: clamp(28px, 3.2vw, 52px) clamp(26px, 3vw, 54px);
}
.dept-accent {
    position: absolute;
    top: 0; bottom: 0;
    background: var(--red);
    transform: skewX(var(--skew));
    z-index: -1;
}
/* pas wychodzi poza krawedz sekcji, wiec scinany jest tylko od strony tekstu */
.dept-strip.is-left  .dept-accent { left: -100vw; right: 0; transform-origin: bottom right; }
.dept-strip.is-right .dept-accent { right: -100vw; left: 0; transform: skewX(calc(-1 * var(--skew))); transform-origin: bottom left; }

/* zdjecie przyciete tym samym skosem */
.dept-media {
    position: absolute;
    top: 0; bottom: 0;
    z-index: 1;
    width: var(--media-w);
    overflow: hidden;
}
.dept-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* srodek kadru na srodku widocznej (scietej) czesci, nie na srodku klatki */
    object-position: var(--focus, 50%) 50%;
    transition: scale 0.7s var(--ease);
}
.dept-strip:hover .dept-media img { scale: 1.06; }
.dept-strip.is-left .dept-media {
    right: 0;
    clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
    --focus: 42%;
}
.dept-strip.is-right .dept-media {
    left: 0;
    clip-path: polygon(0 0, 66% 0, 100% 100%, 0 100%);
    --focus: 58%;
}

/* kolumna tekstu - rezerwujemy pas na zdjecie, wiec nic nie wchodzi na skos */
.dept-copy {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(48px, 8vh, 96px);
}
.dept-strip.is-left .dept-copy {
    padding-left: clamp(22px, 5vw, 118px);
    padding-right: calc(var(--media-w) + 2%);
}
.dept-strip.is-right .dept-copy {
    padding-right: clamp(22px, 5vw, 118px);
    padding-left: calc(var(--media-w) + 2%);
    text-align: right;
}
/* nie wychodzimy poza pas zarezerwowany na tekst */
.dept-copy > * { max-width: min(100%, 620px); }
.dept-strip .dept-strip-title { max-width: none; }
.dept-strip.is-right .dept-copy > * { margin-left: auto; }

/* nazwa dzialu konturem - tylko w paskach dzialow, naglowek "Kim jestesmy" zostaje pelny */
.dept-strip .dept-strip-title {
    font-size: clamp(30px, 4.6vw, 86px);
    line-height: 1.02;
    letter-spacing: 0.005em;
    margin: 0 0 clamp(20px, 2.6vw, 42px);
    /* nigdy nie lamiemy nazwy dzialu w srodku wyrazu */
    overflow-wrap: normal;
    hyphens: none;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.95);
    text-stroke: 1.5px rgba(255, 255, 255, 0.95);
    paint-order: stroke fill;
}
.dept-strip-body {
    font-size: clamp(15px, 1.1vw, 17px);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.75;
    margin: 0;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

/* opis razem z czerwonym pasem wjezdza z tej strony, po ktorej stoi */
.dept-strip.is-left  .dept-copy.reveal { transform: translateX(-52px); }
.dept-strip.is-right .dept-copy.reveal { transform: translateX(52px); }
/* musi wygrac z regulami wyzej, stad ta sama para selektorow */
.dept-strip.is-left  .dept-copy.reveal.is-in,
.dept-strip.is-right .dept-copy.reveal.is-in { transform: translateX(0); }

/* wjazd przy przewijaniu: zdjecie i tekst wchodza z przeciwnych stron */
.dept-media {
    opacity: 0;
    transform: translateX(6%);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.dept-strip.is-right .dept-media { transform: translateX(-6%); }
.dept-media.is-in { opacity: 1; transform: translateX(0); }

@media (max-width: 900px) {
    .dept-strip { min-height: 0; display: block; }
    .dept-copy-in { display: block; padding: 34px var(--pad-x) 54px; }
    .dept-accent { display: none; }
    .dept-media {
        position: relative;
        width: 100%;
        height: clamp(230px, 38vh, 380px);
        clip-path: none !important;
        --focus: 50% !important;
        transform: translateY(20px) !important;
    }
    .dept-media.is-in { transform: translateY(0) !important; }
    .dept-strip.is-left .dept-copy,
    .dept-strip.is-right .dept-copy {
        padding: 34px var(--pad-x) 54px;
        text-align: left;
    }
    .dept-copy > * { max-width: 100%; }
    .dept-strip.is-right .dept-copy > * { margin-left: 0; }
}

/* cta czeka pod cytatem i wyjezdza spod niego przy przewijaniu.
   "bottom" w sticky podciaga element do dolu ekranu, zanim dojdzie do niego
   w normalnym ukladzie - a cytat, bedac warstwe wyzej, zaslania go do konca */
/* isolation robi z kontenera wlasny kontekst ukladania, dzieki czemu CTA
   z ujemna warstwa chowa sie pod tlami wszystkich sasiadow - niezaleznie
   od tego, czy maja wlasny z-index */
.reveal-stack { position: relative; isolation: isolate; }

/* cta - czerwien na plasko */
.cta-strip {
    padding: clamp(96px, 14vh, 180px) var(--pad-x);
    background: var(--red);
    color: #fff;
    text-align: center;
}
.reveal-stack .cta-strip {
    position: sticky;
    bottom: 0;
    z-index: -1;
}
@media (max-width: 900px) {
    .reveal-stack .cta-strip { position: relative; }
}
.cta-strip-inner { max-width: 900px; margin: 0 auto; }
.cta-strip h2 { color: #fff; margin-bottom: 40px; }

.cta-strip .btn-primary {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}
.cta-strip .btn-primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.cta-strip .btn-ghost { color: #fff; }
.cta-strip .btn-ghost:hover { background: #fff; border-color: #fff; color: var(--ink); }

.cta-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* media-strip (pozostalosc - pelnoekranowe przerywniki) */
.media-strip {
    position: relative;
    width: 100%;
    height: clamp(60vh, 82vh, 900px);
    overflow: hidden;
    background: var(--black);
}
.media-strip img,
.media-strip video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media-strip::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(16,16,20,0.85) 0%, rgba(16,16,20,0.12) 18%,
        rgba(16,16,20,0.12) 82%, rgba(16,16,20,0.85) 100%);
    pointer-events: none;
}

/* ==== cytat na koncu strony glownej ==== */
/* promien reflektora animujemy jako wlasnosc, stad rejestracja */
@property --qr {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

.quote-strip {
    position: relative;
    background: var(--deep);
    color: #fff;
    min-height: clamp(420px, 62vh, 640px);
    display: grid;
    align-items: center;
    overflow: hidden;
    --qx: 50%;
    --qy: 50%;
    --qr: 0px;
    transition: --qr 0.45s var(--ease);
}
.quote-strip.is-lit { --qr: clamp(170px, 19vw, 300px); }

/* zdjecie z ukosnym sciecie od strony tekstu */
.quote-photo {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 52%;
    overflow: hidden;
    clip-path: polygon(32% 0, 100% 0, 100% 100%, 0 100%);
}
.quote-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    /* kadr ustawiany per cytat - portret i szeroki plan chca czego innego */
    object-position: var(--qpos, 50% 26%);
    filter: grayscale(100%) contrast(1.06);
}
.quote-ford .quote-photo img { --qpos: 42% 50%; }
.quote-porsche .quote-photo img { --qpos: 45% 38%; }
.quote-chapman .quote-photo img { --qpos: 62% 34%; }
/* gdyby zdjecia zabraklo - zostaje sam ukosny panel */
.quote-photo.is-empty { background: #1a1a1f; }

.quote-body {
    position: relative;
    z-index: 1;
    padding: clamp(56px, 9vh, 110px) var(--pad-x);
    padding-right: 54%;
    max-width: var(--maxw);
    margin: 0 auto;
    width: 100%;
    /* cytat odslania sie tylko pod kursorem */
    -webkit-mask-image: radial-gradient(circle var(--qr) at var(--qx) var(--qy), #000 42%, transparent 100%);
    mask-image: radial-gradient(circle var(--qr) at var(--qx) var(--qy), #000 42%, transparent 100%);
}

.quote-text {
    position: relative;
    margin: 0;
    padding-top: clamp(38px, 4.2vw, 62px);
    font-family: var(--font-d);
    font-size: clamp(19px, 2.1vw, 34px);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.015em;
}
.quote-text::before,
.quote-author::before {
    content: "";
    position: absolute;
    width: clamp(19px, 2vw, 31px);
    aspect-ratio: 1 / 1.35;
    background:
        linear-gradient(#fff, #fff) left top / 38% 100% no-repeat,
        linear-gradient(#fff, #fff) right top / 38% 100% no-repeat;
}
.quote-text::before { top: 0; left: 0; }

.quote-author {
    position: relative;
    margin: clamp(46px, 5.4vw, 76px) 0 0;
    text-align: right;
    font-family: var(--font-d);
    font-size: clamp(16px, 1.7vw, 26px);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.quote-author::before {
    top: calc(-1 * clamp(34px, 4vw, 56px));
    right: 0;
}

@media (max-width: 860px) {
    .quote-strip { min-height: 0; }
    .quote-photo {
        position: relative;
        width: 100%;
        height: clamp(220px, 38vh, 340px);
        clip-path: none;
    }
    .quote-body { padding: 46px var(--pad-x) 40px; }
    .quote-author { text-align: left; margin-top: clamp(44px, 12vw, 68px); }
    .quote-author::before { right: auto; left: 0; }
}

/* bez myszki (dotyk, klawiatura) cytat po prostu widac */
@media (hover: none), (prefers-reduced-motion: reduce) {
    .quote-body {
        -webkit-mask-image: none;
        mask-image: none;
    }
}