/* Content (prose) styling — on-brand body links and lists for SEO copy blocks.
   Loaded last so it overrides the legacy defaults (e.g. white .icon-small).
   Brand gold: #ccac00 (accent) / #887300 (readable on white). Body text: #555. */

.prose p {
  line-height: 165%;
  color: #555;
}

/* In-content links: branded, not browser-default blue. */
.prose a {
  color: #887300;
  text-decoration: none;
  border-bottom: 1px solid rgb(204 172 0 / 0.45);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.prose a:hover,
.prose a:focus {
  color: #ccac00;
  border-bottom-color: #ccac00;
}

/* Prose lists: gold marker, aligned hanging indent (no browser bullets). */
.prose ul {
  list-style: none;
  padding-left: 0;
  font-size: 100%;
}
.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 9px;
  line-height: 150%;
  color: #555;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ccac00;
}

/* Defensive: neutralise the car-card ".section-limo ul li:last-child"
   gold/centered price styling if a prose list is ever nested in that context. */
.prose ul li:last-child {
  text-align: left;
  margin-top: 0;
  color: #555;
  font-size: inherit;
}

/* Step / checklist lists: gold checkmark, flex-aligned to the first text line. */
.prose ul.steps li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding-left: 0;
  line-height: 1.55;
}
.prose ul.steps li::before {
  display: none;
}
.prose ul.steps li .icon-small {
  position: static;
  flex: 0 0 auto;
  color: #ccac00 !important; /* override .limo-car .icon-small{color:white} */
  font-size: 1em;
  line-height: 1.55; /* match text line box so the glyph centers on the first line */
}

/* FAQ definition lists inside prose. */
.prose dl {
  margin: 0;
}
.prose dl > div {
  margin-bottom: 26px;
}
.prose dl > div:last-child {
  margin-bottom: 0;
}
.prose dt {
  color: #333;
  font-size: 108%;
  margin-bottom: 8px;
}
.prose dd {
  margin: 0;
  color: #555;
  line-height: 165%;
}

/* A touch more breathing room above stacked prose blocks. */
.prose h3 {
  margin-top: 18px;
}
.prose h3:first-child {
  margin-top: 0;
}

/* --- CTA "Rezerwuj" w nawigacji (złoty przycisk zamiast zwykłego linku) --- */
.main-nav li a.nav-cta:link,
.main-nav li a.nav-cta:visited {
  background-color: #ccac00;
  color: #fff;
  padding: 9px 24px;
  border-radius: 100px;
  border-bottom: 0;
  transition: background-color 0.2s;
}
.main-nav li a.nav-cta:hover,
.main-nav li a.nav-cta:active {
  background-color: #887300;
  border-bottom: 0;
}
.sticky .main-nav li a.nav-cta:link,
.sticky .main-nav li a.nav-cta:visited {
  color: #fff;
  padding: 9px 24px;
}
@media only screen and (max-width: 767px) {
  .main-nav li a.nav-cta:link,
  .main-nav li a.nav-cta:visited {
    display: inline-block;
    padding: 9px 24px;
    margin-top: 8px;
  }
}

/* ── GALERIA FLOTY NA STRONIE GŁÓWNEJ (2026-08-19) ──────────────────────────
   Kwadratowe kadry celowo: Google przycina miniatury w wynikach mniej więcej
   do kwadratu, więc to, co widać tutaj, jest tym, co zobaczy w wyszukiwarce. */
.section-fleet-photos { background-color: #f4f4f4; padding-top: 60px; }
.section-fleet-photos .long-copy { margin-bottom: 10px; text-align: center; }

.gallery-fleet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1140px;
  margin: 30px auto 0;
}
.gallery-fleet__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  text-decoration: none;
}
.gallery-fleet__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .35s ease;
}
.gallery-fleet__item:hover img { transform: scale(1.05); }
.gallery-fleet__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 16px 14px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .78));
  color: #fff;
  font-size: 78%;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
}

@media only screen and (max-width: 1023px) {
  .gallery-fleet { grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 0 16px; }
}
@media only screen and (max-width: 480px) {
  .gallery-fleet { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .gallery-fleet__label { font-size: 62%; padding: 20px 8px 10px; }
}

/* Galeria na podstronach aut nie miała reguł mobilnych — cztery kolumny
   na telefonie dawały kafelki po ~70 px. */
@media only screen and (max-width: 1023px) {
  .gallery-limo-car { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 16px; }
}

/* ── EMBED WIDEO NA PODSTRONIE AUTA (2026-08-19) ────────────────────────────
   youtube-nocookie + loading=lazy: iframe YouTube ciągnie ~1 MB skryptów,
   więc nie może blokować renderu strony, która żyje z Core Web Vitals. */
.video-embed {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  background: #000;
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed__note { margin-top: 18px; text-align: center; font-size: 90%; }

/* Tło hero podstrony różowego Hummera */
.hummerPink {
  background-image: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)),
    url(../img/cars/HummerPink1.webp);
  background-size: cover;
  background-position: center;
  height: 100vh;
  color: #fff;
  background-attachment: fixed;
}

/* ── KARTY FLOTY NA PRAWDZIWYCH ZDJĘCIACH — v3 (2026-08-20) ─────────────────
   Było: wycinanki 640x193 na białym tle, potem fotografia wklejona jako
   prostokąt 12px wewnątrz karty 20px — zgrzyt. Teraz fotografia jest
   NAGŁÓWKIEM karty: idzie od krawędzi do krawędzi i jest przycinana przez
   zaokrąglenie samej karty (border-radius 20px + overflow hidden), więc kadr
   i karta są jednym elementem, nie zdjęciem w ramce.
   Rzędy kart są flexowe (:has), żeby karty w rzędzie miały równą wysokość,
   a cena była zawsze przy dolnej krawędzi. Fallback bez :has = stare floaty
   + min-height, nadal poprawne.
   Sekcja `.gallery-fleet` niżej została w arkuszu celowo — gdyby wracać do
   wariantu „wycinanki + osobna galeria", styl jest gotowy. */

/* Rząd kart: flex zamiast floatów — równa wysokość, stały rynsztok. */
.section-limo .row:has(> .col > .wrapper) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  column-gap: 24px;
}
.section-limo .row:has(> .col > .wrapper)::before,
.section-limo .row:has(> .col > .wrapper)::after { content: none; }
.section-limo .row:has(> .col > .wrapper) > .col.span-1-of-3 {
  float: none;
  display: flex;
  width: calc((100% - 48px) / 3);
  margin: 12px 0;
}

/* Gdy w ostatnim rzędzie zostaje jedno auto — centrujemy zamiast dziury.
   Druga linijka łapie też cennik, gdzie markup nie ma klasy .row-center. */
.row.row-center { display: flex; justify-content: center; }
.row.row-center::after { content: none; }
.row.row-center .col.span-1-of-3 { float: none; }
.section-limo .row:has(> .col > .wrapper):has(> .col:only-of-type) {
  justify-content: center;
}

/* Karta: kolumna — zdjęcie / nazwa / cechy / cena dobita do dołu. */
.wrapper { position: relative; }
.section-limo .wrapper {
  height: auto;
  min-height: 430px; /* fallback dla przeglądarek bez :has */
  width: 100%;
  padding: 0;        /* zdjęcie ma dochodzić do krawędzi karty */
  display: flex;
}
.section-limo .wrapper-link {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Fotografia = nagłówek karty: stały kadr, zero własnych zaokrągleń —
   przycina ją border-radius karty, więc promienie zawsze się zgadzają.
   Kadrowanie 16/10 tylko dla .limo-thumb (PL home + cennik) — EN ma stare
   wycinanki 640x193, których nie wolno przycinać. */
.section-limo .wrapper-link > img {
  width: 100%;
  max-width: none;
  border-radius: 0;
  display: block;
}
.limo-thumb {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Nazwa auta: mocniejszy kontrast, szeroki tracking, złota kreska jak w h2. */
.section-limo .limo-features {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0 24px 22px;
}
.section-limo .limo-features h3 {
  margin: 22px 0 6px;
  font-size: 100%;
  letter-spacing: 2px;
  color: #2f2f2f;
}
.section-limo .limo-features h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background-color: #ccac00;
  margin: 12px auto 0;
}

/* Lista cech: więcej światła między wierszami. */
.section-limo .limo-features ul {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: 6px;
  margin-bottom: 0;
}
.section-limo .limo-features li {
  margin-bottom: 8px;
  line-height: 1.45;
  color: #5e5e5e;
}

/* Wiersz ceny: dobity do dołu karty, oddzielony złotą nitką. */
.section-limo .limo-features li:has(+ li.first) { display: none; } /* pusty spacer z markupu */
.section-limo .limo-features li.first {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(204, 172, 0, .3);
  color: #887300;
  letter-spacing: .5px;
}

/* Hover: bazowy arkusz daje różową łunę (#ff149366) — na jasnej, złotej
   stronie robi jarmark. Podmieniamy na głęboki, ciepły cień; transform
   i skala zdjęcia zostają z arkusza bazowego. */
.section-limo .wrapper:hover {
  box-shadow: 0 20px 44px rgba(46, 36, 0, .16), 0 6px 14px rgba(0, 0, 0, .07);
}

/* Plakietka „HIT NA PANIEŃSKI": chip z mrożonego szkła z różową kropką —
   sygnał marki premium zamiast neonowej naklejki promocyjnej. */
.limo-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 4px;
  background: rgba(253, 252, 248, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #454545;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .22);
  pointer-events: none;
}
.limo-badge::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff1493;
}

@media only screen and (max-width: 767px) {
  .row.row-center { display: block; }
  .section-limo .row:has(> .col > .wrapper) > .col.span-1-of-3 {
    width: 100%;
    margin: 0 0 4%;
  }
  .section-limo .wrapper { min-height: 0; }
  /* queries.css zwęża .limo-features do 60% — przy pełnym zdjęciu w karcie
     wracamy do pełnej szerokości z własnym paddingiem. */
  .section-limo .limo-features { width: auto; margin: 0; padding: 0 20px 20px; }
  .limo-badge { top: 14px; left: 14px; font-size: 10px; padding: 7px 12px; }
}