/* S7 Granice v4 (04.10): schemat drogi do wyjazdu. Biała karta ze strefami nad krokami, sześć kroków na linii, meta „Wyjazd”.
   Kroki DAPLO Crew: granatowe koła i linia ciągła; kroki po stronie firmy: białe koła i linia przerywana. Telefon: pionowo.
   Poprzednie formy: strona/archiwum-s07-v3/ i starsze. Tylko var(--cr-*). */
.s07-sch { position: relative; display: grid; gap: 14px; padding: 24px; background: var(--cr-tlo); border: 1px solid var(--cr-linia); border-radius: var(--cr-r-m); }
.s07-strefa { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; font-family: var(--cr-f-nagl); font-size: 15px; font-weight: 600; }
.s07-strefa img { width: 18px; height: 18px; }
.s07-strefa--crew { background: var(--cr-marka); color: var(--cr-biel); }
.s07-strefa--wy { border: 1.5px dashed var(--cr-marka-jasna); color: var(--cr-marka); }
.s07-kroki { display: grid; margin: 0; padding: 0; list-style: none; }
.s07-k { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 8px 0; }
.s07-k__kolo { grid-row: 1 / span 2; position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--cr-tlo); border: 2px solid var(--cr-marka-jasna); color: var(--cr-marka); }
.s07-k__kolo .i { width: 26px; height: 26px; }
.s07-k b { font-family: var(--cr-f-nagl); font-size: 1.1875rem; font-weight: 600; line-height: 1.2; color: var(--cr-marka); }
.s07-k > span:last-child { font-size: .9375rem; line-height: 1.35; color: var(--cr-tekst-2); }
.s07-k--crew .s07-k__kolo { background: var(--cr-marka); border-color: var(--cr-marka); color: var(--cr-biel); }
.s07-meta { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--cr-sygnal-ciemne); color: var(--cr-glebia); font-family: var(--cr-f-nagl); font-size: 16px; font-weight: 700; }
.s07-meta .i { width: 22px; height: 22px; }
.s07-uwaga { display: flex; align-items: flex-start; justify-content: center; gap: 10px; margin-top: 20px; font-size: .9375rem; line-height: 1.5; color: var(--cr-tekst-2); text-align: center; }
.s07-uwaga .i { width: 20px; height: 20px; flex: none; margin-top: 1px; }

/* telefon: pionowa linia między kołami */
@media (max-width: 899.98px) {
  .s07-k:not(:last-child)::before { content: ""; position: absolute; left: 27px; top: 60px; bottom: -8px; border-left: 2px dashed var(--cr-marka-jasna); }
  .s07-k--crew:not(:last-child)::before { border-left-style: solid; border-left-color: var(--cr-marka); }
  .s07-strefa--wy { order: 2; }
  .s07-kroki { display: contents; }
  .s07-k--crew { order: 1; }
  .s07-k:not(.s07-k--crew) { order: 3; }
  .s07-strefa--crew { order: 0; }
  .s07-meta { order: 4; margin-left: 4px; }
}

/* desktop: sześć kroków w jednym rzędzie, strefy nad nimi, linia przez środki kół, meta na końcu */
@media (min-width: 900px) {
  .s07-sch { grid-template-columns: repeat(6, minmax(0, 1fr)) auto; column-gap: 0; row-gap: 22px; padding: 32px 32px 36px; align-items: start; }
  .s07-strefa { justify-content: center; margin: 0 8px; }
  .s07-strefa--crew { grid-column: 1 / span 2; grid-row: 1; }
  .s07-strefa--wy { grid-column: 3 / span 4; grid-row: 1; }
  .s07-kroki { display: contents; }
  .s07-k { grid-row: 2; display: grid; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 6px; padding: 0 8px; }
  .s07-k__kolo { grid-row: auto; width: 64px; height: 64px; margin-bottom: 8px; }
  .s07-k__kolo .i { width: 28px; height: 28px; }
  /* linia: od środka koła do środka następnego (ostatni krok łączy się z metą) */
  .s07-k::after { content: ""; position: absolute; z-index: 0; left: 50%; right: -50%; top: 31px; border-top: 2px dashed var(--cr-marka-jasna); }
  .s07-k--crew::after { border-top: 3px solid var(--cr-marka); }
  .s07-k:last-child::after { right: -40px; }
  .s07-meta { grid-column: 7; grid-row: 2; align-self: start; margin: 14px 0 0 24px; position: relative; z-index: 1; }
}
/* przejście z kroków DAPLO Crew do kroków firmy: przerywana linia na desktopie, brak linii na telefonie (przerwa na nagłówek strefy) */
@media (min-width: 900px) { .s07-k--crew:nth-child(2)::after { border-top: 2px dashed var(--cr-marka-jasna); } }
@media (max-width: 899.98px) { .s07-k--crew:nth-child(2)::before { display: none; } }