/* ============================================================
   JURLEJ — STOPKA
   Grafitowa karta z marginesami jak karta w hero; w prawym dolnym
   wycięciu okrągły przycisk „do góry". Kształt i wejście z
   js/uslugi.js (stopka ma [data-bloki], karta to .usl).
   ============================================================ */

.stopka {
  position: relative;
  padding: calc(24 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)) calc(39 * var(--u));
  background: var(--tlo);
}
.usl--stopka { position: relative; }
.usl--stopka .usl__karta {
  position: relative;
  border-radius: calc(30 * var(--u));
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(143, 29, 20, .22), rgba(143, 29, 20, 0) 45%),
    linear-gradient(160deg, #262525 0%, #1c1b1b 60%, #161515 100%);
  color: #d9d4d3;
}
.usl--stopka .usl__karta::after { display: none; }

/* sygnet w lewym górnym wycięciu karty (kształt liczy js/uslugi.js) */
.usl__sygnet {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: calc(84 * var(--u));
  height: calc(84 * var(--u));
  filter: drop-shadow(0 calc(10 * var(--u)) calc(16 * var(--u)) rgba(0, 0, 0, .22));
}

/* wielki napis w tle — sam obrys, przycięty dolną krawędzią karty */
.stopka__tlo-napis {
  position: absolute;
  left: 50%;
  bottom: calc(-46 * var(--u));
  margin: 0;
  translate: -50% 0;
  font: 400 calc(330 * var(--u))/1 'Draco', sans-serif;
  letter-spacing: .04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .07);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.stopka__gora {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: calc(48 * var(--u));
  padding: calc(64 * var(--u)) calc(64 * var(--u)) calc(56 * var(--u));
}
/* marka niżej — pod wycięciem z sygnetem */
/* marka u góry: napis JURLEJ obok wycięcia z sygnetem, hasło i opis pod nim */
.stopka__marka { padding: 0 0 0 calc(56 * var(--u)); }
.stopka__logo {
  margin: 0;
  font: 400 calc(46 * var(--u))/1 'Draco', sans-serif;
  letter-spacing: .06em;
  color: #fff;
}
.stopka__haslo {
  margin: calc(12 * var(--u)) 0 0;
  font-size: calc(12 * var(--u));
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #e3392c;
}
.stopka__tekst {
  max-width: calc(420 * var(--u));
  margin: calc(20 * var(--u)) 0 0;
  font-size: calc(15 * var(--u));
  line-height: 1.6;
  color: #a8a2a1;
}
.stopka__kol { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
/* kolumna MENU odsunięta od opisu marki */
nav.stopka__kol { padding-left: calc(70 * var(--u)); }
.stopka__kol h3 {
  margin: calc(6 * var(--u)) 0 calc(8 * var(--u));
  font: 400 calc(15 * var(--u))/1 'Draco', sans-serif;
  letter-spacing: .08em;
  color: #fff;
}
.stopka__kol p { margin: 0; font-size: calc(15 * var(--u)); line-height: 1.7; color: #a8a2a1; }
.stopka__kol a {
  width: fit-content;
  font-size: calc(15 * var(--u));
  color: #d9d4d3;
  transition: color .3s var(--ease), translate .3s var(--ease);
}
.stopka__kol a:hover { color: #fff; translate: calc(4 * var(--u)) 0; }
.stopka__kol a:hover::before { content: '— '; color: #e3392c; }

.stopka__dol {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: calc(20 * var(--u));
  margin: 0 calc(64 * var(--u));
  padding: calc(22 * var(--u)) calc(90 * var(--u)) calc(30 * var(--u)) 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: calc(12.5 * var(--u));
  color: #8a8483;
}
.stopka__dol p { margin: 0; }
.stopka__dol b { color: #d9d4d3; font-weight: 700; }
.stopka__autor b { transition: color .3s var(--ease); }
.stopka__autor:hover b { color: #e3392c; }

/* przycisk „do góry" — ten sam bordowy co reszta, strzałka do góry */
.usl--stopka .usl__przycisk svg { rotate: 0deg; }
.usl--stopka .usl__przycisk:hover svg,
.usl--stopka:hover .usl__przycisk svg { translate: 0 calc(-3 * var(--u)); }

/* stopka nie przesuwa się przy wejściu tak mocno jak bloki — tylko
   łagodne pojawienie się, bez rozmycia (to długi, płaski element) */
.js .stopka .usl { translate: 0 calc(40 * var(--u)); scale: 1; filter: none; }
.js .stopka .usl.jest-w-kadrze { translate: 0 0; filter: none; }
.js .stopka .usl.jest-poza { opacity: 1; translate: 0 0; filter: none; }

/* ============================================================
   TELEFON
   ============================================================ */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .stopka { padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u)); }
  .usl.usl--stopka { height: auto; }
  .usl--stopka .usl__karta { border-radius: calc(22 * var(--u)); }
  .stopka__gora { grid-template-columns: 1fr 1fr; gap: calc(26 * var(--u)) calc(16 * var(--u)); padding: calc(34 * var(--u)) calc(22 * var(--u)) calc(26 * var(--u)); }
  .stopka__marka { grid-column: 1 / -1; padding-top: calc(36 * var(--u)); }
  .stopka__marka { padding-left: 0; }
  .usl__sygnet { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
  .stopka__logo { font-size: calc(26 * var(--u)); }   /* Draco ~1,6 em na znak — mieści się w karcie */
  .stopka__haslo { font-size: calc(9 * var(--u)); }
  .stopka__tekst { font-size: calc(12 * var(--u)); }
  .stopka__kol { gap: calc(7 * var(--u)); }
  nav.stopka__kol { padding-left: 0; }
  .stopka__kol h3 { font-size: calc(12 * var(--u)); }
  .stopka__kol p, .stopka__kol a { font-size: calc(12 * var(--u)); overflow-wrap: anywhere; }
  .stopka__kol:last-child { grid-column: 1 / -1; }
  .stopka__dol { flex-direction: column; gap: calc(6 * var(--u)); margin: 0 calc(22 * var(--u)); padding: calc(16 * var(--u)) calc(60 * var(--u)) calc(22 * var(--u)) 0; font-size: calc(10 * var(--u)); }
  .stopka__tlo-napis { font-size: calc(120 * var(--u)); bottom: calc(-16 * var(--u)); }
}