/* ============================================================
   JURLEJ — PRZERWA „MASZ PYTANIE?"
   Pas między sekcją marek a chip tuningiem. Wejście i wyjście
   z js/uslugi.js (sekcja z [data-bloki], nagłówek [data-naglowek]).
   ============================================================ */

.pytanie {
  position: relative;
  min-height: 62vh;
  min-height: 62svh;
  display: grid;
  place-items: center;
  padding: calc(90 * var(--u)) calc(40 * var(--u));
  background: var(--tlo);
  isolation: isolate;
  overflow: clip;
}
/* siatka rysunku technicznego — gaśnie ku brzegom, więc styk z sekcjami
   obok jest bez linii */
.pytanie__tlo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(38, 37, 37, .075) 1px, transparent 1px) 50% 50% / calc(120 * var(--u)) calc(120 * var(--u)),
    linear-gradient(90deg, rgba(38, 37, 37, .075) 1px, transparent 1px) 50% 50% / calc(120 * var(--u)) calc(120 * var(--u)),
    linear-gradient(rgba(38, 37, 37, .045) 1px, transparent 1px) 50% 50% / calc(24 * var(--u)) calc(24 * var(--u)),
    linear-gradient(90deg, rgba(38, 37, 37, .045) 1px, transparent 1px) 50% 50% / calc(24 * var(--u)) calc(24 * var(--u));
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 30%, transparent 100%);
  pointer-events: none;
}

.pytanie__srodek {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(calc(1400 * var(--u)), 100%);
  text-align: center;
}

/* linia wymiarowa: bordowa kreska ze strzałkami i znacznikami na końcach */
.pytanie__linia {
  position: relative;
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(143, 29, 20, .45);
}
.pytanie__linia::before,
.pytanie__linia::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(14 * var(--u));
  height: calc(9 * var(--u));
  background: rgba(143, 29, 20, .6);
  translate: 0 -50%;
}
.pytanie__linia::before { left: 0; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.pytanie__linia::after { right: 0; clip-path: polygon(100% 50%, 0 0, 0 100%); }
.pytanie__linia:first-child { margin-bottom: calc(60 * var(--u)); }
.pytanie__linia:last-child { margin-top: calc(66 * var(--u)); }

.pytanie__tytul {
  margin: 0;
  font: 400 calc(64 * var(--u))/1.05 'Draco', sans-serif;
  letter-spacing: .06em;
  color: var(--grafit);
  white-space: nowrap;
  --n: 12;
  --wy: 0s;
}
.pytanie__slowo { display: inline-block; }
.pytanie__slowo + .pytanie__slowo { margin-left: .4em; color: var(--czerwien); }
/* znak zapytania narysowany w SVG — Draco go nie ma */
.pytanie__znak {
  width: .7em;
  height: .7em;
  margin-left: .08em;
  fill: currentColor;
  vertical-align: baseline;
  translate: 0 -.06em;      /* dół kropki na linii bazowej liter */
}
.pytanie__opis {
  max-width: calc(640 * var(--u));
  margin: calc(24 * var(--u)) 0 0;
  font-size: calc(18 * var(--u));
  line-height: 1.6;
  font-weight: 500;
  color: #4a4747;
}

/* ---------------- przyciski ---------------- */
.pytanie__przyciski {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(18 * var(--u));
  margin-top: calc(38 * var(--u));
}
.pytanie__kontakt,
.pytanie__tel {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: calc(14 * var(--u));
  height: calc(64 * var(--u));
  padding: 0 calc(34 * var(--u));
  border-radius: calc(32 * var(--u));
  overflow: hidden;
  transition: box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.pytanie__kontakt {
  color: #fff;
  font: 400 calc(15 * var(--u))/1 'Draco', sans-serif;
  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(12 * var(--u)) calc(26 * var(--u)) rgba(90, 0, 0, .3);
}
.pytanie__kontakt span { translate: 0 calc(1 * var(--u)); }
.pytanie__kontakt svg,
.pytanie__tel svg {
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate .4s var(--ease-ruch), stroke .35s var(--ease);
}
.pytanie__kontakt svg { stroke: #fff; }
.pytanie__kontakt::after {
  content: '';
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 40%;
  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;
}
.pytanie__kontakt:hover::after,
.pytanie__kontakt:focus-visible::after { transform: translate3d(330%, 0, 0) skewX(-18deg); }
.pytanie__kontakt:hover svg { translate: calc(4 * var(--u)) 0; }
.pytanie__kontakt:hover,
.pytanie__kontakt:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 calc(3 * var(--u)) #fff,
    0 calc(16 * var(--u)) calc(32 * var(--u)) rgba(120, 0, 0, .38);
}

/* telefon: szklana pigułka z bordowym obrysem jak marki w sekcji wyżej */
.pytanie__tel {
  color: var(--grafit);
  font-size: calc(18 * var(--u));
  font-weight: 700;
  letter-spacing: .04em;
  background: rgba(255, 255, 255, .62);
  box-shadow:
    inset 0 0 0 1.5px rgba(143, 29, 20, .55),
    0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(30, 30, 30, .06);
}
.pytanie__tel svg { stroke: var(--czerwien); stroke-width: 1.8; }
.pytanie__tel:hover,
.pytanie__tel:focus-visible {
  outline: none;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(150, 148, 148, .55) 0%, rgba(150, 148, 148, 0) 55%),
    linear-gradient(90deg, #840000, #6c0000 55%, #5a0000);
  box-shadow:
    inset 0 0 0 1.5px rgba(143, 29, 20, .9),
    0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(110, 0, 0, .28);
}
.pytanie__tel:hover svg,
.pytanie__tel:focus-visible svg { stroke: #fff; }

/* ---------------- wejście: linie, litery, zdanie, przyciski ---------------- */
.js .pytanie__linia {
  scale: 0 1;
  opacity: 0;
  transition: scale .5s var(--ease), opacity .4s var(--ease);
}
.js .pytanie__srodek.jest-w-kadrze .pytanie__linia {
  scale: 1 1;
  opacity: 1;
  transition: scale 1.6s var(--ease), opacity 1s var(--ease);
}
.js .pytanie__srodek.jest-w-kadrze .pytanie__linia:last-child { transition-delay: .15s; }
.js .pytanie__srodek.jest-w-kadrze .z {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition-duration: .9s, 1.15s, .9s;
  transition-delay: calc(.35s + var(--l) * .06s);
}
.js .pytanie__opis,
.js .pytanie__kontakt,
.js .pytanie__tel {
  opacity: 0;
  translate: 0 calc(18 * var(--u));
  filter: blur(6px);
  transition: opacity .4s var(--ease), translate .5s var(--ease), filter .4s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.js .pytanie__srodek.jest-w-kadrze .pytanie__opis,
.js .pytanie__srodek.jest-w-kadrze .pytanie__kontakt,
.js .pytanie__srodek.jest-w-kadrze .pytanie__tel {
  opacity: 1;
  translate: 0 0;
  filter: blur(0);
  transition-duration: 1.5s, 1.9s, 1.5s, .35s, .35s, .35s;
}
.js .pytanie__srodek.jest-w-kadrze .pytanie__opis { transition-delay: 1.15s, 1.15s, 1.15s, 0s, 0s, 0s; }
.js .pytanie__srodek.jest-w-kadrze .pytanie__kontakt { transition-delay: 1.4s, 1.4s, 1.4s, 0s, 0s, 0s; }
.js .pytanie__srodek.jest-w-kadrze .pytanie__tel { transition-delay: 1.58s, 1.58s, 1.58s, 0s, 0s, 0s; }

/* ============================================================
   TELEFON — nagłówek w dwóch liniach, przyciski jeden pod drugim
   ============================================================ */
@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .pytanie { min-height: 0; padding: calc(70 * var(--u)) calc(16 * var(--u)); }
  .pytanie__tlo {
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 100%);
  }
  .pytanie__linia:first-child { margin-bottom: calc(34 * var(--u)); }
  .pytanie__linia:last-child { margin-top: calc(38 * var(--u)); }
  .pytanie__tytul { font-size: calc(26 * var(--u)); line-height: 1.15; }   /* PYTANIE? na całą szerokość */
  .pytanie__slowo { display: block; }
  .pytanie__slowo + .pytanie__slowo { margin-left: 0; }
  .pytanie__opis { font-size: calc(13 * var(--u)); margin-top: calc(14 * var(--u)); max-width: calc(300 * var(--u)); }
  .pytanie__przyciski { flex-direction: column; align-items: stretch; width: 100%; gap: calc(12 * var(--u)); margin-top: calc(24 * var(--u)); }
  .pytanie__kontakt,
  .pytanie__tel { justify-content: center; height: calc(54 * var(--u)); border-radius: calc(27 * var(--u)); }
  .pytanie__kontakt { font-size: calc(13 * var(--u)); }
  .pytanie__tel { font-size: calc(15 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .js .pytanie__linia, .js .pytanie__opis, .js .pytanie__kontakt, .js .pytanie__tel {
    opacity: 1 !important; scale: none !important; translate: none !important; filter: none !important; transition: none !important;
  }
}