/* ==========================================================================
   Sekcja: Oferta - siedem uslug

   To ma byc bogatsza wersja listy z home, nie jej kopia. Roznica jest w rytmie
   i w tym, ze cala sekcja stoi na JEDNEJ osi.

   MODEL SIATKI (>=1024). Kontener .wrap ma 12 kolumn, a kazdy wiersz dzieli sie
   dokladnie w polowie - na poczatku kolumny 7. Przy 1440 wypada to na 720 px,
   czyli na osi symetrii kontenera. Kazdy wiersz to ta sama para polowek,
   zmienia sie tylko to, co w nich stoi:

     01, 04, 06, 07   numer + tytul (1-6)         |  opis (7-12)
     02, 05           numer + tytul + opis (1-6)  |  plyta foto (8-12)
     03               plyta foto (1-5)            |  numer + tytul + opis (7-12)

   Dwie konsekwencje, obie zamierzone:

     - istnieja dokladnie DWIE osie startu tekstu: kolumna 1 (56 px) i
       kolumna 7 (720 px). Zadna trzecia szyna. Poprzednia wersja miala wiersz
       odwrocony na kolumnie 6 i akapit intro poza siatka - oko nie mialo
       kregoslupa,
     - obie plyty prawe (02, 05) i plyta lewa (03) maja IDENTYCZNA szerokosc
       pieciu kolumn i identyczna proporcje 3:2, a ich krawedzie sa swoim
       lustrem wzgledem osi 720. Wczesniej plyta odwrocona miala cztery
       kolumny przy szesciu po prawej i czytala sie jak niedokonczony rytm.

   Wiersze tekstowe wisza na swoim hairline'ie (align-items: start), wiersze ze
   zdjeciem sa wysrodkowane wzgledem plyty: tekst ma tam ok. 200 px przy kadrze
   ok. 440 px, wiec wyrownanie do gory zostawialoby pod akapitem dziure.

   Zero kart, zero cieni, zero ramek. Fiolet pojawia sie wylacznie na numerze
   przy hoverze i w kolku CTA - dokladnie tak jak na home.
   ========================================================================== */

.oferta-uslugi {
  /* Oddech przy osi. Ta sama wartosc co w naglowku podstrony i w bloku
     domykajacym, wiec wszystkie akapity strony koncza sie na jednej pionowej. */
  --oferta-pad: clamp(1.5rem, 3.4vw, 3.5rem);

  padding-block: clamp(3rem, 5vw, 5rem) clamp(3.75rem, 5.5vw, 5.5rem);
}

.oferta-uslugi__list {
  border-bottom: 1px solid var(--hairline);
}

.oferta-uslugi__item {
  border-top: 1px solid var(--hairline);
  padding-block: clamp(2.5rem, 4.6vw, 4.25rem);
  /* Fixed header ma 4.5rem - kotwica ze spisu nie moze wjezdzac pod niego. */
  scroll-margin-top: 6rem;
}

/* --- Naglowek uslugi ---------------------------------------------------- */
.oferta-uslugi__n {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: clamp(0.85rem, 1.5vw, 1.15rem);
  font: 300 1.05rem/1 var(--serif);
  /* Bez tego kreska za numerem startowalaby w innym miejscu w kazdym wierszu -
     cyfry Zodiaka maja rozna szerokosc. */
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--muted);
  transition: color var(--dur) var(--ease);
}

/* Krotka kreska za numerem: powtarza gest z sekcji "jak pracujemy" na home
   i wiaze numer z hairline'em wiersza. */
.oferta-uslugi__n::after {
  content: "";
  flex: 1;
  max-width: 2.25rem;
  height: 1px;
  background: var(--hairline);
}

.oferta-uslugi__t {
  font: 300 clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem)/1.1 var(--sans);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* --- Opis --------------------------------------------------------------- */
.oferta-uslugi__d {
  max-width: 46ch;
  font-size: clamp(0.98rem, 0.92rem + 0.3vw, 1.1rem);
  line-height: 1.68;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.oferta-uslugi__cta {
  margin-top: clamp(1.4rem, 2.4vw, 2rem);
}

/* --- Uklad mobilny ------------------------------------------------------ */
.oferta-uslugi__text { margin-top: clamp(1rem, 2.6vw, 1.6rem); }

.oferta-uslugi__fig { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* Jedna proporcja dla wszystkich trzech plyt. 3:2 to natywny kadr zrodel
   (1264x848), wiec object-fit nic nie obcina poza panorama z klifu. */
.oferta-uslugi__media { aspect-ratio: 3 / 2; }

/* Na tablecie plyta nie musi biec przez cala szerokosc - zawezenie utrzymuje
   proporcje bliska tej z desktopu i nie robi z niej banera. */
@media (min-width: 560px) and (max-width: 1023px) {
  .oferta-uslugi__fig { max-width: 32rem; }
}

/* --- Uklad desktopowy --------------------------------------------------- */
@media (min-width: 1024px) {
  .oferta-uslugi__item {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 0;
    align-items: start;
  }

  /* Wiersz tekstowy: body zajmuje cala siatke i dzieli ja jeszcze raz na te
     same dwie polowki, wiec tytul stoi na kolumnie 1, a opis na kolumnie 7. */
  .oferta-uslugi__body {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 0;
    align-items: start;
  }

  .oferta-uslugi__head { grid-column: 1 / 7; padding-inline-end: var(--oferta-pad); }

  .oferta-uslugi__text {
    grid-column: 7 / -1;
    margin-top: 0;
    padding-inline-end: var(--oferta-pad);
  }

  /* Wiersz ze zdjeciem: body zwija sie do jednej polowki (szesc kolumn),
     plyta bierze piec kolumn przy zewnetrznej krawedzi .wrap, a kolumna
     miedzy nimi zostaje pusta jako gutter. Plyta zawsze dotyka marginesu
     strony - to jedyna rzecz w sekcji, ktora go dotyka, wiec kadr ma sile. */
  .oferta-uslugi__item--fig .oferta-uslugi__body {
    grid-column: 1 / 7;
    grid-template-columns: minmax(0, 1fr);
    align-self: center;
  }

  .oferta-uslugi__item--fig .oferta-uslugi__head,
  .oferta-uslugi__item--fig .oferta-uslugi__text { grid-column: 1 / -1; }

  .oferta-uslugi__item--fig .oferta-uslugi__text {
    margin-top: clamp(1.1rem, 1.9vw, 1.6rem);
  }

  .oferta-uslugi__fig {
    grid-column: 8 / -1;
    grid-row: 1;
    margin-top: 0;
    align-self: center;
  }

  /* Lustro. Odbicie jest liczone wzgledem osi 720 px, czyli srodka strony:
       plyta prawa  kolumny 8-12  =  830 -> 1384
       plyta lewa   kolumny 1-5   =   56 ->  609
     1440-1384 = 56 i 1440-830 = 610, wiec oba kadry maja te sama szerokosc
     (piec kolumn) i sa swoim dokladnym odbiciem. Tekst przy tym nie zmienia
     osi: body odwrocone startuje na kolumnie 7, tak samo jak kazdy opis
     powyzej i ponizej. Przesuwa sie kadr, nie kregoslup. */
  .oferta-uslugi__item--flip .oferta-uslugi__fig { grid-column: 1 / 6; }
  .oferta-uslugi__item--flip .oferta-uslugi__body { grid-column: 7 / -1; }
}

/* --- Coda: pas domykajacy liste ----------------------------------------- */
/* Ogon listy (06, 07) to dwa wiersze czysto tekstowe. Pas zamyka sekcje gestem,
   ktorego nie ma nigdzie wyzej: pelna szerokosc okna zamiast polowki .wrap.
   Proporcja rosnie razem z ekranem - na telefonie 3:2, zeby polki nie zostaly
   przycietne do paska, na desktopie panorama zrodla (1584x672). */
.oferta-uslugi__coda {
  width: 100%;
  /* Blisko ostatniego hairline'u, zeby pas czytal sie jako domkniecie ogona
     listy, a nie jako osobny baner wcisniety przed blok "kolejny krok". */
  margin-top: clamp(2rem, 3.4vw, 3.25rem);
  aspect-ratio: 3 / 2;
}

@media (min-width: 640px) {
  .oferta-uslugi__coda { aspect-ratio: 2 / 1; }
}

/* Ta sama proporcja co pas na podstronie opraw - jeden gest w calym serwisie. */
@media (min-width: 1024px) {
  .oferta-uslugi__coda { aspect-ratio: 2.6 / 1; }
}

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