/* podstrony */

/* ============ zespol ============ */

/* ==== przelacznik sezonu ==== */
.season-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(34px, 5vh, 62px) var(--pad-x) 0;
}
.season-tab {
    /* skos jak przy pozostalych oznaczeniach; napis odchylamy z powrotem */
    transform: skewX(var(--skew));
    background: var(--white);
    color: var(--ink);
    border: 0;
    padding: 9px 26px;
    cursor: pointer;
    font-family: var(--font-b);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    transition: background 0.3s var(--ease), color 0.3s var(--ease),
                transform 0.3s var(--ease);
}
.season-tab > span { display: block; transform: skewX(calc(-1 * var(--skew))); }
.season-tab:hover { transform: skewX(var(--skew)) translateY(-2px); }
.season-tab.is-active {
    background: var(--red);
    color: #fff;
}

@media (max-width: 520px) {
    .season-tab { padding: 8px 16px; font-size: 13px; }
    .season-switch { gap: 8px; }
}

/* ==== rzedy dzialow ==== */
.dept-rows {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(40px, 6vh, 80px) var(--pad-x) clamp(60px, 9vh, 110px);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dept-row {
    position: relative;
    display: block;
    width: 100%;
    height: clamp(150px, 19vw, 230px);
    padding: 0;
    overflow: hidden;
    background: var(--black-2);
    text-align: left;
    isolation: isolate;
}

/* jasny panel wysuwa sie z lewej po najechaniu */
.dept-row-panel {
    position: absolute;
    inset: 0 22% 0 0;
    background: #ededf0;
    transform: scaleX(0) skewX(var(--skew));
    transform-origin: left center;
    transition: transform 0.6s var(--ease);
    z-index: 0;
}
.dept-row:hover .dept-row-panel,
.dept-row:focus-visible .dept-row-panel { transform: scaleX(1) skewX(var(--skew)); }

/* nazwa dzialu - duza, przygaszona; po najechaniu chowa sie za panel */
.dept-row-name {
    position: absolute;
    left: clamp(180px, 22vw, 320px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    font-family: var(--font-d);
    font-size: clamp(28px, 4.6vw, 68px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #34343c;
    white-space: nowrap;
    transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}
.dept-row:hover .dept-row-name,
.dept-row:focus-visible .dept-row-name { opacity: 0; transform: translateY(-50%) translateX(30px); }

/* stosik kart - zwiniety lezy jedna na drugiej, po najechaniu rozklada sie */
.dept-row-cards {
    position: absolute;
    left: clamp(10px, 1.6vw, 26px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: block;
    width: clamp(120px, 15vw, 190px);
    height: clamp(120px, 15vw, 180px);
}
.dept-card {
    position: absolute;
    top: 50%;
    left: 0;
    width: clamp(96px, 11.5vw, 145px);
    aspect-ratio: 3 / 4;
    background: #1c1c21;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    /* najwyzej postawiony jest pierwszy w kodzie i ma lezec na wierzchu */
    z-index: calc(3 - var(--i));
    /* kolejni coraz bardziej przezroczysci - widac, ze w dziale jest wiecej osob */
    opacity: calc(1 - var(--i) * 0.22);
    /* zwiniete: lekkie kąty, jakby lezaly na stole */
    transform: translateY(-50%) translateX(calc(var(--i) * 9px)) rotate(calc((var(--i) - 1) * 4deg));
    transition: transform 0.6s var(--ease), box-shadow 0.5s var(--ease), opacity 0.5s var(--ease);
}
.dept-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;
    filter: grayscale(35%);
}
.dept-card-name {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 16px 8px 7px;
    background: linear-gradient(180deg, transparent, rgba(12, 12, 14, 0.9));
    font-family: var(--font-d);
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
    line-height: 1.1;
    text-align: center;
}
/* rozlozone: rozjezdzaja sie w bok, kazda pod innym katem */
.dept-row:hover .dept-card,
.dept-row:focus-visible .dept-card {
    transform: translateY(-50%) translateX(calc(var(--i) * clamp(88px, 10.6vw, 134px)))
               rotate(calc((var(--i) - 1) * 5deg));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

/* czerwony klin ze strzalka - wjezdza z prawej */
.dept-row-go {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 30%;
    z-index: 3;
    background: var(--red);
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
    /* klin jest sciety, wiec musi zjechac dalej niz o wlasna szerokosc */
    transform: translateX(125%);
    transition: transform 0.6s var(--ease);
    display: grid;
    place-items: center;
}
.dept-row:hover .dept-row-go,
.dept-row:focus-visible .dept-row-go { transform: translateX(0); }

.dept-row-arrow {
    width: 46px; height: 46px;
    background: url("../assets/icons/arrow.png") center / contain no-repeat;
    transition: transform 0.4s var(--ease);
}
.dept-row:hover .dept-row-arrow { transform: translateX(6px); }

@media (max-width: 820px) {
    /* na dotyku nie ma najechania - rzad jest od razu rozlozony */
    .dept-row { height: 150px; }
    .dept-row-panel { display: none; }
    /* nazwa nie moze wchodzic pod czerwony klin */
    .dept-row-name {
        left: clamp(110px, 32vw, 190px);
        right: 84px;
        font-size: clamp(15px, 4.4vw, 24px);
        color: #6a6a75;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dept-row-cards { width: 110px; height: 110px; }
    .dept-card { width: 82px; }
    .dept-row:hover .dept-card { transform: translateY(-50%) translateX(calc(var(--i) * 9px)) rotate(calc((var(--i) - 1) * 4deg)); }
    .dept-row-go { width: 74px; transform: translateX(0); clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%); }
    .dept-row-arrow { width: 26px; height: 26px; }
}

/* ==== widok otwartego dzialu ==== */
.team-open { padding-top: clamp(20px, 4vh, 44px); }
.team-open-head {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 40px);
    flex-wrap: wrap;
}
.team-open-back {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-u);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-2);
    transition: color 0.25s;
}
.team-open-back:hover { color: #fff; }
.team-open-back-arrow {
    width: 30px; height: 30px;
    background: url("../assets/icons/arrow.png") center / contain no-repeat;
    transform: rotate(180deg);
}
.team-open-title {
    font-size: clamp(24px, 3.2vw, 44px);
    color: var(--text-0);
    margin: 0;
}

.team-grid {
    max-width: var(--maxw);
    margin: 56px auto 0;
    padding: 0 var(--pad-x) 130px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 22px;
}

/* karta czlonka - flip */
.member-card {
    position: relative;
    aspect-ratio: 3 / 4.15;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    perspective: 1500px;
    color: var(--text-0);
    text-align: left;
}

.member-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.75s var(--ease);
    will-change: transform;
}
.member-card-inner.flipped { transform: rotateY(180deg); }

/* karty archiwalnych sezonow sa jednostronne - nie ma czego obracac */
.member-card-flat { cursor: default; perspective: none; }

.member-face {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: hidden;
    transition: opacity 0.3s linear 0.22s;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.member-card-inner.flipped .member-face-front { opacity: 0; pointer-events: none; }
.member-card-inner:not(.flipped) .member-face-back { opacity: 0; pointer-events: none; }

/* przod */
.member-face-front {
    display: flex;
    flex-direction: column;
    background: #1c1c21;
    border: 1px solid rgba(255, 255, 255, 0.09);
}

.member-photo {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    background: #131316;
    min-height: 0;
}
.member-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    transition: transform 0.8s var(--ease), filter 0.5s;
    filter: grayscale(28%) contrast(1.03);
}
.member-card:hover .member-photo img {
    transform: scale(1.045);
    filter: grayscale(0%) contrast(1.05);
}
.member-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 62%, rgba(16, 16, 20, 0.55) 100%);
    pointer-events: none;
}

/* plakietka dzialu - skosna, czarna */
.role-tag {
    position: absolute;
    top: 0; left: 14px;
    z-index: 2;
    display: inline-block;
    transform: skewX(var(--skew));
    background: #101012;
    padding: 7px 13px;
    font-family: var(--font-u);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 2px solid var(--red);
}
.glass-tag { background: #101012 !important; border: none; border-bottom: 2px solid var(--red) !important; color: #fff !important; }

.member-info {
    padding: 16px 18px 18px;
    background: #1c1c21;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.member-name {
    font-family: var(--font-d);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.member-role {
    font-family: var(--font-u);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-top: 5px;
}

.member-card .arrow {
    position: absolute;
    bottom: 14px; right: 14px;
    width: 34px; height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: #fff;
    z-index: 3;
    transition: background 0.3s, border-color 0.3s, transform 0.5s var(--ease);
    background: rgba(16, 16, 20, 0.35);
}
.member-card:hover .arrow {
    background: var(--red);
    border-color: var(--red);
    transform: rotate(180deg);
}

/* tyl - biala karta techniczna */
/* sama sciana sie nie przewija - dzieki temu strzalka stoi w miejscu;
   przewija sie tylko tresc w srodku */
.member-face-back {
    transform: rotateY(180deg) translateZ(0);
    background: #fff;
    color: var(--ink);
    overflow: hidden;
}
.member-back-scroll {
    height: 100%;
    padding: 20px 20px 46px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--red) transparent;
}
.member-back-scroll::-webkit-scrollbar { width: 4px; }
.member-back-scroll::-webkit-scrollbar-thumb { background: var(--red); }

.member-face-back .role-tag {
    position: static;
    align-self: flex-start;
    margin-left: 0;
}

.member-back-top {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ink);
}
.member-back-name {
    font-size: 18px;
    line-height: 1.15;
    color: var(--ink);
    margin: 0;
}
.member-back-role {
    font-family: var(--font-u);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #85858d;
}

.member-back-bio {
    font-size: 12.5px;
    line-height: 1.6;
    color: #3c3c42;
    margin: 0;
}
.member-bio-full { display: none; }
/* nadmiarowe zawody chowaja sie do czasu klikniecia "pokaz wiecej" */
.member-face-back:not(.ach-expanded) .ach-extra { display: none; }
.member-face-back.bio-expanded .member-bio-short { display: none; }
.member-face-back.bio-expanded .member-bio-full { display: block; }
.member-back-none { color: #b0b0b6; font-style: italic; }

.member-back-section { display: flex; flex-direction: column; gap: 7px; }
.member-back-title {
    font-family: var(--font-u);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--red);
}
.member-back-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.member-back-list li {
    display: flex;
    gap: 9px;
    font-size: 11.5px;
    color: #3c3c42;
    line-height: 1.45;
    padding: 6px 0;
    border-bottom: 1px solid rgba(16, 16, 20, 0.08);
}
.member-back-list .year {
    font-family: var(--font-u);
    font-size: 10px;
    font-weight: 600;
    color: var(--ink);
    flex-shrink: 0;
    padding-top: 1px;
}

.member-back-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 10px;
}
.glass-btn {
    padding: 8px 14px;
    font-family: var(--font-b);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
    transition: background 0.25s, color 0.25s;
}
.glass-btn:hover { background: var(--red); border-color: var(--red); }

.member-back-mail {
    display: none;
    font-family: var(--font-u);
    font-size: 11px;
    color: var(--red);
    word-break: break-all;
}
.member-face-back.mail-shown .member-back-mail { display: block; }

.arrow-back {
    position: absolute;
    bottom: 12px; right: 12px;
    width: 30px; height: 30px;
    border: 1px solid rgba(16, 16, 20, 0.35);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    color: var(--ink);
    pointer-events: none;
    background: #fff;
}

/* ============ o nas ============ */

.about-intro {
    padding: clamp(88px, 13vh, 170px) var(--pad-x);
    background: transparent;
}
.about-intro-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 110px);
}
@media (max-width: 900px) { .about-intro-inner { grid-template-columns: 1fr; gap: 36px; } }

/* ==== osiagniecia - przesuwana tasma kart ==== */
.ach-sec { padding: clamp(20px, 3vh, 44px) 0 0; }

.ach-sec-title {
    text-align: center;
    margin: 0 0 clamp(26px, 4vh, 46px);
    padding: 0 var(--pad-x);
    font-size: clamp(21px, 2.6vw, 34px);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--ink);
}

/* czerwony pas ciagnie sie przez cala szerokosc okna */
.ach-band {
    background: var(--red);
    padding: clamp(30px, 4.5vh, 54px) 0 clamp(34px, 5vh, 62px);
    overflow: hidden;
}

.ach-rail {
    position: relative;
    overflow: hidden;
    cursor: grab;
    touch-action: pan-y;
    outline: none;
    /* ciagniemy tasme, a nie zaznaczamy tekst i nie przenosimy obrazkow */
    user-select: none;
    -webkit-user-select: none;
}
.ach-rail img {
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}
.ach-rail:active { cursor: grabbing; }
.ach-rail:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
/* po chwyceniu mysza obwodka ogniska tylko przeszkadza */
.ach-rail.bez-obwodki:focus-visible { outline: none; }

.ach-track {
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 2.2vw, 34px);
    width: max-content;
    transition: transform 0.65s var(--ease);
    will-change: transform;
}

.ach-card {
    --w: clamp(212px, 18vw, 264px);
    position: relative;
    flex: 0 0 var(--w);
    width: var(--w);
    /* karty poza srodkiem sa przygaszone i lekko mniejsze */
    opacity: 0.55;
    transform: scale(0.94);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.ach-card.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 3;                 /* trofea maja wyjezdzac nad sasiadow */
}

.ach-photo {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 3 / 4.2;
    transition: border-radius 0.45s var(--ease);
    background: rgba(0, 0, 0, 0.18);
}
.ach-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
}
/* czerwona mgla na bocznych kartach - znika, gdy karta wjezdza na srodek */
.ach-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--red);
    opacity: 0.5;
    transition: opacity 0.55s var(--ease);
    pointer-events: none;
}
.ach-card.is-active .ach-photo::after { opacity: 0; }
.ach-card.is-active .ach-photo { border-radius: 14px 14px 0 0; }

/* trofea chowaja sie za zdjeciem i wysuwaja po najechaniu na srodkowa karte */
.ach-trophy {
    position: absolute;
    top: 26%;
    left: 50%;
    width: 88%;
    height: auto;
    z-index: -1;
    opacity: 0;
    transform: translateX(-50%);
    transition: transform 0.6s var(--ease), opacity 0.45s var(--ease);
    pointer-events: none;
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.4));
}
/* lewe jedzie o kawalek dalej: po obrocie ma przy krawedzi 13 px
   przezroczystego marginesu, prawe tylko 2 - bez tego nie dotykalo karty */
.ach-card.is-active:hover .ach-trophy-l,
.ach-card.is-active:focus-within .ach-trophy-l {
    opacity: 1;
    transform: translateX(-156%) rotate(-9deg);
}
.ach-card.is-active:hover .ach-trophy-r,
.ach-card.is-active:focus-within .ach-trophy-r {
    opacity: 1;
    transform: translateX(61%) rotate(9deg);
}

/* ciemny panel z wynikami wysuwa sie spod zdjecia */
.ach-panel {
    overflow: hidden;
    border-radius: 0 0 14px 14px;
    background: #26262d;
    color: #fff;
    transition: height 0.55s var(--ease);
}
.ach-rail.is-ready .ach-panel { height: 0; }
.ach-rail.is-ready .ach-card.is-active .ach-panel { height: var(--panel-h, auto); }

.ach-panel-in {
    padding: 14px 16px 18px;
    text-align: center;
    font-family: var(--font-d);
}
.ach-event {
    font-size: clamp(15px, 1.35vw, 19px);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.1;
}
.ach-year {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.62);
    margin-top: 2px;
}
.ach-overall {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 9px;
    font-size: clamp(15px, 1.35vw, 19px);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.ach-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
}
/* jedna kolumna: przy pojedynczym wyniku i przy dlugich nazwach konkurencji,
   ktore w dwoch kolumnach nie miescily sie w szerokosci karty */
.ach-list:has(li:only-child),
.ach-list.is-single { grid-template-columns: minmax(0, 1fr); }
.ach-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.2;
}
/* bez tego napis nie chce sie skurczyc i wychodzi poza kolumne */
.ach-list li > span:not(.ach-dia) { min-width: 0; overflow-wrap: break-word; }

/* romb z miejscem - kwadrat obrocony o 45 stopni, cyfra wraca do pionu */
.ach-dia {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    font-size: 9px;
    font-weight: 700;
    color: #fff;
}
/* cyfra wraca do pionu, zeby romb byl obrocony, a liczba nie */
.ach-dia i { transform: rotate(-45deg); font-style: normal; line-height: 1; }
.ach-overall .ach-dia { width: 22px; height: 22px; font-size: 12px; }

.ach-p1 { background: #e8b64c; color: #1b1405; }
.ach-p2 { background: #a8adb4; color: #17171a; }
.ach-p3 { background: #b1743f; color: #180f06; }
/* poza podium romb w kolorze tla strony glownej */
.ach-px { background: var(--black); color: #fff; }

@media (max-width: 720px) {
    .ach-card { --w: clamp(168px, 52vw, 210px); }
    .ach-list { grid-template-columns: minmax(0, 1fr); }
    .ach-trophy { display: none; }
}

/* ==== przerywnik: zdjecie stoi w miejscu, sekcje przesuwaja sie po nim ==== */
.breaker {
    height: clamp(280px, 42vh, 540px);
    background-image: url("../assets/media/przerywnik.jpg");
    background-size: cover;
    background-position: center 58%;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* Na dotyku tlo przyklejone do okna albo nie dziala, albo tnie przy
   przewijaniu - tam zdjecie jedzie razem ze strona. */
@media (max-width: 900px), (hover: none) {
    .breaker { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
    .breaker { background-attachment: scroll; }
}

/* strony na bieli */
body[data-page="about"],
body[data-page="sponsors"] { background: var(--white); color: var(--ink); }

.about-intro h2 {
    font-size: clamp(42px, 5.6vw, 88px);
    color: inherit;
}

.about-intro .text p {
    font-size: clamp(16px, 1.3vw, 18.5px);
    line-height: 1.75;
    margin-bottom: 22px;
    max-width: 68ch;
    color: #3c3c42;
}
.about-intro .text p:last-child { margin-bottom: 0; }

/* os czasu */
.timeline {
    padding: clamp(80px, 12vh, 150px) var(--pad-x) clamp(90px, 13vh, 160px);
    border-top: 1px solid var(--line-l);
}
.timeline-inner { max-width: 1240px; margin: 0 auto; }

/* kropkowany bolid siedzi na samym dole podstrony */
.fs-races-sec.paper-deco-br { padding-bottom: clamp(150px, 20vh, 250px); }
.fs-races-sec.paper-deco-br::after {
    width: clamp(300px, 38vw, 660px);
    transform: translate(10%, 26%) scaleX(-1);
    opacity: 0.45;
}

.timeline-head { margin-bottom: 70px; text-align: center; }
.timeline-head h2 { color: inherit; }

/* os pozioma: linia przez srodek rombow, nad nia rok, pod nia nazwa bolidu */
.timeline-track {
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: start;
    margin: 0;
    padding: 0;
}
.timeline-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 0 4px;
}
/* odcinek linii rysowany przez kazdy element, wiec zawsze trafia w srodek rombu */
.timeline-item::before {
    content: "";
    position: absolute;
    top: calc(var(--tl-badge, 26px) + 15px);
    left: -50%;
    right: 50%;
    height: 2px;
    background: rgba(16, 16, 20, 0.14);
}
.timeline-item:first-child::before { display: none; }

.timeline-item::after {
    content: "";
    position: absolute;
    top: var(--tl-badge, 26px);
    width: 12px; height: 12px;
    box-sizing: content-box;
    background: var(--white);
    border: 3px solid var(--red);
    transform: rotate(45deg);
}

.timeline-year {
    display: inline-block;
    transform: skewX(var(--skew));
    background: var(--red);
    color: #fff;
    padding: 3px 12px;
    font-family: var(--font-u);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.5;
}
/* miejsce na romb miedzy rokiem a nazwa */
.timeline-title {
    margin-top: 30px;
    font-family: var(--font-d);
    font-size: clamp(15px, 1.5vw, 21px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: inherit;
    line-height: 1;
}

@media (max-width: 760px) {
    /* na waskim ekranie os przewija sie w bok */
    .timeline-track {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        padding-bottom: 6px;
    }
    .timeline-track::-webkit-scrollbar { display: none; }
    .timeline-item { flex: 0 0 116px; }
}

/* ============ bolidy ============ */

.cars-timeline-section {
    padding: clamp(72px, 11vh, 130px) var(--pad-x) 56px;
    background: var(--black);
}

.cars-timeline-head {
    max-width: var(--maxw);
    margin: 0 auto 8px;
    text-align: center;
}

.cars-timeline {
    max-width: var(--maxw);
    margin: 0 auto;
    position: relative;
    padding: 44px 0 8px;
}
/* linia rysowana przez rzad rombow, wiec zawsze przechodzi przez ich srodek */
.cars-timeline-line { display: none; }

.cars-timeline-track {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    position: relative;
}
@media (max-width: 900px) {
    .cars-timeline-track {
        display: flex;
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: thin;
    }
    .cars-timeline-track > * { flex: 0 0 170px; }
    .cars-timeline-line { display: none; }
}

.timeline-car {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0;
    position: relative;
}

.timeline-car .timeline-car-graphic {
    width: 100%;
    max-width: 200px;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    transition: transform 0.55s var(--ease);
}
.timeline-car .timeline-car-graphic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(85%) brightness(0.72);
    opacity: 0.55;
    transition: filter 0.45s, opacity 0.45s;
}
.timeline-car:hover .timeline-car-graphic img { filter: grayscale(0) brightness(1); opacity: 1; }
.timeline-car:hover .timeline-car-graphic { transform: translateY(-5px); }

.timeline-car.is-active .timeline-car-graphic { transform: translateY(-7px) scale(1.06); }
.timeline-car.is-active .timeline-car-graphic img {
    filter: grayscale(0) brightness(1);
    opacity: 1;
}

/* znacznik to krotka kreska pod bolidem, bez ciaglej linii */
.timeline-dot-row {
    width: 100%;
    display: grid;
    place-items: center;
    order: 2;
    height: 16px;
}
.timeline-car .timeline-dot {
    display: block;
    width: 26px; height: 4px;
    background: rgba(255, 255, 255, 0.85);
    transition: background 0.3s var(--ease), width 0.3s var(--ease);
}
.timeline-car:hover .timeline-dot { width: 38px; }
.timeline-car.is-active .timeline-dot { background: var(--red); width: 96px; }

/* rok pokazujemy tylko w panelu szczegolow ponizej */
.timeline-car .timeline-year { display: none; }

.timeline-car .timeline-name {
    order: 4;
    font-family: var(--font-d);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: var(--text-1);
    transition: color 0.3s;
}
.timeline-car.is-active .timeline-name { color: #fff; }

/* prezentacja bolidu - czerwien na plasko */
.car-show-section {
    background: var(--red);
    padding: clamp(56px, 9vh, 120px) var(--pad-x);
}
.car-show-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(36px, 5vw, 90px);
    align-items: center;
}
@media (max-width: 880px) { .car-show-inner { grid-template-columns: 1fr; gap: 36px; } }

/* przesuwanie przy zmianie bolidu - stary panel wyjezdza w strone,
   w ktora "jedziemy" po osi, nowy wjezdza z przeciwnej */
.car-show-inner {
    transition: transform 0.45s var(--ease), opacity 0.35s var(--ease);
}
.car-show-inner.is-out-left  { transform: translateX(-6%); opacity: 0; }
.car-show-inner.is-out-right { transform: translateX(6%);  opacity: 0; }
.car-show-inner.is-in-right  { transform: translateX(6%);  opacity: 0; }
.car-show-inner.is-in-left   { transform: translateX(-6%); opacity: 0; }

/* zdjecie jedzie odrobine dalej niz dane - daje glebie */
.car-show-photo { transition: transform 0.5s var(--ease); }
.is-out-left  .car-show-photo { transform: translateX(-7%); }
.is-out-right .car-show-photo { transform: translateX(7%); }
.is-in-right  .car-show-photo { transform: translateX(7%); }
.is-in-left   .car-show-photo { transform: translateX(-7%); }

@media (prefers-reduced-motion: reduce) {
    .car-show-inner, .car-show-photo { transition: none; }
}

/* zdjecia bolidow maja rozne proporcje (od 1,49 do 2,34), wiec bez stalej
   ramki czerwona sekcja zmienialaby wysokosc przy kazdej zmianie bolidu */
.car-show-photo {
    /* zwykly blok, nie siatka: w siatce wysokosc procentowa zdjecia sie nie
       rozwiazywala i zdjecie wystawalo poza ramke.
       min-height: 0, bo ramka sama jest elementem siatki i jej automatyczny
       minimalny rozmiar rozpychalby sie do wysokosci zdjecia.
       Bez przycinania, bo cien rzucany przez bolid wychodzi poza ramke. */
    aspect-ratio: 16 / 9;
    min-height: 0;
}
.car-show-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 30px 46px rgba(0, 0, 0, 0.4));
}

/* strzalki po bokach - drugi sposob zmiany bolidu obok osi na gorze */
.car-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: clamp(42px, 4.4vw, 60px);
    height: clamp(42px, 4.4vw, 60px);
    background: url("../assets/icons/arrow.png") center / contain no-repeat;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.car-prev { left: clamp(6px, 1.6vw, 26px); transform: translateY(-50%) rotate(180deg); }
.car-next { right: clamp(6px, 1.6vw, 26px); }
.car-prev:hover:not(:disabled) { transform: translateY(-50%) rotate(180deg) translateX(5px); }
.car-next:hover:not(:disabled) { transform: translateY(-50%) translateX(5px); }
.car-nav:disabled { opacity: 0.25; cursor: default; }

@media (max-width: 880px) {
    .car-nav { width: 34px; height: 34px; }
}

.car-show-year {
    display: inline-block;
    font-family: var(--font-u);
    font-size: 13px;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.75);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 6px;
}
.car-show-name {
    font-size: clamp(44px, 5.6vw, 88px);
    color: #fff;
    margin: 14px 0 34px;
}

.car-show-specs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
}
@media (max-width: 480px) { .car-show-specs { grid-template-columns: 1fr; } }

.car-spec {
    padding: 18px 4px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.car-spec:nth-child(odd) { padding-right: 26px; }
.car-spec .lbl {
    font-family: var(--font-u);
    font-size: 9.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
}
.car-spec .val {
    font-family: var(--font-d);
    font-size: clamp(28px, 2.6vw, 40px);
    font-weight: 600;
    color: #fff;
    font-feature-settings: "tnum";
    line-height: 1;
}

/* ============ sponsorzy ============ */

.sponsor-tiers {
    background: var(--white);
    color: var(--ink);
    padding: 24px var(--pad-x) 110px;
}
.sponsor-tier {
    max-width: 1240px;
    margin: 0 auto;
    padding: 58px 0 12px;
}
.sponsor-tier-title {
    text-align: center;
    font-size: clamp(20px, 2.3vw, 32px);
    letter-spacing: 0.02em;
    color: var(--ink);
    margin: 0 auto 46px;
    padding-bottom: 14px;
    width: fit-content;
    max-width: 92%;
    border-bottom: 2px solid var(--tier-color, var(--red));
}

.sponsor-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(30px, 4.5vw, 64px);
    row-gap: 38px;
}
/* kafelek logo - klikalny, prowadzi na strone partnera.
   --lw/--lh sa liczone per logo tak, zeby kazde mialo podobne pole,
   inaczej szerokie logotypy przytlaczaja te kwadratowe */
.sponsor-logo {
    display: grid;
    place-items: center;
    width: calc(var(--lw, 3) * var(--u));
    height: calc(var(--lh, 1) * var(--u));
    max-width: 100%;
    opacity: 0.9;
    transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.sponsor-logo:hover,
.sponsor-logo:focus-visible { opacity: 1; transform: translateY(-4px); }
/* partner bez adresu strony - kafelek nie udaje klikalnego */
.sponsor-logo.is-plain { cursor: default; }
.sponsor-logo.is-plain:hover { opacity: 0.9; transform: none; }
/* wypelniamy kafelek i skalujemy w dol - procentowe max-height nie domyka sie
   w gridzie, wiec ustawiamy wymiar wprost */
.sponsor-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* --u to jednostka poziomu; im wyzszy poziom, tym wieksza */
.sponsor-tier { --u: clamp(40px, 4.4vw, 58px); }
/* partner glowny stoi sam i ma sie wyroznic - poltora raza wiekszy kafelek */
.tier-1 { --u: clamp(111px, 13.5vw, 177px); }
.tier-2 { --u: clamp(58px, 6.4vw, 84px); }
/* granty zewnetrzne stoja zaraz pod strategicznymi */
.tier-8 { --u: clamp(56px, 6.2vw, 81px); }
.tier-3 { --u: clamp(56px, 6vw, 79px); }
.tier-4 { --u: clamp(52px, 5.5vw, 72px); }
.tier-5 { --u: clamp(48px, 5vw, 66px); }
.tier-6 { --u: clamp(44px, 4.4vw, 58px); }
.tier-7 { --u: clamp(40px, 4vw, 53px); }

/* zostan partnerem */
.become-sponsor {
    background: var(--black);
    color: var(--text-0);
    text-align: center;
    padding: clamp(90px, 13vh, 170px) var(--pad-x);
}
.become-sponsor-inner { max-width: 860px; margin: 0 auto; }
.become-sponsor h2 { margin-bottom: 22px; }
.become-sponsor p { color: var(--text-1); max-width: 60ch; margin: 0 auto; line-height: 1.7; }

/* strona zespolu - naglowek nad gridem */
body[data-page="team"] .hero-photo-sub { display: none; }

/* ==== formula student: czym jest / historia ==== */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.fs-about {
    background: var(--white);
    color: var(--ink);
    padding: clamp(70px, 10vh, 130px) 0 clamp(60px, 9vh, 110px);
    overflow: hidden;
}
.fs-about-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
}

/* czerwona plakietka wychodzaca poza krawedz strony */
.fs-head {
    position: relative;
    display: inline-block;
    margin: 0 0 26px;
    padding: 14px clamp(26px, 2.6vw, 46px);
    font-size: clamp(21px, 2.6vw, 38px);
    color: #fff;
    z-index: 0;
}
.fs-head::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -100vw; right: 0;
    background: var(--red);
    transform: skewX(var(--skew));
    transform-origin: bottom right;
    z-index: -1;
}
.fs-block.is-right { text-align: right; }
.fs-block.is-right .fs-head::before {
    left: 0; right: -100vw;
    transform: skewX(calc(-1 * var(--skew)));
    transform-origin: bottom left;
}

.fs-text {
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.75;
    color: #33333a;
    max-width: 74ch;
    margin: 0;
}
.fs-block.is-right .fs-text { margin-left: auto; }

.fs-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(30px, 4vw, 70px);
    align-items: center;
    margin-top: clamp(40px, 6vh, 80px);
}
.fs-figure img { width: 100%; height: auto; }

@media (max-width: 860px) {
    .fs-split { grid-template-columns: 1fr; }
    .fs-figure { order: 2; }
    .fs-block.is-right { text-align: left; }
    .fs-block.is-right .fs-head::before {
        left: -100vw; right: 0;
        transform: skewX(var(--skew));
        transform-origin: bottom right;
    }
    .fs-block.is-right .fs-text { margin-left: 0; }
}

/* ==== formula student: konkurencje ==== */
.fs-races-sec {
    background: var(--white);
    color: var(--ink);
    padding: clamp(20px, 4vh, 50px) 0 clamp(80px, 12vh, 140px);
    overflow: hidden;
}
.fs-races-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.fs-races-title {
    text-align: center;
    color: var(--ink);
    margin: 0 0 clamp(34px, 5vh, 62px);
}

.fs-races { display: flex; flex-direction: column; gap: 18px; }
.fs-race { --skew-w: 26px; }

/* pasek naglowka - ukosny, punkty widac jako jasnoszare tlo */
.fs-race-head {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    height: clamp(96px, 11vw, 132px);
    padding: 0;
    text-align: left;
    background: #f2f2f4;
    transform: skewX(var(--skew));
    overflow: hidden;
    transition: background 0.3s var(--ease);
}
.fs-race-head:hover { background: #ececef; }

.fs-race-photo {
    flex: 0 0 clamp(150px, 19vw, 260px);
    overflow: hidden;
    background: #dcdce0;
}
.fs-race-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: skewX(calc(-1 * var(--skew))) scale(1.28);
}
.fs-race-photo.is-empty { background: #e2e2e6; }

/* czerwony klin z kolkiem-strzalka */
.fs-race-arrow {
    position: relative;
    flex: 0 0 clamp(72px, 8vw, 108px);
    background: var(--red);
}
.fs-race-arrow::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 38px; height: 38px;
    transform: translate(-50%, -50%) skewX(calc(-1 * var(--skew)));
    background: url("../assets/icons/arrow.png") center / contain no-repeat;
    transition: transform 0.4s var(--ease);
}
.fs-race-head[aria-expanded="true"] .fs-race-arrow::after {
    transform: translate(-50%, -50%) skewX(calc(-1 * var(--skew))) rotate(90deg);
}

.fs-race-main {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 clamp(24px, 3vw, 54px);
    transform: skewX(calc(-1 * var(--skew)));
}
/* liczba punktow jako jasnoszare tlo pod nazwa */
.fs-race-pts {
    position: absolute;
    right: clamp(18px, 3vw, 60px);
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-d);
    font-size: clamp(46px, 7vw, 104px);
    font-weight: 700;
    line-height: 1;
    color: #d7d7dc;
    letter-spacing: -0.02em;
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}
.fs-race-pts i { font-style: normal; margin-left: 0.12em; }

.fs-race-label { position: relative; z-index: 1; min-width: 0; }
.fs-race-name {
    display: block;
    font-family: var(--font-d);
    font-size: clamp(16px, 1.7vw, 25px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.005em;
    color: var(--ink);
    line-height: 1.15;
}
.fs-race-en {
    display: block;
    margin-top: 5px;
    font-family: var(--font-u);
    font-size: clamp(10px, 0.95vw, 12px);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #71717a;
}

/* rozwiniety opis */
.fs-race-panel {
    background: var(--black);
    color: rgba(255, 255, 255, 0.9);
    transform: skewX(var(--skew));
    margin-top: 6px;
    overflow: hidden;
    transition: height 0.5s var(--ease);
}
.fs-race-panel[hidden] { display: none; }
.fs-race-panel p {
    transform: skewX(calc(-1 * var(--skew)));
    margin: 0;
    padding: clamp(26px, 3vw, 46px) clamp(34px, 5vw, 96px);
    font-size: clamp(14px, 1.1vw, 16.5px);
    line-height: 1.8;
    max-width: 108ch;
}

@media (max-width: 720px) {
    .fs-race-head { height: auto; min-height: 88px; }
    .fs-race-photo { flex-basis: 96px; }
    .fs-race-arrow { flex-basis: 56px; }
    .fs-race-arrow::after { width: 26px; height: 26px; }
    .fs-race-main { padding: 14px 14px; }
    /* na waskim ekranie liczba wchodzila pod nazwe - jasniejsza i wezsza kolumna tekstu */
    .fs-race-pts { font-size: 38px; color: #e3e3e8; right: 10px; }
    .fs-race-label { max-width: 64%; }
    .fs-race-name { font-size: 15px; }
    .fs-race-en { font-size: 9.5px; letter-spacing: 0.16em; }

    /* skos zjada na waskim ekranie tyle szerokosci, ze tekst wychodzil poza
       czarne tlo - na telefonie panel jest zwyklym prostokatem */
    .fs-race-panel { transform: none; }
    .fs-race-panel p {
        transform: none;
        padding: 22px 20px;
    }
}