/*
 * Style specyficzne dla landingu Orzesze.
 * Ładowane automatycznie PO landing.css (baza) — tu tylko RÓŻNICE.
 *
 * Każdą regułę scope'uj klasą miasta z kontenera: `.pl--orzesze`.
 * Dzięki temu zmiany dotkną wyłącznie Orzesza, reszta miast bez zmian.
 *
 * UKŁAD: desktopowy skin Orzesza (zdjęcie zespołu jako wspólne tło pasa
 * hero+staty) siedzi w bloku @media (min-width:1025px) na dole pliku — bo
 * zakłada dwukolumnowy hero (margines lewy 5%, zdjęcie ukryte). Poniżej 1025
 * baza składa hero do jednej kolumny, więc skin (tło + zerowy padding) nie ma
 * tam sensu i wyciekał: na tablecie ucinał H1, na telefonie rozjeżdżał hero.
 * ≤1024 celowo zostawiamy bazę — ma gotowy tablet (kolumna + zdjęcie jako pas)
 * i mobile 1:1 z Figmą (topbar samo logo, CTA pełnej szerokości w pionie,
 * staty 2×2 kafelki).
 */

/* --- Wspólne (desktop + mobile), neutralne dla obu ------------------------ */
.pl--orzesze .pl-hero__image{
  width: 100%;
}
.pl--orzesze .pl-hero__inner{
  width: 100%;
}
.pl--orzesze .pl-card__num{
  color: var(--pl-zloto);
}
.pl--orzesze .pl-review{
  background: #111D28;
}

/* --- Desktop (≥1025, hero dwukolumnowy): zdjęcie zespołu jako wspólne tło --- */
@media (min-width: 1025px) {
  .pl--orzesze .pl-hero__image img{
    display: none;
  }
  /* Pas hero+staty na wspólnym tle zdjęcia (jak Figma: cover, stała wysokość
     762px, topbar osobno NAD zdjęciem). Stała wysokość + cover = zero
     rozjeżdżania przy zmianie szerokości; głowy zawsze u góry. Overlay granatu
     10% dla czytelności tekstu (1:1 z Figmy). */
  .pl--orzesze .pl-heroband{
    background-image: linear-gradient(rgba(21,34,50,0.10), rgba(21,34,50,0.10)), url(../../img/hero-orzesze.avif);
    background-position: center, right top;
    background-size: cover, cover;
    background-repeat: no-repeat, no-repeat;
    min-height: 762px;
    display: flex;
    flex-direction: column;
  }
  .pl--orzesze .pl-hero{
    padding: 0;
    background: transparent;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
  }
  .pl--orzesze .pl-hero .pl__container{
    padding: 0;
    max-width: 100%;
  }
  .pl--orzesze .pl-hero__left{
    margin-left: 5%;
  }
  .pl--orzesze .pl-stats{
    padding-inline: 5%;
    box-sizing: border-box;
    background: rgba(21, 34, 50, 0.4);
  }
  /* Kontener statystyk full-width bez własnego paddingu (jak hero), żeby "15"
     równało się z początkiem buttonu (oba na 5% szerokości), staty rozstawione
     do boków. Bez tego padding 40px kontenera zbijał num 40px w prawo. */
  .pl--orzesze .pl-stats .pl__container{
    padding-inline: 0;
    max-width: 100%;
  }
  .pl--orzesze .pl-stat:first-child{
    padding-inline: 0px;
  }
}

/* --- Mobile (≤640): jedno gotowe zdjęcie zespół+staty (dostarczone przez
   klienta jako hero-orzesze-mobile.avif — zespół z fade do granatu + 2×2 staty
   wtopione w grafikę). Wyświetlamy je w kontenerze zdjęcia (background cover,
   proporcja oryginału 402×684), a fizyczną sekcję statystyk chowamy, bo staty
   są już częścią obrazu. */
@media (max-width: 640px) {
  .pl--orzesze .pl-hero__image{
    /* full-bleed: wyjdź poza padding kontenera na pełną szerokość ekranu */
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    /* proporcja = proporcja pliku (400×717) → cover renderuje 1:1, bez ściskania */
    aspect-ratio: 400 / 717;
    background: url(../../img/hero-orzesze-mobile.avif) center top / cover no-repeat;
    border-radius: 0;
  }
  .pl--orzesze .pl-hero__image img{
    display: none;
  }
  .pl--orzesze .pl-stats{
    display: none;
  }
  /* Tytuł sekcji „Nasze specjalizacje" — 32px (baza daje 28px) */
  .pl--orzesze .pl-services__title{
    font-size: 32px;
  }
  /* Tytuł „Kancelaria w Orzeszu" w sekcji lokalizacji łamany w węższą kolumnę */
  .pl--orzesze .pl-location__title{
    max-width: 170px;
  }
  /* Baza daje hero__inner z-index:1 (nad scrimem) — na mobile ten kontekst
     nakładania wypychał całe hero nad sticky badge reCAPTCHA (fixed, z-index
     auto) i badge chował się pod zdjęciem. Zejście do 0 przywraca badge na
     wierzch, a treść hero i tak zostaje nad zdjęciem. */
  .pl--orzesze .pl-hero__inner{
    z-index: 0;
  }
}