/*
 * Style specyficzne dla landingu Rydułtowy.
 * Ładowane automatycznie PO landing.css (baza) — tu tylko RÓŻNICE.
 * Każdą regułę scope'uj klasą miasta z kontenera: `.pl--rydultowy`.
 * Hero: layout „rating".
 */

/* --- Hero watermark „§": większy niż bazowy 360px (tylko Rydułtowy) -------- */
.pl--rydultowy .pl-hero__watermark {
  font-size: 630px;
  position: absolute; right: 43%; top: 50%; transform: translateY(-50%);
}

/* --- Hero: jednolity odstęp 24px między elementami kolumny (eyebrow → tytuł →
   lead → CTA → oceny). Baza używa różnych margin-top — zerujemy je i sterujemy
   gapem flexa. */
.pl--rydultowy .pl-hero__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pl-banner-section{
  background: #152133;
}
.pl--rydultowy .pl-hero__left > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- Hero eyebrow: złota kreska + tekst zamiast obwiedzionego boxa --------- */
.pl--rydultowy .pl-hero .pl-eyebrow--gold {
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.pl--rydultowy .pl-hero .pl-eyebrow--gold::before {
  content: "";
  flex: none;
  width: 40px;
  height: 2px;
  background: currentColor; /* kolor złoty z .pl-eyebrow--gold */
}
.pl-heroband{
  padding-bottom: 30px
}
/* --- Hero title: fragment „Twoja sprawa…" ([[…]] → .pl-hl) w złotym gradiencie */
.pl--rydultowy .pl-hero__title .pl-hl {
  background: var(--gradient-zoto-invicta, linear-gradient(270deg, #FFC48E 0%, #FFC888 12%, #FFD079 24%, #FFD079 44%, #FFCE7C 65%, #FFC789 86%, #FFC48E 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: var(--pl-font-heading, "Marcellus"), serif;
  font-size: 52px;
  line-height: 114%;
  text-transform: uppercase;
}
.pl-hero__title{
  font-size: 52px;
}
/* --- Hero: złota ramka za zdjęciem (jak goldframe w Rudzie Śląskiej) -------
   Rating layout nie renderuje spana .pl-hero__goldframe, więc ramkę
   odtwarzamy pseudo-elementem: przesunięta o 22px złota obwódka za zdjęciem
   (zdjęcie na z-index 1 nad nią). */
.pl--rydultowy .pl-hero__image {
  position: relative;
  overflow: visible;
  border-radius: 0;
  /* proporcje zdjęcia hero (560×500) */
  aspect-ratio: 560 / 500;
  max-width: 500px;
  margin-top: 20px
}
.pl--rydultowy .pl-hero__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translate(22px, 22px);
  border: 1px solid var(--pl-zloto);
  border-radius: 8px;
}
.pl--rydultowy .pl-hero__image img {
  position: relative;
  z-index: 1;
  border-radius: 8px;
}
/* Pływający box ze statystyką nad zdjęciem (z-index wyższy niż img, żeby
   go nie przykryło — ramka za zdjęciem (0) < zdjęcie (1) < statbox (2)).
   Tło = złoty gradient Invicty, radius 5px, teksty granatowe. */
.pl--rydultowy .pl-hero__statbox {
  z-index: 2;
  background: var(--gradient-zoto-invicta, linear-gradient(270deg, #FFC48E 0%, #FFC888 12%, #FFD079 24%, #FFD079 44%, #FFCE7C 65%, #FFC789 86%, #FFC48E 100%));
  border-radius: 5px;
  /* po lewej stronie zdjęcia, wychodzi poza jego lewą krawędź */
  right: auto;
  left: -66px;
  bottom: 3px;
  text-align: left;
}
.pl--rydultowy .pl-hero__statbox-num {
  color: #111D28;
  font-family: var(--pl-font-heading, "Marcellus"), serif;
  font-size: 38px;
  line-height: 114%;
  text-transform: uppercase;
}
.pl--rydultowy .pl-hero__statbox-label {
  color: #111D28;
  font-weight: 500;
  font-size: 14px
}

/* --- Sekcja „Nasze specjalizacje": eyebrow kreska (granatowa) zamiast boxa - */
.pl--rydultowy .pl-services .pl-eyebrow--dark {
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.pl--rydultowy .pl-services .pl-eyebrow--dark::before {
  content: "";
  flex: none;
  width: 40px;
  height: 2px;
  background: var(--kolor-granat-800-to-tekst, #152232);
}
/* Sublabele („Obszary flagowe", „Pozostałe specjalizacje") bez kreski */
.pl--rydultowy .pl-services__sublabel::before {
  display: none;
}
/* Tytuł sekcji „Nasze specjalizacje" — 38px */
.pl--rydultowy .pl-services__title {
  font-size: 38px;
}
/* Numery kart (01/02/03) w gradiencie czerń→złoto */
.pl--rydultowy .pl-services .pl-card__num {
  background: var(--gradient-czer-zoto-invicta, linear-gradient(36deg, #010101 0%, #FFCF79 93%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width: fit-content;
}

/* Tytuł sekcji opinii „Zaufali nam w Rydułtowach" — 32px */
.pl--rydultowy .pl-reviews .pl-sec-head__title {
  font-size: 32px;
}
/* Tytuł sekcji kontaktu „Potrzebujesz prawnika w Rydułtowach?" — 32px */
.pl--rydultowy .pl-contact__title {
  font-size: 32px;
}

/* --- Sekcja opinii: eyebrow kreska (złota) zamiast boxa, karty #111D28 ----- */
.pl--rydultowy .pl-reviews .pl-eyebrow--gold {
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.pl--rydultowy .pl-reviews .pl-eyebrow--gold::before {
  content: "";
  flex: none;
  width: 40px;
  height: 2px;
  background: currentColor; /* złoty jak tekst eyebrow */
}
.pl--rydultowy .pl-review {
  background: #111D28;
}

/* --- Zespół / Siedziba / Kontakt: eyebrow kreska (currentColor) zamiast boxa - */
.pl--rydultowy .pl-team .pl-eyebrow,
.pl--rydultowy .pl-location .pl-eyebrow,
.pl--rydultowy .pl-contact .pl-eyebrow {
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.pl--rydultowy .pl-team .pl-eyebrow::before,
.pl--rydultowy .pl-location .pl-eyebrow::before,
.pl--rydultowy .pl-contact .pl-eyebrow::before {
  content: "";
  flex: none;
  width: 40px;
  height: 2px;
  background: currentColor;
}

/* Formularz kontaktu: przycisk „Wyślij zgłoszenie" pełnej szerokości,
   eyebrow „Napisz do nas" biały (kreska bierze kolor z currentColor). */
.pl--rydultowy .pl-form__submit {
  width: 100%;
}
.pl--rydultowy .pl-form-card .pl-eyebrow {
  color: #FFF;
  font-family: var(--pl-font-body, "Work Sans"), sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
}
/* „Napisz do nas" (w karcie formularza) bez kreski */
.pl--rydultowy .pl-form-card .pl-eyebrow::before {
  display: none;
}

/* ========================================================================= */
/* MOBILE (≤640) — gotowa grafika hero (zespół + złota ramka + statbox „797+"
   wtopione w obraz). Pokazujemy ją jako tło .pl-hero__image (proporcja pliku
   342×343), a osobne elementy (zdjęcie <img>, ramka ::after, statbox HTML)
   chowamy, bo są już częścią grafiki. */
/* ========================================================================= */
@media (max-width: 640px) {
  .pl--rydultowy .pl-hero__image {
    aspect-ratio: 342 / 343;
    max-width: none;
    margin-top: 0;
    overflow: hidden;
    background: url(../../img/hero-rydultowy-mobile.avif) center top / cover no-repeat;
  }
  .pl--rydultowy .pl-hero__image img,
  .pl--rydultowy .pl-hero__image::after,
  .pl--rydultowy .pl-hero__statbox {
    display: none;
  }
  /* Tytuł mniejszy, highlight w rozmiarze tytułu (desktopowe 52px tylko na dużych) */
  .pl--rydultowy .pl-hero__title {
    font-size: 32px;
  }
  .pl--rydultowy .pl-hero__title .pl-hl {
    font-size: inherit;
  }
  /* Watermark „§" widoczny też na mobile (baza go chowa ≤640) — prawy górny róg */
  .pl--rydultowy .pl-hero__watermark {
    display: block;
    font-size: 360px;
    right: 0;
    top: 30px;
  }
  /* Kolejność mobile: …CTA → ZDJĘCIE → oceny (jak Figma). Oceny siedzą w bloku
     tekstowym, zdjęcie obok — spłaszczamy blok przez display:contents, żeby
     wszystko było w jednym flex-kontenerze i sterujemy order. */
  .pl--rydultowy .pl-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .pl--rydultowy .pl-hero__left {
    display: contents;
  }
  .pl--rydultowy .pl-hero__image {
    order: 2;
  }
  .pl--rydultowy .pl-hero__rating {
    order: 3;
  }
  /* Oba „Umów konsultację" (banner specjalizacji + zespół) pełnej szerokości */
  .pl--rydultowy .pl-services__cta .pl-btn,
  .pl--rydultowy .pl-team__cta .pl-btn {
    width: 100%;
  }
  /* Subpixel-gapy między sekcjami (różne tła full-bleed) — podbijamy sekcje
     po hero o 1px w górę, żeby szpary zniknęły. */
  .pl--rydultowy .pl-reviews,
  .pl--rydultowy .pl-banner,
  .pl--rydultowy .pl-team,
  .pl--rydultowy .pl-location,
  .pl--rydultowy .pl-contact {
    position: relative;
    top: -1px;
  }
}