/*
 * Style specyficzne dla landingu Ruda Śląska.
 * Ładowane automatycznie PO landing.css (baza) — tu tylko RÓŻNICE.
 * Każdą regułę scope'uj klasą miasta z kontenera: `.pl--ruda-slaska`.
 * Hero: layout „goldframe" (tekst L + zdjęcie P ze złotą ramką), wariant „stats"
 * (dolny pasek 4 statystyk).
 *
 * Skład: LEWA KOLUMNA HERO + „§" — skopiowane z Rydułtów; STATBAR — z Tychów.
 */

/* Złoty gradient Invicty (fallback gdyby zmienna motywu nie była zdefiniowana) */
:root {
  --pl-ruda-gold: var(--gradient-zoto-invicta, linear-gradient(270deg, #FFC48E 0%, #FFC888 12%, #FFD079 24%, #FFD079 44%, #FFCE7C 65%, #FFC789 86%, #FFC48E 100%));
}

/* ========================================================================= */
/* LEWA KOLUMNA HERO — 1:1 z Rydułtowami                                     */
/* ========================================================================= */

/* Watermark „§": pozycja i rozmiar jak w Rydułtowach */
.pl--ruda-slaska .pl-hero__watermark {
  font-size: 530px;
  position: absolute; right: 50%; top: 45%; transform: translateY(-50%);
}

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

/* Nadtytuł (eyebrow) w hero: bazowy boxowy styl jak w Tychach (obwódka 1px
   złota, radius 2px) — Tychy nie nadpisują eyebrow, więc wystarczy nie ruszać
   bazy. Dlatego NIE robimy tu kreski (jak w Rydułtowach). */

/* Tytuł hero 40px — żeby „w Rudzie Śląskiej – konkretna" mieściło się w jednej
   linii (split 3-liniowy jak w projekcie); baza dawała 48px i „konkretna"
   spadała do osobnej linii. */
.pl--ruda-slaska .pl-hero__title {
  font-size: 40px;
}
/* Fragment tytułu [[…]] → .pl-hl w złotym gradiencie. */
.pl--ruda-slaska .pl-hero__title .pl-hl {
  background: var(--pl-ruda-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: var(--pl-font-heading, "Marcellus"), serif;
  text-transform: uppercase;
}

/* ========================================================================= */
/* SEKCJA „obszary flagowe": co drugi kafelek na biało (pierwszy zostaje      */
/* złoty). Ruda ma card_style „gold" → wszystkie są złote; parzyste (2,4,6…)  */
/* nadpisujemy na bazowy biały kafelek.                                       */
/* ========================================================================= */
.pl--ruda-slaska .pl-services__grid .pl-card:nth-child(even) {
  background: var(--pl-bialy);
  border-color: rgba(208, 208, 208, 0.2);
}
.pl--ruda-slaska .pl-services__grid .pl-card:nth-child(even) .pl-card__num {
  color: var(--pl-szary-ui);
}
.pl--ruda-slaska .pl-services__grid .pl-card:nth-child(even) .pl-card__title {
  color: var(--pl-granat-800);
}
.pl--ruda-slaska .pl-services__grid .pl-card:nth-child(even) .pl-card__desc {
  color: var(--pl-szary);
}
/* Na złotych kafelkach (nieparzystych) numer na czarno */
.pl--ruda-slaska .pl-services__grid .pl-card:nth-child(odd) .pl-card__num {
  color: #111D28;
}

/* Kreska 48×3 nad numerem karty. Na złotym kafelku czerń→złoto gradient, na
   białym (parzystym) — złoty gradient. */
.pl--ruda-slaska .pl-services__grid .pl-card__num::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-bottom: 12px;
  background: var(--gradient-czer-zoto-invicta, linear-gradient(36deg, #010101 0%, #FFCF79 93%));
}
.pl--ruda-slaska .pl-services__grid .pl-card:nth-child(even) .pl-card__num::before {
  background: var(--pl-ruda-gold);
}

/* ========================================================================= */
/* STATBAR (dolny pasek 4 statystyk) — 1:1 z Tychami                         */
/* ========================================================================= */

/* Tło paska statystyk #111D28, bez bordera nad sekcją. */
.pl--ruda-slaska .pl-stats {
  background: #111D28;

}

/* Bez pionowych dividerów między statami */
.pl--ruda-slaska .pl-stats__divider {
  display: none;
}

/* „15" wyrównane do lewej krawędzi (jak buttony hero) */
.pl--ruda-slaska .pl-stat:first-child {
  padding-left: 0;
}

/* Kreska 40×2 (złoty akcent) NAD liczbą */
.pl--ruda-slaska .pl-stat__num::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 0 0 12px;
  background: var(--kolor-zoto-akcent, #FFC789);
}

/* ========================================================================= */
/* Pozostałe sekcje                                                          */
/* ========================================================================= */

/* „Pozostałe specjalizacje" (chipy): jasnoszare tło + neutralna obwódka */
.pl--ruda-slaska .pl-chip {
  background: var(--Kolor-Tekst-jasny, #F7F7F7);
  border: 1px solid var(--obrys-neutralny-20, rgba(208, 208, 208, 0.20));
}

/* Baner „Opisz swoją sprawę": przycisk „wypełnij…" na białym tle */
.pl--ruda-slaska .pl-cta-banner .pl-btn--banner-ghost {
  background: #FFF;
}

/* Badge sekcji „Zespół": radius 5px + szara obwódka (bez złota), tekst czarny */
.pl--ruda-slaska .pl-team .pl-eyebrow {
  border-radius: 5px;
  border: 1px solid var(--kolor-szary-ui-na-ciemnym, #9AA3AD);
  color: #111D28;
}

/* „Napisz do nas" w formularzu kontaktu: sam biały napis, bez badge (obwódki) */
.pl--ruda-slaska .pl-form-card .pl-eyebrow {
  border: 0;
  padding: 0;
  color: #FFF;
}

/* Sekcja mapy — chipy „Zobacz nasze inne lokalizacje": tło w złotym gradiencie,
   tekst czarny */
.pl--ruda-slaska .pl-location__other .pl-chip {
  background: var(--pl-ruda-gold);
  border-color: transparent;
}
.pl--ruda-slaska .pl-location__other .pl-chip a {
  color: #111D28;
  -webkit-text-fill-color: #111D28;
}

/* Tytuł sekcji kontaktu 32px */
.pl--ruda-slaska .pl-contact__title {
  font-size: 32px;
}

/* ========================================================================= */
/* MOBILE (≤640)                                                             */
/* ========================================================================= */
@media (max-width: 640px) {
  /* Główny tytuł hero 32px (desktop 40px) */
  .pl--ruda-slaska .pl-hero__title {
    font-size: 32px;
  }
  /* Tytuł sekcji „Prawnik w Rudzie Śląskiej…" 32px */
  .pl--ruda-slaska .pl-services__title {
    font-size: 32px;
  }
  /* „Obszary flagowe": bez kreski nad numerem kafelka na mobile */
  .pl--ruda-slaska .pl-services__grid .pl-card__num::before {
    display: none;
  }
  /* Baner „Opisz swoją sprawę": przycisk z pustym tłem na mobile */
  .pl--ruda-slaska .pl-cta-banner .pl-btn--banner-ghost {
    background: transparent;
  }
  /* Statbar: tło jak reszta hero (#152232) zamiast ciemniejszego #111D28. */
  .pl--ruda-slaska .pl-stats {
    background: #152232;
      padding-top: 0px;
  }
  /* Kafelki statów bez ramek i własnego tła — zlewają się z tłem hero */
  .pl--ruda-slaska .pl-stat {
    border: 0;
    background: transparent;
  }
  /* Kreska z góry (nad liczbą) przeniesiona pod każdy stat — 156×1. */
  .pl--ruda-slaska .pl-stat__num::before {
    display: none;
  }
  .pl--ruda-slaska .pl-stat::after {
    content: "";
    width: 156px;
    height: 1px;
    margin-top: 20px;
    background: var(--kolor-zoto-akcent, #FFC789);
  }
  /* Karty zespołu: kreska pod imieniem czarna */
  .pl--ruda-slaska .pl-member__divider {
    background: #111D28;
  }
  /* Wszystkie „Umów konsultację" (hero + zespół) pełnej szerokości */
  .pl--ruda-slaska .pl-hero__cta .pl-btn,
  .pl--ruda-slaska .pl-team__cta .pl-btn {
    width: 100%;
  }
}