/*
 * Style specyficzne dla landingu Tychy.
 * Ładowane automatycznie PO landing.css (baza) — tu tylko RÓŻNICE.
 *
 * Każdą regułę scope'uj klasą miasta z kontenera: `.pl--tychy`.
 * Hero: layout „fullbleed" (zdjęcie jako tło przez inline-style w PHP —
 * dlatego podmiana wymaga !important).
 */

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

/* --- Hero: zdjęcie zespołu Tychy jako tło fullbleed --------------------- */
/* Szersza strefa zdjęcia (baza 62%) + kadr wypychający grupę w prawo, żeby
   trzecia osoba przy prawej krawędzi nie była przycięta. */
.pl--tychy .pl-hero__bg {
  background-image: url(../../img/hero-tychy.avif) !important;
  width: 74%;
  background-position: right center;
}

/* --- Hero title: „dla firm i klientów indywidualnych" w złotym gradiencie */
.pl--tychy .pl-hl {
  background: var(--pl-tychy-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Border pełnej szerokości nad sekcją statów — 1px w złotym gradiencie.
   border-color nie przyjmuje gradientu, więc idzie przez border-image
   (slice 1 = rozciągnięcie gradientu na krawędź). */
.pl--tychy .pl-stats {
  border-top: 1px solid transparent;
  border-image: var(--pl-tychy-gold) 1;
  padding-top: 20px; /* większy odstęp od bordera do liczb */
}

/* Bez pionowych dividerów między statami (Tychy) */
.pl--tychy .pl-stats__divider {
  display: none;
}

/* „15" wyrównane do lewej krawędzi (jak buttony hero) — zdejmujemy lewy padding
   pierwszego stat-a; reszta rozstawiona szeroko (flex:1 z bazy). */
.pl--tychy .pl-stat:first-child {
  padding-left: 0;
}

/* Divider między liczbą a jej opisem — 40×2, złoty akcent */
.pl--tychy .pl-stat__num::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin: 12px 0;
  background: var(--kolor-zoto-akcent, #FFC789);
}

/* --- Sekcja „Nasze specjalizacje": granatowe tło, białe teksty, ciemne karty
   (tylko pierwsza sekcja services — banner na dole pomijamy przez :not). ----- */
.pl--tychy .pl-services:not(.pl-banner-section) {
  background: #152232;
}
.pl--tychy .pl-services:not(.pl-banner-section) .pl-services__title,
.pl--tychy .pl-services:not(.pl-banner-section) .pl-services__intro,
.pl--tychy .pl-services:not(.pl-banner-section) .pl-eyebrow--dark {
  color: #FFFFFF;
}
/* Chipy „Pozostałe specjalizacje": białe tło, granatowy tekst */
.pl--tychy .pl-services:not(.pl-banner-section) .pl-chip {
  background: #FFFFFF;
  color: #152232;
}
.pl--tychy .pl-services:not(.pl-banner-section) .pl-eyebrow--dark {
  border-color: rgba(255, 255, 255, 0.40);
}
.pl--tychy .pl-services:not(.pl-banner-section) .pl-card {
  background: #111D28;
  border-radius: 5px;
}
/* Numery kart (01/02/03) w złotym gradiencie */
.pl--tychy .pl-services:not(.pl-banner-section) .pl-card__num {
  background: var(--pl-tychy-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  width: fit-content;
}
/* Pasek 48×3 nad numerem, ten sam złoty gradient, 14px od liczby */
.pl--tychy .pl-services:not(.pl-banner-section) .pl-card__num::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  flex-shrink: 0;
  margin-bottom: 14px;
  background: var(--pl-tychy-gold);
}

/* Sekcja opinii — ten sam złoty border pełnej szerokości na górze */
.pl--tychy .pl-reviews {
  border-top: 1px solid transparent;
  border-image: var(--pl-tychy-gold) 1;
}
/* Karty opinii: radius 5px; karta 2 i 4 z gradientowym obrysem
   (gradient border z zachowaniem zaokrąglenia = dwa tła: padding-box w kolorze
   karty + border-box gradient). */
.pl--tychy .pl-review {
  border-radius: 5px;
}
/* Linia gwiazdek: gwiazdki z lewej, ikona cudzysłowu ze złotego gradientu z
   prawej (justify-between). Ikona jako maska SVG — kolor bierze ze złotego
   gradientu Invicty. */
.pl--tychy .pl-review__stars {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pl--tychy .pl-review__stars::after {
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  background: #323536;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 3)'%3E%3Cpath d='m6.5 0c3.19421011 0 5.5000019 2.63704722 5.499925 6.54163158-.0204568 5.67313602-4.28524227 9.68420702-10.437811 10.45449522-.5708102.0714642-.79090767-.7192662-.26526381-.9529968 2.36078916-1.0497382 3.55311007-2.38181 3.70711676-3.7002924.11506179-.9850674-.42043311-1.8479608-1.09283612-2.0095374-1.74318309-.41888225-2.91113083-2.58970727-2.91113083-4.8333002 0-3.03756612 2.46243388-5.5 5.5-5.5z'/%3E%3Cpath d='m18.5 0c3.1942101 0 5.5000019 2.63704722 5.499925 6.54163158-.0204568 5.67313602-4.2852423 9.68420702-10.437811 10.45449522-.5708102.0714642-.7909077-.7192662-.2652638-.9529968 2.3607891-1.0497382 3.5531101-2.38181 3.7071167-3.7002924.1150618-.9850674-.4204331-1.8479608-1.0928361-2.0095374-1.7431831-.41888225-2.9111308-2.58970727-2.9111308-4.8333002 0-3.03756612 2.4624339-5.5 5.5-5.5z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='translate(0 3)'%3E%3Cpath d='m6.5 0c3.19421011 0 5.5000019 2.63704722 5.499925 6.54163158-.0204568 5.67313602-4.28524227 9.68420702-10.437811 10.45449522-.5708102.0714642-.79090767-.7192662-.26526381-.9529968 2.36078916-1.0497382 3.55311007-2.38181 3.70711676-3.7002924.11506179-.9850674-.42043311-1.8479608-1.09283612-2.0095374-1.74318309-.41888225-2.91113083-2.58970727-2.91113083-4.8333002 0-3.03756612 2.46243388-5.5 5.5-5.5z'/%3E%3Cpath d='m18.5 0c3.1942101 0 5.5000019 2.63704722 5.499925 6.54163158-.0204568 5.67313602-4.2852423 9.68420702-10.437811 10.45449522-.5708102.0714642-.7909077-.7192662-.2652638-.9529968 2.3607891-1.0497382 3.5531101-2.38181 3.7071167-3.7002924.1150618-.9850674-.4204331-1.8479608-1.0928361-2.0095374-1.7431831-.41888225-2.9111308-2.58970727-2.9111308-4.8333002 0-3.03756612 2.4624339-5.5 5.5-5.5z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.pl--tychy .pl-review:nth-child(2),
.pl--tychy .pl-review:nth-child(4) {
  border: 1px solid transparent;
  background: linear-gradient(#152232, #152232) padding-box,
              var(--pl-tychy-gold) border-box;
}

/* Sekcja zespołu i mapy — ten sam złoty border pełnej szerokości na górze */
.pl--tychy .pl-team,
.pl--tychy .pl-location {
  border-top: 1px solid transparent;
  border-image: var(--pl-tychy-gold) 1;
}
/* Okrągłe zdjęcia zespołu w złotym gradientowym ringu (gradient w paddingu,
   zdjęcie w content-box; całość klipowana do koła przez border-radius+overflow). */
.pl--tychy .pl-member__photo {
  padding: 2px;
  box-sizing: border-box;
  background: var(--pl-tychy-gold);
}
/* Zdjęcie jako własne koło — inaczej kwadrat przycięty do koła zjada ring na
   skosach (ring nierównej grubości). Koło wpisane w content-box = równy ring. */
.pl--tychy .pl-member__photo img {
  border-radius: 50%;
}

/* Divider pod tytułem — 72×3 w tym samym złotym gradiencie */
.pl--tychy .pl-hero__title::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 24px;
  border-radius: 2px;
  background: var(--pl-tychy-gold);
}

/* Rozmiary tytułów sekcji (Tychy) — „Nasze specjalizacje" i „Zaufali nam" 38px */
.pl--tychy .pl-services:not(.pl-banner-section) .pl-services__title {
  font-size: 38px;
}
.pl--tychy .pl-reviews .pl-sec-head__title,
.pl--tychy .pl-team .pl-sec-head__title {
  font-size: 38px;
}
.pl--tychy .pl-contact__title {
  font-size: 34px;
}
/* „Odpowiadamy w 24h" w kontakcie — szary UI na ciemnym, Work Sans 16/165% */
.pl--tychy .pl-contact__trust {
  color: var(--kolor-szary-ui-na-ciemnym, #9AA3AD);
  font-family: var(--pl-font-body, "Work Sans"), sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 165%;
}

/* ========================================================================= */
/* MOBILE (≤640) — analogicznie do Orzesza: tekst hero na granacie, a gotowa
   grafika zespół+staty (hero-tychy-mobile.avif, staty wtopione) jako full-bleed
   tło sekcji statów. Tychy są fullbleed (zdjęcie w tle za tekstem), więc na
   mobile tło+scrim chowamy, a nośnikiem grafiki robimy .pl-stats (brak
   osobnego .pl-hero__image w tym layoucie). */
/* ========================================================================= */
@media (max-width: 640px) {
  /* Duży odstęp hero (py 96 z fullbleed) → 30 */
  .pl--tychy .pl-hero__inner {
    padding-block: 30px;
  }
  /* Tekst hero wraca na granat (grafika zespołu jest osobno, pod hero) */
  .pl--tychy .pl-hero__bg,
  .pl--tychy .pl-hero__scrim {
    display: none;
  }
  /* Telefon w osobnej linii nad dopiskiem „Odpowiadamy w 24 godziny" */
  .pl--tychy .pl-hero__phone-num {
    display: block;
  }
  /* Divider 1px między numerem a dopiskiem „Odpowiadamy w 24 godziny" */
  .pl--tychy .pl-hero__phone-num::after {
    content: "";
    display: block;
    width: 217px;
    max-width: 100%;
    height: 1px;
    margin: 16px auto;
    background: var(--obrys-jasny-15, rgba(247, 247, 247, 0.15));
  }
  /* Sekcja statów = nośnik gotowej grafiki (zespół u góry + 2×2 staty).
     Full-bleed na pełną szerokość ekranu, proporcja = proporcja pliku
     (400×724) → cover bez ściskania. Liczby HTML ukryte (są w grafice). */
     .pl--tychy .pl-services{
      position: relative;
      top: -1px
     }
  .pl--tychy .pl-stats {
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    /* podniesienie grafiki w górę — zespół wchodzi w linię telefonu /
       „Odpowiadamy w 24 godziny" */
    margin-top: -110px;
    aspect-ratio: 400 / 749;
    padding: 0;
    border: 0;
    border-image: none;
    background: url(../../img/hero-tychy-mobile.avif) center top / cover no-repeat;
  }
  .pl--tychy .pl-stats__inner {
    display: none;
  }
  /* Watermark „§" w tle — na wspólnym kontenerze topbar+hero (.pl-top), żeby
     przechodził też przez navbar. Solidne granatowe tła topbara i hero robimy
     przezroczystymi (granat zostaje na .pl-top), więc § prześwituje pod treścią;
     logo i tekst zostają nad nim (malują się po ::before rodzica). */
  .pl--tychy .pl-top {
    position: relative;
    overflow: hidden;
  }
  .pl--tychy .pl-topbar,
  .pl--tychy .pl-hero {
    background: transparent;
  }
  .pl--tychy .pl-top::before {
    content: "§";
    position: absolute;
    right: -45px;
    top: -76px;
    z-index: 0;
    pointer-events: none;
    font-family: var(--pl-font-heading);
    font-size: 700px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
  }
  /* Badge „opinie" nad tytułem sekcji opinii wyśrodkowany (tytuł bez zmian) */
  .pl--tychy .pl-reviews .pl-eyebrow {
    display: flex;
    width: fit-content;
    margin-inline: auto;
  }
}