/* ============================================================
   JURLEJ — SEKCJA 2: USŁUGI
   Jednostka --u ta sama co w hero (1 px wzorca 1920).
   Układ bento 4×3: duży blok 2×2, wysoki 1×2, szeroki 3×1, trzy małe.
   ============================================================ */

.uslugi {
  position: relative;
  /* cała sekcja mieści się na jednym ekranie — siatka bierze to,
     co zostaje po nagłówku */
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding: calc(64 * var(--u)) calc(40 * var(--u)) calc(48 * var(--u)) calc(39 * var(--u));
  background: var(--tlo);
  isolation: isolate;
}

/* Rysunek techniczny: siatka + rozrząd + tłok. Wtapia się w tło
   u góry i u dołu, więc styk z hero i z kolejną sekcją jest bez linii. */
.uslugi__tlo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('../img/rysunek.svg') top center / calc(1920 * var(--u)) auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 7%, #000 90%, transparent 100%);
  pointer-events: none;
}

/* ---------------- nagłówek ---------------- */
.uslugi__naglowek {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: calc(70 * var(--u));
  margin-bottom: calc(36 * var(--u));
}
.uslugi__nad {
  margin: 0 0 calc(14 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--czerwien);
}
.uslugi__tytul {
  margin: 0;
  font: 400 calc(64 * var(--u))/1 'Draco', sans-serif;
  letter-spacing: .06em;
  color: var(--grafit);
  white-space: nowrap;
  --n: 5;
  --wy: .2s;
}
.uslugi__tytul .z { --b: .1s; --k: .085s; }
.uslugi__opis {
  max-width: calc(460 * var(--u));
  margin: 0 0 calc(2 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.6;
  font-weight: 500;
  color: #4a4747;
  text-wrap: pretty;
}

/* ---------------- siatka bento ---------------- */
.uslugi__siatka {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: calc(16 * var(--u));
}
.uslugi__siatka > .usl:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
.uslugi__siatka > .usl:nth-child(2) { grid-column: 3;     grid-row: 1; }
.uslugi__siatka > .usl:nth-child(3) { grid-column: 4;     grid-row: 1 / 3; }
.uslugi__siatka > .usl:nth-child(4) { grid-column: 3;     grid-row: 2; }
.uslugi__siatka > .usl:nth-child(5) { grid-column: 1;     grid-row: 3; }
.uslugi__siatka > .usl:nth-child(6) { grid-column: 2 / 5; grid-row: 3; }

/* ---------------- blok ---------------- */
.usl {
  position: relative;
  min-width: 0;
  /* wymiary przycisku — z nich js/uslugi.js liczy wycięcie */
  --btn-h: calc(56 * var(--u));
  --przerwa: calc(14 * var(--u));
}
.usl__karta {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(26 * var(--u));
  background: #1d1c1c;
}
.usl__zdj {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08) brightness(.9);
  transition: filter .7s var(--ease), scale 1.4s var(--ease);
}
/* przyciemnienie od dołu pod szkłem — biały tekst ma kontrast
   także na jasnych fragmentach zdjęcia */
.usl__karta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .15) 45%, rgba(10, 10, 10, 0) 70%);
  pointer-events: none;
}
.usl:hover .usl__zdj { filter: grayscale(.55) contrast(1.05) brightness(.93); scale: 1.04; }

/* szklana tabliczka — kształt z wycięciem nadaje js/uslugi.js */
.usl__szklo {
  position: absolute;
  z-index: 1;
  left: var(--przerwa);
  right: var(--przerwa);
  bottom: var(--przerwa);
  padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u));
  border-radius: calc(18 * var(--u));
  background:
    linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, .12));
  -webkit-backdrop-filter: blur(16px) saturate(1.3) brightness(1.08);
  backdrop-filter: blur(16px) saturate(1.3) brightness(1.08);
  color: #fff;
}
.usl__obrys {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.usl__obrys path { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 1; }
.usl__tytul {
  position: relative;
  margin: 0;
  font-size: calc(19 * var(--u));
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.005em;
}
.usl__opis {
  position: relative;
  margin: calc(6 * var(--u)) 0 0;
  /* opis jest ostatni, więc to on omija wycięcie z przyciskiem */
  max-width: calc(100% - var(--wyc-w, 0px));
  font-size: calc(13.5 * var(--u));
  line-height: 1.5;
  font-weight: 500;
  color: rgba(255, 255, 255, .84);
  text-wrap: pretty;
}
.usl--duzy .usl__tytul { font-size: calc(28 * var(--u)); }
.usl--duzy .usl__opis { font-size: calc(15 * var(--u)); }
.usl--duzy .usl__szklo,
.usl--szeroki .usl__szklo { padding: calc(24 * var(--u)) calc(28 * var(--u)) calc(22 * var(--u)); }
.usl--szeroki .usl__tytul { font-size: calc(24 * var(--u)); }

/* ---------------- przycisk w wycięciu ----------------
   Długość zależy od bloku: duży i szeroki — z napisem, wysoki —
   wydłużona pigułka, małe — kółko. */
.usl__przycisk {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  height: var(--btn-h);
  padding: 0 calc(26 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--u));
  overflow: hidden;
  border-radius: calc(var(--btn-h) / 2);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(150, 148, 148, .7) 0%, rgba(150, 148, 148, .25) 36%, rgba(150, 148, 148, 0) 50%),
    linear-gradient(90deg, #840000, #6c0000 55%, #5a0000);
  box-shadow:
    0 0 0 calc(3 * var(--u)) #cfcfcf,
    0 calc(10 * var(--u)) calc(22 * var(--u)) rgba(90, 0, 0, .3);
  transition: box-shadow .3s var(--ease);
}
.usl__przycisk--kolo { width: var(--btn-h); padding: 0; }
.usl--wysoki .usl__przycisk { width: calc(96 * var(--u)); padding: 0; }
.usl__przycisk-napis {
  font: 400 calc(11 * var(--u))/1 'Draco', sans-serif;
  white-space: nowrap;
  translate: 0 calc(1 * var(--u));
}
.usl__przycisk svg {
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate .4s var(--ease-ruch);
}
.usl__przycisk::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0));
  transform: translate3d(-180%, 0, 0) skewX(-18deg);
  transition: transform .9s var(--ease);
  pointer-events: none;
}
.usl:hover .usl__przycisk::after,
.usl__przycisk:focus-visible::after { transform: translate3d(330%, 0, 0) skewX(-18deg); }
.usl:hover .usl__przycisk svg,
.usl__przycisk:focus-visible svg { translate: calc(4 * var(--u)) 0; }
.usl:hover .usl__przycisk,
.usl__przycisk:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 calc(3 * var(--u)) #fff,
    0 calc(14 * var(--u)) calc(28 * var(--u)) rgba(120, 0, 0, .4);
}

/* ============================================================
   WEJŚCIE I WYJŚCIE
   Stany: bez klasy — pod ekranem (czeka na wejście),
   .jest-w-kadrze — widoczny, .jest-poza — przewinięty w górę.
   --opoz nadaje skrypt: bloki wchodzące w tej samej chwili dostają
   kolejne opóźnienia co 0,18 s, więc wchodzą jeden po drugim.
   ============================================================ */
.js .usl {
  opacity: 0;
  translate: 0 calc(70 * var(--u));
  scale: .94;
  filter: blur(8px);
  transition-property: opacity, translate, scale, filter;
  transition-duration: .9s, 1.1s, 1.1s, .9s;
  transition-timing-function: var(--ease);
}
.js .usl.jest-w-kadrze {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  filter: blur(0);
  transition-duration: 1.6s, 2s, 2s, 1.5s;
  transition-delay: var(--opoz, 0s);
}
.js .usl.jest-poza {
  opacity: 0;
  translate: 0 calc(-50 * var(--u));
  scale: .96;
  filter: blur(6px);
  transition-duration: 1.1s, 1.4s, 1.4s, 1.1s;
  transition-timing-function: cubic-bezier(.5, 0, .2, 1);
}
.js .usl .usl__zdj { scale: 1.18; }
.js .usl.jest-w-kadrze .usl__zdj { scale: 1; transition: filter .7s var(--ease), scale 2.6s var(--ease) var(--opoz, 0s); }
.js .usl.jest-w-kadrze:hover .usl__zdj { scale: 1.04; transition: filter .7s var(--ease), scale 1.4s var(--ease); }

.js .usl .usl__szklo {
  opacity: 0;
  translate: 0 calc(24 * var(--u));
  transition: opacity .4s var(--ease), translate .5s var(--ease);
}
.js .usl.jest-w-kadrze .usl__szklo {
  opacity: 1;
  translate: 0 0;
  transition: opacity 1.4s var(--ease) calc(var(--opoz, 0s) + .4s), translate 1.8s var(--ease) calc(var(--opoz, 0s) + .4s);
}
.js .usl .usl__przycisk {
  opacity: 0;
  scale: .6;
  transition: opacity .35s var(--ease), scale .45s var(--ease), box-shadow .3s var(--ease);
}
.js .usl.jest-w-kadrze .usl__przycisk {
  opacity: 1;
  scale: 1;
  transition: opacity 1.1s var(--ease) calc(var(--opoz, 0s) + .7s), scale 1.3s var(--ease) calc(var(--opoz, 0s) + .7s), box-shadow .3s var(--ease);
}

/* nagłówek: litery jak w hero, potem napis nad i opis */
.js .uslugi__naglowek.jest-w-kadrze .z {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-duration: .9s, 1.15s, .9s;
  transition-delay: calc(var(--b) + var(--l) * var(--k));
}
.js .uslugi__nad,
.js .uslugi__opis {
  opacity: 0;
  translate: 0 calc(18 * var(--u));
  filter: blur(6px);
  transition: opacity .45s var(--ease), translate .55s var(--ease), filter .45s var(--ease);
}
.js .uslugi__naglowek.jest-w-kadrze .uslugi__nad,
.js .uslugi__naglowek.jest-w-kadrze .uslugi__opis {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition-duration: 1.5s, 2s, 1.5s;
}
.js .uslugi__naglowek.jest-w-kadrze .uslugi__nad { transition-delay: 0s; }
.js .uslugi__naglowek.jest-w-kadrze .uslugi__opis { transition-delay: .75s; }

/* ============================================================
   TELEFON I PIONOWY EKRAN — bloki jeden pod drugim, wysokości
   różne, żeby została asymetria
   ============================================================ */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .uslugi {
    height: auto;
    display: block;
    padding: calc(70 * var(--u)) calc(10 * var(--u)) calc(80 * var(--u));
  }
  .uslugi__tlo { background-size: calc(900 * var(--u)) auto; background-position: 62% 0; }

  .uslugi__naglowek {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(14 * var(--u));
    margin: 0 calc(12 * var(--u)) calc(28 * var(--u));
  }
  .uslugi__nad { font-size: calc(9 * var(--u)); margin-bottom: calc(10 * var(--u)); }
  .uslugi__tytul { font-size: calc(31 * var(--u)); }   /* jak JURLEJ w hero — pełna szerokość */
  .uslugi__opis { font-size: calc(12 * var(--u)); max-width: calc(320 * var(--u)); }

  .uslugi__siatka {
    flex: none;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: calc(10 * var(--u));
  }
  .uslugi__siatka > .usl:nth-child(n) { grid-column: 1 / -1; grid-row: auto; height: calc(250 * var(--u)); }
  .uslugi__siatka > .usl:nth-child(1) { height: calc(400 * var(--u)); }
  .uslugi__siatka > .usl:nth-child(3) { height: calc(360 * var(--u)); }
  .uslugi__siatka > .usl:nth-child(6) { height: calc(300 * var(--u)); }

  .usl { --btn-h: calc(46 * var(--u)); --przerwa: calc(10 * var(--u)); }
  .usl__karta { border-radius: calc(20 * var(--u)); }
  .usl__szklo,
  .usl--duzy .usl__szklo,
  .usl--szeroki .usl__szklo { padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); }
  .usl__tytul,
  .usl--szeroki .usl__tytul { font-size: calc(16 * var(--u)); }
  .usl--duzy .usl__tytul { font-size: calc(20 * var(--u)); }
  .usl__opis,
  .usl--duzy .usl__opis { font-size: calc(11.5 * var(--u)); margin-top: calc(6 * var(--u)); }
  .usl__przycisk { padding: 0 calc(18 * var(--u)); gap: calc(8 * var(--u)); }
  /* na wąskim ekranie napis w przycisku zjadałby opis — zostaje
     wydłużona pigułka ze strzałką */
  .usl--wysoki .usl__przycisk,
  .usl--duzy .usl__przycisk,
  .usl--szeroki .usl__przycisk { width: calc(78 * var(--u)); padding: 0; }
  .usl__przycisk-napis { display: none; }
  .usl__przycisk svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .js .usl, .js .usl .usl__zdj, .js .usl .usl__szklo, .js .usl .usl__przycisk,
  .js .uslugi__nad, .js .uslugi__opis {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    filter: none !important;
    transition: none !important;
  }
  .js .usl .usl__zdj { filter: grayscale(1) contrast(1.08) brightness(.9) !important; }
}