/* ==========================================================================
   Sekcja: Uslugi
   Jedna lewa krawedz dla wszystkiego. Sekcja ma DWIE osie pionowe:
     os A = lewa krawedz eyebrow, naglowka, CTA, etykiet kategorii i uslug 01/03/05
     os B = kolumna 8 = lewa krawedz akapitu i uslug 02/04/06
   Zadnej trzeciej szyny. Etykieta kategorii stoi NAD swoim wierszem, tuz pod
   hairline'em, wiec para etykieta-tresc czyta sie natychmiast.

   Model siatki (>=1024, 12 kolumn kontenera .uslugi__in):
     rzad 1:  naglowek 1-7      |  akapit 8-12
     rzad 2:  CTA 1-7
     pasmo:   etykieta kategorii nad wierszem, usluga A 1-7 | usluga B 8-12

   Hairline'y poziome siegaja w lewo az do pionowego hairline'u sekcji, wiec
   naroznik jest domkniety - linie sie stykaja, a nie mijaja.
   Zero kart, zero cieni, zero ramek.
   ========================================================================== */

.uslugi {
  /* Odstep miedzy pionowym hairline'em a trescia. Ta sama wartosc wraca jako
     ujemny margines listy, zeby poziome linie dobily do pionowej. */
  --uslugi-rail: clamp(1.75rem, 3vw, 3.25rem);
  /* Kaskada odstepow w pasmie: hairline -> etykieta (46) -> numer (26) ->
     tytul (16). Malejace przerwy robia zagniezdzenie, wiec etykieta czyta sie
     jako naglowek grupy, a nie jako czwarty rownorzedny wiersz. */
  --uslugi-pad-t: clamp(2rem, 3.4vw, 2.9rem);
  --uslugi-col-pad: clamp(1.5rem, 3.4vw, 3.5rem);
}

.uslugi__in { min-width: 0; }

/* Ponizej 1024 etykieta z .marked spada do poziomu i staje sie drugim,
   identycznym micro-labelem tuz nad eyebrow. Zostawiamy tylko eyebrow. */
@media (max-width: 1023px) {
  .uslugi .marked > .label { display: none; }
}

@media (min-width: 1024px) {
  /* .marked daje etykiecie height:100%, wiec rotate(180deg) zrzuca tekst na sam
     dol sekcji, a kreske na lewo od niego. Skracamy etykiete do wysokosci tresci
     (tekst wraca pod gorna krawedz) i przenosimy pionowy hairline na kolumne
     tresci, zeby biegl przez cala wysokosc sekcji - tak jak u Kisty. */
  .uslugi .marked > .label {
    height: auto;
    padding-right: 0;
    border-right: 0;
  }

  .uslugi__in {
    padding-left: var(--uslugi-rail);
    border-left: 1px solid var(--hairline);
  }
}

/* --- Blok naglowkowy ---------------------------------------------------- */
/* Do 1024 jedna kolumna. Od 1024 naglowek i akapit ida w jednym rzedzie i koncza
   sie praktycznie na tej samej wysokosci - 2 linie naglowka (~118px) wobec
   4 linii akapitu (~122px), rozjazd ponizej 10px, wiec dolna krawedz rzedu czyta
   sie jako wspolna. CTA schodzi do wlasnego rzedu pod naglowkiem: zajmuje pole,
   ktore wczesniej bylo martwe, i domyka blok tuz nad pierwszym hairline'em. */
.uslugi__head {
  display: grid;
  /* Druga linia naglowka ma dlugie dolne wydluzenia (j, y), wiec do 1024
     akapit potrzebuje odrobine wiecej powietrza niz sugeruje interlinia. */
  row-gap: clamp(1.85rem, 3.2vw, 2.75rem);
  padding-bottom: clamp(2.5rem, 4vw, 3.25rem);
}

.uslugi__lead  { min-width: 0; }
.uslugi__aside { min-width: 0; }

@media (min-width: 1024px) {
  .uslugi__head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
    column-gap: 0;
    row-gap: clamp(1.75rem, 2.6vw, 2.4rem);
  }

  .uslugi__lead {
    grid-column: 1 / 8;
    grid-row: 1;
  }

  /* Ten sam padding co w pozycji listy - prawa krawedz akapitu konczy sie
     dokladnie tam, gdzie tekst ostatniej uslugi.
     Odsuniecie od gory = wysokosc eyebrow + jego margines, wiec pierwsza linia
     akapitu startuje dokladnie na wysokosci pierwszej linii naglowka, a obie
     kolumny koncza sie w tym samym miejscu. */
  .uslugi__aside {
    grid-column: 8 / -1;
    grid-row: 1;
    padding-inline-end: var(--uslugi-col-pad);
    padding-block-start: calc(0.65rem + clamp(1.4rem, 3vw, 2.25rem));
  }

  .uslugi__cta {
    grid-column: 1 / 8;
    grid-row: 2;
    justify-self: start;
  }
}

.uslugi__eyebrow {
  display: block;
  margin-bottom: clamp(1.4rem, 3vw, 2.25rem);
}

/* Skala naglowka. Druga linia (serif, 22 znaki) jest gardlem, wiec rozmiar
   liczymy z szerokosci wlasnego kontenera, nie z viewportu.
   Do 1024 naglowek ma cala szerokosc (~75px przy 1024), od 1024 tylko siedem
   z dwunastu kolumn, wiec stopien schodzi do ~62px przy 1440 - i na kazdej
   szerokosci zostaje ~8% zapasu na dlugosc linii.
   Ponizej 560 ta sama linia nie zmiescilaby sie w zadnej sensownej skali, wiec
   lamiemy ja twardo (.uslugi__brk) i podnosimy stopien. */
.uslugi__h {
  font-size: clamp(2.4rem, 12.5vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.uslugi__brk { display: none; }

@media (min-width: 560px) {
  .uslugi__h {
    font-size: clamp(2.4rem, 7.3vw, 6.75rem);
    line-height: 0.95;
    letter-spacing: -0.025em;
  }
}

@media (min-width: 1024px) {
  .uslugi__h { font-size: clamp(2.4rem, 4.2vw, 4.25rem); }
}

@supports (font-size: 1cqi) {
  .uslugi__in { container-type: inline-size; }
  .uslugi__h { font-size: clamp(2.4rem, 14cqi, 3rem); }

  @media (min-width: 560px) {
    .uslugi__h { font-size: clamp(2.4rem, 8.8cqi, 6.75rem); }
  }

  @media (min-width: 1024px) {
    .uslugi__h { font-size: clamp(2.4rem, 5cqi, 4.25rem); }
  }
}

@media (max-width: 559px) {
  .uslugi__brk { display: block; }
}

/* Miara 41rem (~656px) to okolo dwoch kolumn siatki uslug przy 1440.
   Stopien 17 -> 19px, interlinia 1.6: akapit ma czytac sie jak lead sekcji,
   a nie jak wtracenie na marginesie. */
.uslugi__p {
  max-width: 41rem;
  font-size: clamp(1.0625rem, 0.86rem + 0.36vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}

.uslugi__cta { align-self: start; }

/* --- Pasma kategorii ---------------------------------------------------- */
/* Hairline dostaje kategoria, nie pojedyncza usluga - to on robi drugi poziom
   hierarchii. Lista wychodzi w lewo o szerokosc szyny, zeby kazda pozioma linia
   dotknela pionowego hairline'u; tresc wraca na os A paddingiem grupy. */
.uslugi__list {
  border-bottom: 1px solid var(--hairline);
}

.uslugi__group {
  border-top: 1px solid var(--hairline);
  padding-block-start: var(--uslugi-pad-t);
}

@media (min-width: 1024px) {
  .uslugi__list {
    margin-inline-start: calc(-1 * var(--uslugi-rail));
  }

  .uslugi__group {
    padding-inline-start: var(--uslugi-rail);
  }
}

/* Etykieta kategorii: jedyny staly akcent fioletu w sekcji. Fiolet oznacza tu
   strukture (drugi poziom hierarchii), a nie dekoracje - to jest nasze, nie
   z Kisty, ktora jest achromatyczna. */
.uslugi__cat {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  color: var(--purple);
  margin-bottom: clamp(1.15rem, 1.9vw, 1.6rem);
}

/* --- Wiersz uslug ------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .uslugi__items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* Rynne robi padding-inline-end pozycji, nie gap - inaczej dublowalby sie. */
    column-gap: 0;
  }
}

@media (min-width: 1024px) {
  /* Dwie osie: usluga A startuje na kolumnie 1, usluga B na kolumnie 8 -
     dokladnie tam, gdzie zaczyna sie akapit w bloku naglowkowym. */
  .uslugi__items {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 0;
  }

  .uslugi__item:nth-child(1) { grid-column: 1 / 8; }
  .uslugi__item:nth-child(2) { grid-column: 8 / -1; }
}

/* --- Pojedyncza usluga -------------------------------------------------- */
.uslugi__item {
  min-width: 0;
  padding-block-end: clamp(2rem, 3.6vw, 2.9rem);
}

@media (min-width: 768px) {
  .uslugi__item { padding-inline-end: var(--uslugi-col-pad); }
}

/* W ukladzie jednokolumnowym pozycje rozdziela oddech, nie kolejna linia -
   inaczej hairline uslugi bylby nie do odroznienia od hairline'u kategorii.
   Odstep miedzy uslugami musi byc wyraznie mniejszy niz przerwa na granicy
   kategorii, inaczej hierarchia sie splaszcza. */
@media (max-width: 767px) {
  .uslugi__item { padding-block-end: clamp(1.5rem, 5vw, 2rem); }
  .uslugi__item + .uslugi__item { padding-block-start: clamp(0.8rem, 3vw, 1.25rem); }
  .uslugi__group { padding-block-start: clamp(2rem, 6vw, 2.5rem); }
  .uslugi__group:last-child .uslugi__item:last-child { padding-block-end: clamp(2.25rem, 7vw, 2.9rem); }
}

.uslugi__n {
  display: block;
  margin-bottom: clamp(0.8rem, 1.4vw, 1rem);
  font: 300 0.95rem/1 var(--serif);
  letter-spacing: 0.1em;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}

.uslugi__t { margin-bottom: 0.7rem; }

.uslugi__d {
  max-width: 40ch;
  font-size: clamp(0.9rem, 0.87rem + 0.16vw, 0.98rem);
  line-height: 1.68;
  text-wrap: pretty;
}

/* Pozycje nie sa linkami, wiec hover jest tylko delikatnym potwierdzeniem
   kursora: numer przejmuje fiolet etykiety kategorii. Zadnych ramek. */
@media (hover: hover) {
  .uslugi__item:hover .uslugi__n { color: var(--purple); }
}

/* Pas trzech kadrow nad lista uslug.
   Sekcja szla przez 1292px czystej typografii - najdluzszy suchy przebieg na
   calej stronie. Kadry stoja obok siebie, nie nad kazda grupa osobno: grupy
   siedza w jednej kolumnie, wiec kadr per grupa rozlewal sie na pelna szerokosc
   i czytal sie jak wypelniacz zamiast jak akcent. */
.uslugi__strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.4vw, 1.1rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.uslugi__fig {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--panel);
}
.uslugi__fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.uslugi__fig:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .uslugi__fig:hover img { transform: none; }
}

@media (max-width: 560px) {
  /* Na telefonie trzy kadry obok siebie to trzy znaczki - lepiej dwa czytelne
     i trzeci schowany, niz trzy nieczytelne. */
  .uslugi__strip { grid-template-columns: repeat(2, 1fr); }
  .uslugi__strip .uslugi__fig:last-child { display: none; }
}