/* =============================================================================
   pages.css - rozbudowa Max Moto o podstrony (crossy / quady / wypozyczalnia /
   dla dzieci) + sekcja trzech okraglych kafli na stronie glownej.
   Dopina sie NAD style.css, wiec korzysta z tych samych zmiennych i klas.
   ============================================================================= */

/* --- Nawigacja: podswietlenie aktywnej podstrony -------------------------- */
.nav a.is-active { color: var(--red); }
.nav a { position: relative; }
.nav a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--red); border-radius: 2px;
}

/* =============================================================================
   TRZY OKRAGLE KAFLE - wzor podeslany przez klienta.
   Spoczynek: kolo. Hover: zaokraglony kwadrat + cieplejszy kadr + duza etykieta.
   Cala plytka jest linkiem, wiec dziala tez z klawiatury (focus-visible).
   ============================================================================= */
.kola {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: #fff; padding: 96px 0 104px;
}
.kola-bg {
  position: absolute; inset: 0; z-index: -2;
  background: url('../images/g-flota.jpg') center/cover no-repeat;
  opacity: .28; filter: grayscale(.35);
}
.kola::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,14,16,.86), rgba(14,14,16,.94));
}
.kola-tytul {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; color: #fff;
  font-size: clamp(34px, 6vw, 68px); margin-bottom: clamp(28px, 4vw, 48px);
}
.kola-grid {
  display: grid; gap: clamp(20px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  justify-items: center; align-items: start;
}
.kolo {
  display: grid; justify-items: center; text-align: center; width: 100%;
  max-width: 320px; color: #fff;
}
.kolo-media {
  display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%;
  background-image: var(--img); background-size: cover; background-position: center;
  position: relative; overflow: hidden;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  transition: border-radius .5s cubic-bezier(.2,.8,.2,1),
              transform .5s cubic-bezier(.2,.8,.2,1),
              box-shadow .5s cubic-bezier(.2,.8,.2,1);
}
.kolo-media::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(228,20,27,.10), rgba(228,20,27,.42));
  opacity: 0; transition: opacity .45s ease;
}
.kolo:hover .kolo-media,
.kolo:focus-visible .kolo-media {
  border-radius: 22%; transform: translateY(-6px) scale(1.04);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
}
.kolo:hover .kolo-media::after,
.kolo:focus-visible .kolo-media::after { opacity: 1; }

.kolo-label {
  font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: clamp(22px, 2.6vw, 30px);
  margin-top: 20px; transition: color .3s ease;
}
.kolo:hover .kolo-label, .kolo:focus-visible .kolo-label { color: var(--red); }
.kolo-opis { color: var(--mut); font-size: 14.5px; margin-top: 4px; }

/* Bez napisu NA kadrze przy najechaniu - podpis pod kolem wystarcza
   (decyzja dyrektora). Zostaje sama zmiana ksztaltu + czerwone podswietlenie. */
.kolo:focus-visible { outline: 3px solid var(--red); outline-offset: 8px; border-radius: 24px; }

/* =============================================================================
   HERO PODSTRONY
   ============================================================================= */
.phero {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding: 168px 0 84px; min-height: 62vh; display: flex; align-items: flex-end;
  background-image: var(--img); background-size: cover; background-position: center;
}
.phero-veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(10,10,12,.94) 0%, rgba(12,12,14,.78) 48%,
              rgba(14,14,16,.42) 100%);
}
.phero-in { width: 100%; }
.phero h1 {
  font-size: clamp(36px, 6.4vw, 68px); color: #fff; margin-top: 6px;
}
.phero-lead { color: #D6D8DC; font-size: clamp(16px, 1.8vw, 19px); max-width: 56ch; margin-top: 18px; }
.phero .hero-cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.okruszki {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .14em;
  font-size: 12px; color: var(--mut); margin-bottom: 22px;
}
.okruszki a:hover { color: var(--red); }
.okruszki span { opacity: .5; margin: 0 6px; }

/* =============================================================================
   LISTA KATEGORII (crossy / quady)
   ============================================================================= */
.oferta-kat { background: var(--paper); }
.kat-lista { display: grid; gap: 16px; }
.kat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center;
  background: #fff; border: 1px solid #E4E4E2; border-left: 4px solid var(--red);
  border-radius: var(--radius); padding: 26px 28px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.kat:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.10); }
.kat h3 { font-size: 21px; margin-bottom: 8px; }
.kat p { color: #55575C; font-size: 15.5px; max-width: 62ch; }
.kat-cena span {
  display: inline-block; white-space: nowrap;
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; font-size: 15px; color: var(--red);
  background: rgba(228,20,27,.08); border: 1px solid rgba(228,20,27,.22);
  border-radius: 999px; padding: 9px 18px;
}
@media (max-width: 620px) {
  .kat { grid-template-columns: 1fr; }
  .kat-cena { justify-self: start; }
}

/* --- Blok „hit" / porownanie ---------------------------------------------- */
.hit { background: var(--coal); color: #fff; }
.hit h2, .hit h3 { color: #fff; }
.hit p { color: #C7C9CE; }
.hit .spec-lista li { color: #D6D8DC; }
.hit .sprzedaz-foto img { border-radius: var(--radius); }
.hit .btn + .btn { margin-left: 10px; }

/* =============================================================================
   SERWIS
   ============================================================================= */
.serwis { background: var(--paper); }
.serw-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.serw {
  background: #fff; border: 1px solid #E4E4E2; border-radius: var(--radius);
  padding: 28px; transition: transform .25s ease, box-shadow .25s ease;
}
.serw:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.10); }
.serw h3 { font-size: 19px; margin-bottom: 8px; }
.serw p { color: #55575C; font-size: 15.5px; }

/* =============================================================================
   MARKI
   ============================================================================= */
.marki { background: var(--ink); color: #fff; }
.marki h2 { color: #fff; }
.marki .sec-sub { color: var(--mut); }
.marki-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.marki-chips span {
  font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase;
  letter-spacing: .06em; font-size: 14px; color: #E6E7EA;
  border: 1px solid var(--line); border-radius: 999px; padding: 10px 20px;
  background: rgba(255,255,255,.03); transition: border-color .25s ease, color .25s ease;
}
.marki-chips span:hover { border-color: var(--red); color: #fff; }

/* =============================================================================
   FLOTA WYNAJMU
   ============================================================================= */
.flota { background: var(--paper); }
.fl-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fl-grupa { background: #fff; border: 1px solid #E4E4E2; border-radius: var(--radius); padding: 28px; }
.fl-grupa h3 {
  font-size: 20px; padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 3px solid var(--red); display: inline-block;
}
.fl-lista { list-style: none; }
.fl-row { display: grid; gap: 3px; padding: 15px 0; border-bottom: 1px solid #EDEDEB; }
.fl-row:last-child { border-bottom: 0; }
.fl-nazwa {
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .02em; font-size: 16px; color: var(--ink);
}
.fl-ile {
  font-family: 'Barlow', sans-serif; font-weight: 600; text-transform: none;
  letter-spacing: 0; font-size: 12px; color: var(--red);
  background: rgba(228,20,27,.09); border-radius: 999px; padding: 3px 10px; margin-left: 6px;
}
.fl-opis { color: #6A6C71; font-size: 14.5px; }

/* =============================================================================
   WYPRAWY / OKAZJE
   ============================================================================= */
.wyprawy { background: var(--coal); color: #fff; }
.wyprawy h2 { color: #fff; }
.wyprawy .sec-sub { color: var(--mut); }
.wyprawy--dzieci { background: var(--ink); }
.wyp-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wyp {
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.wyp:hover { transform: translateY(-4px); border-color: var(--red); background: rgba(255,255,255,.07); }
.wyp h3 { font-size: 19px; color: #fff; margin-bottom: 8px; }
.wyp p { color: #C0C3C8; font-size: 15.5px; }
.wyp-cta { display: flex; justify-content: center; margin-top: 40px; }
.wyprawy .btn-dark, .dzieci .btn-dark, .sprzedaz .btn-dark, .hit .btn-dark
  { background: #fff; color: var(--ink); }
.wyprawy .btn-dark:hover, .dzieci .btn-dark:hover, .sprzedaz .btn-dark:hover,
.hit .btn-dark:hover { background: var(--red); color: #fff; }

/* =============================================================================
   DLA DZIECI - podstrona
   ============================================================================= */
.dzieci-full { background: var(--paper); }
.dzieci-full .dzieci-foto img { border-radius: var(--radius); }

/* zdjecie na home jako link do podstrony */
.dzieci-foto--link { position: relative; display: block; cursor: pointer; }
.dzieci-foto--link .foto-more {
  position: absolute; left: 18px; bottom: 18px; z-index: 3;
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; font-size: 13px; color: #fff;
  background: var(--red); border-radius: 999px; padding: 10px 18px;
  box-shadow: 0 10px 24px rgba(228,20,27,.4);
  opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease;
}
.dzieci-foto--link:hover .foto-more,
.dzieci-foto--link:focus-visible .foto-more { opacity: 1; transform: none; }
.dzieci-foto--link img { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.dzieci-foto--link:hover img { transform: scale(1.03); }

/* =============================================================================
   STOPKA - socjale
   ============================================================================= */
.stopka-socials { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.stopka-socials .soc, .k-socials .soc {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Oswald', sans-serif; font-weight: 500; text-transform: uppercase;
  letter-spacing: .05em; font-size: 13px; color: #D6D8DC;
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.stopka-socials .soc:hover, .k-socials .soc:hover {
  border-color: var(--red); color: #fff; background: rgba(228,20,27,.12);
}
.stopka-tel { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 20px; }

/* =============================================================================
   Drobiazgi
   ============================================================================= */
.hdr .brand img { height: 54px; }
@media (max-width: 900px) { .hdr .brand img { height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .kolo-media, .kolo-label, .dzieci-foto--link img, .foto-more { transition: none; }
  .kolo:hover .kolo-media { transform: none; }
}

/* --- Logo: zwarty znak w pasku, pelne w stopce ---------------------------- */
.hdr .brand img { height: 52px; width: auto; }
@media (min-width: 900px) { .hdr-in { height: 84px; } .hdr .brand img { height: 60px; } }
@media (max-width: 480px) { .hdr .brand img { height: 44px; } }
.stopka-logo { height: 128px; width: auto; margin-inline: auto; }

/* =============================================================================
   KARTY PRODUKTOWE - uklad katalogu (wzor: motokraft.eu/kategoria/crossy/)
   foto -> nazwa -> cena -> przycisk. Brak zdjecia modelu = ZAMIERZONY
   placeholder z ikona, nie cudze foto podstawione pod nasz towar.
   ============================================================================= */
.prod-grid {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.prod {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #E4E4E2; border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.prod:hover { transform: translateY(-6px); border-color: rgba(228,20,27,.35);
  box-shadow: 0 22px 46px rgba(0,0,0,.13); }
.prod-media { position: relative; }
.prod-foto {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  background-image: var(--img); background-size: cover; background-position: center;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.prod:hover .prod-foto { transform: scale(1.04); }
.prod-media { overflow: hidden; }
.prod-foto--brak {
  display: grid; place-items: center; gap: 10px; background: #EDEDEB;
  border-bottom: 1px solid #E4E4E2; color: #A9ABAF;
}
.prod-foto--brak svg { width: 62px; height: 62px; }
.prod-foto--brak em {
  font-family: 'Oswald', sans-serif; font-style: normal; text-transform: uppercase;
  letter-spacing: .16em; font-size: 11px;
}
.prod-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: 11.5px; color: #fff;
  background: var(--red); border-radius: 999px; padding: 7px 14px;
  box-shadow: 0 8px 20px rgba(228,20,27,.4);
}
.prod-body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 22px; }
.prod-body h3 { font-size: 19px; margin-bottom: 10px; }
.prod-body p { color: #55575C; font-size: 15px; flex: 1; }
.prod-stopka {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid #EDEDEB;
  text-align: center;
}
.prod-cena {
  font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; font-size: 22px; color: var(--red); line-height: 1;
}
.prod-btn { padding: 10px 18px; font-size: 13.5px; }

/* =============================================================================
   KARTY OKAZJI (wyprawy 4x4 i oferta dla dzieci) - z ikonami
   ============================================================================= */
.okazje-grid {
  display: grid; gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.okazja {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.045); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 26px 28px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.okazja::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .4s cubic-bezier(.2,.8,.2,1);
}
.okazja:hover { transform: translateY(-5px); border-color: rgba(228,20,27,.5);
  background: rgba(255,255,255,.075); }
.okazja:hover::before { transform: scaleX(1); }
.okazja-ico {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px;
  margin-bottom: 20px; color: var(--red);
  background: rgba(228,20,27,.12); border: 1px solid rgba(228,20,27,.28);
  transition: background .25s ease, color .25s ease;
}
.okazja-ico svg { width: 26px; height: 26px; }
.okazja:hover .okazja-ico { background: var(--red); color: #fff; border-color: var(--red); }
.okazja h3 { font-size: 18.5px; color: #fff; margin-bottom: 9px; }
.okazja p { color: #C0C3C8; font-size: 15px; }

/* wariant dziecięcy - ta sama forma, cieplejszy akcent */
.okazja--kids .okazja-ico { color: #FFC24D; background: rgba(255,194,77,.14);
  border-color: rgba(255,194,77,.32); }
.okazja--kids:hover .okazja-ico { background: #FFC24D; color: var(--ink);
  border-color: #FFC24D; }
.okazja--kids::before { background: #FFC24D; }
.okazja--kids:hover { border-color: rgba(255,194,77,.5); }

@media (prefers-reduced-motion: reduce) {
  .prod, .prod-foto, .okazja, .okazja::before, .okazja-ico { transition: none; }
  .prod:hover, .okazja:hover { transform: none; }
}

/* --- 5 kafli w ukladzie 3 + 2 (wyprawy 4x4) -------------------------------
   Siatka 6-kolumnowa: pierwsze trzy po 2 kolumny, ostatnie dwa po 3.
   Ponizej 900 px wraca zwykly auto-fit. */
@media (min-width: 900px) {
  .okazje-grid--3-2 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .okazje-grid--3-2 > * { grid-column: span 2; }
  .okazje-grid--3-2 > *:nth-child(4),
  .okazje-grid--3-2 > *:nth-child(5) { grid-column: span 3; }
}

/* --- Stopka: numer i socjale w JEDNEJ linii, wyrownane do srodka ----------
   .stopka-tel to Oswald 20 px, pigulki socjali maja 13 px + padding - bez tego
   numer siedzial optycznie wyzej niz rzad przyciskow. */
.stopka-in { align-items: center; }
.stopka-kontakt {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-left: auto;
}
.stopka-kontakt .stopka-socials { margin-top: 0; }
.stopka-tel {
  display: inline-flex; align-items: center; line-height: 1;
  padding: 10px 0;                     /* ta sama wysokosc optyczna co pigulki */
}
@media (max-width: 900px) {
  .stopka-kontakt { margin-left: 0; justify-content: center; width: 100%; }
  .stopka-kontakt .stopka-socials { justify-content: center; }
}

/* =============================================================================
   SKLAD TEKSTU - czytelnosc
   Przegladarka domyslnie lamie „gdzie wyjdzie": zostawia sieroty w naglowkach
   i pojedyncze slowa w ostatniej linii akapitu. Trzy rzeczy to naprawiaja:
     * text-wrap: balance  - rownomierna dlugosc linii w naglowkach,
     * text-wrap: pretty   - brak samotnego slowa na koncu akapitu,
     * miara (max-width w ch) - linia nie ciagnie sie przez caly ekran.
   ============================================================================= */
h1, h2, h3, .kola-tytul { text-wrap: balance; }
p, li { text-wrap: pretty; }

/* miara: 60-70 znakow to komfortowy zakres czytania */
.sec-sub, .band-sub { max-width: 62ch; }
.sec-head--center .sec-sub, .band-sub { margin-inline: auto; }
.phero-lead { max-width: 52ch; }
.prod-body p, .okazja p, .serw p, .fl-opis { max-width: 44ch; }
.kat p { max-width: 58ch; }

/* naglowki sekcji: krotsza miara, zeby nie robily sie 4-linijkowe plachty */
.sec-head h2 { max-width: 16ch; }
.sec-head--center h2 { margin-inline: auto; }
.band-in h2 { max-width: 18ch; margin-inline: auto; }

/* twarde spacje po polskich jednoliterowcach w tekscie budowanym recznie
   sa w tresci; tu pilnujemy, zeby krotkie slowo nie zostalo samo w naglowku */
.okazja h3, .prod-body h3, .fl-grupa h3, .serw h3 { text-wrap: balance; }

/* akapity w blokach opisowych - odstep miedzy nimi zamiast zbitej sciany */
.sprzedaz-txt p + p, .dzieci-txt p + p, .stack p + p { margin-top: 14px; }

/* listy: wiecej powietrza miedzy pozycjami */
.spec-lista li + li, .dzieci-lista li + li { margin-top: 10px; }

/* na mobile skracamy miare i wylaczamy sztywne lamania <br> w naglowkach band,
   bo przy 390 px wymuszony podzial robi bardzo krotkie linie */
@media (max-width: 560px) {
  .band-in h2 br, .sprzedaz-txt h2 br, .dzieci-txt h2 br,
  .sec-head h2 br, .vouchery h2 br { display: none; }
  .band-in h2, .sec-head h2 { max-width: none; }
  .sec-sub, .band-sub, .phero-lead { max-width: 38ch; }
}

/* =============================================================================
   INTERLINIA POD POLSKIE DIAKRYTYKI
   style.css ustawia h1/h2 na line-height 1.06. Przy wersalikach Oswalda to
   za ciasno: ogonek w „Ę"/„Ą" i kreska w „Ś"/„Ó" z sasiednich wierszy wchodza
   na siebie (widoczne w „SERWIS, CZESCI I KASKI"). 1.14 daje ogonkom miejsce
   i nadal czyta sie jak zwarty naglowek.
   ============================================================================= */
h1, h2 { line-height: 1.14; }
/* Naglowki podstron sa WERSALIKAMI: w jednym wierszu wypada descender („J"
   w WYNAJEM), a w nastepnym akcent („Ó" w QUADÓW) - przy 1.08 te dwa elementy
   zachodza na siebie. 1.18 rozwiazuje to bez rozbijania zwartosci tytulu. */
.phero h1 { line-height: 1.18; }
.hero h1 { line-height: 1.12; }
.kola-tytul { line-height: 1.12; }
h3 { line-height: 1.24; }

/* oddech pod naglowkiem sekcji - lead przyklejal sie do ogonkow */
.sec-head h2 + .sec-sub, .sec-head .sec-sub { margin-top: 18px; }
.band-in h2 + .band-sub { margin-top: 16px; }
.sec-head { margin-bottom: 44px; }

/* dodatkowy oddech pod H1 podstrony - lead stal tuz pod ogonkami */
.phero-lead { margin-top: 24px; }

/* =============================================================================
   PODSTRONA „DLA DZIECI" - poprawki
   ============================================================================= */

/* 1. Tekst byl BIALY, bo .dzieci-txt z style.css powstalo dla ciemnej sekcji
   na stronie glownej. Tutaj tlo jest jasne (--paper), wiec napisy znikaly. */
.dzieci-full .dzieci-txt h2 { color: var(--ink); }
.dzieci-full .dzieci-txt p { color: #55575C; }
.dzieci-full .dzieci-lista li { color: #2E3033; }
.dzieci-full .dzieci-note { color: #6A6C71; }

/* 2. Hero: zdjecie bylo przyblizone tak mocno, ze zostawaly same kierownice.
   Kadr ma proporcje 1.42, a pasek hero jest znacznie szerszy - stad zoom.
   Nizszy hero + kadrowanie od gory pokazuje dzieci na quadach. */
/* Kadr 21:9 - proporcje bliskie paskowi hero, wiec przyciecie jest minimalne.
   Kotwiczymy do dolu, zeby maszyny i sylwetki dzieci zawsze byly w kadrze. */
.phero--dzieci {
  min-height: 64vh; padding: 160px 0 76px;
  background-position: center bottom;
}
@media (max-width: 700px) {
  .phero--dzieci { min-height: 52vh; background-position: 68% bottom; }
}
/* zaslona lagodniejsza po prawej, zeby quad i dziecko nie tonely w czerni */
.phero--dzieci .phero-veil {
  background: linear-gradient(100deg, rgba(10,10,12,.93) 0%, rgba(12,12,14,.72) 42%,
              rgba(14,14,16,.28) 72%, rgba(14,14,16,.12) 100%);
}

/* --- Hero podstron na kadrach 16:9 - kotwiczenie do srodka/dolu, zeby maszyny
   nigdy nie wypadly poza kadr przy szerokim, niskim pasku hero ------------- */
.phero { background-position: center 62%; }
@media (max-width: 700px) { .phero { background-position: 58% 60%; } }
/* w kolach kadr 16:9 przycinamy do kwadratu - srodek zawiera sprzet */
.kolo-media { background-position: center 55%; }


/* ============ WYNAJEM: MASZYNY ZE ZDJECIAMI I CENAMI ============ */
.wyn-blok { margin-bottom: 54px; }
.wyn-blok:last-child { margin-bottom: 0; }
.wyn-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px 28px; padding-bottom: 16px; border-bottom: 2px solid var(--ink);
}
.wyn-tytul h3 { font-size: clamp(21px, 2.5vw, 27px); }
.wyn-warunek { color: #6A6C71; font-size: 14.5px; margin-top: 5px; }
.wyn-ceny { display: flex; flex-wrap: wrap; gap: 10px; }
.wyn-cena {
  display: inline-flex; align-items: baseline; gap: 6px; background: var(--red); color: #fff;
  border-radius: 8px; padding: 9px 16px; font-family: 'Oswald', sans-serif;
  text-transform: uppercase; letter-spacing: .03em;
}
.wyn-cena b { font-size: 21px; font-weight: 700; }
.wyn-cena i { font-style: normal; font-size: 13.5px; opacity: .9; }
.wyn-cena--alt { background: var(--ink); }
.wyn-wcenie {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 26px;
}
.wyn-wcenie li {
  background: #fff; border: 1px solid #E4E4E2; border-radius: 999px;
  padding: 6px 14px; font-size: 13.5px; color: #4A4C51;
}
.wyn-wcenie li::before { content: "✓"; color: var(--red); font-weight: 700; margin-right: 7px; }
.wyn-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.wyn-grid--duze { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.maszyna {
  background: #fff; border: 1px solid #E4E4E2; border-radius: var(--radius); overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.maszyna:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(14,14,16,.14); border-color: #D6D6D3; }
.maszyna img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.maszyna-in { padding: 16px 18px 18px; }
.maszyna-in h4 {
  font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase;
  letter-spacing: .01em; font-size: 17px;
}
.maszyna-tagi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.maszyna-tagi span {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  font-family: 'Oswald', sans-serif; color: #6A6C71;
  border: 1px solid #E4E4E2; border-radius: 5px; padding: 3px 8px;
}
.wyn-dopisek { margin-top: 20px; color: #6A6C71; font-size: 14.5px; }
@media (max-width: 620px) {
  .wyn-head { align-items: flex-start; }
  .wyn-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}


/* ============ KATALOG SPRZEDAZY (marki + karty modeli) ============ */
.marka-blok { margin: 46px 0 22px; }
.marka-blok:first-of-type { margin-top: 0; }
.marka-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px 20px; padding-bottom: 14px; border-bottom: 2px solid var(--ink);
}
.marka-head h3 { font-size: clamp(21px, 2.4vw, 26px); }
.marka-link {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .08em;
  font-size: 12.5px; color: #6A6C71; border-bottom: 1px solid #D6D6D3;
}
.marka-link:hover { color: var(--red); border-color: var(--red); }
.prod-media { position: relative; }
.prod-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; }
.prod-marka {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .16em;
  font-size: 11.5px; color: var(--red); margin-bottom: 4px;
}
.prod-badge {
  position: absolute; top: 12px; left: 12px; background: var(--ink); color: #fff;
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .06em;
  font-size: 12px; border-radius: 6px; padding: 5px 11px;
}


/* ============ AKCESORIA: KASKI ============ */
.kaski { background: var(--paper); }
.kaski-foto { max-width: 900px; margin: clamp(32px, 4vw, 52px) auto 0;
  border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 18px 40px rgba(14,14,16,.14); }
.kaski-foto img { width: 100%; height: auto; display: block; }

/* plakietka homologacji na kafelku quada */
.prod-badge--homo{left:auto;right:10px;background:#fff;color:var(--red);
  border:2px solid var(--red);padding:4px 10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  box-shadow:0 3px 10px rgba(228,20,27,.28)}


/* ============ NASZ TOR ============
   Siatka: duze zdjecie na calej szerokosci, pod nim trzy rowne kafle.
   Wysokosci sa stale, bo zdjecia z telefonu maja rozne proporcje. */
.tor { background: var(--paper); }
.tor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tor-foto { border-radius: var(--radius); overflow: hidden; background: var(--ink);
  box-shadow: 0 12px 30px rgba(0,0,0,.14); position: relative; }
.tor-foto--big { grid-column: 1 / -1; }
.tor-foto img { width: 100%; height: 250px; object-fit: cover; display: block;
  transition: transform .5s; }
.tor-foto--big img { height: clamp(260px, 34vw, 420px); }
.tor-foto:hover img { transform: scale(1.05); }
.tor-foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 14px;
  color: #fff; font-size: 14px; line-height: 1.4;
  background: linear-gradient(180deg, rgba(14,14,16,0), rgba(14,14,16,.86));
}
@media (max-width: 860px) {
  .tor-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .tor-grid { grid-template-columns: 1fr; }
  .tor-foto img { height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .tor-foto img { transition: none; }
  .tor-foto:hover img { transform: none; }
}

/* ============ VOUCHERY ============
   Ciemna sekcja, bo karty .okazja maja bialy tekst i jasne obramowanie. */
.vouchery { background: var(--ink); color: #fff; }
.vouchery h2 { color: #fff; }
.vouchery .sec-sub { color: var(--mut); }