/* Wizytowka mikup.pl, uklad „droga” (05.11.2026, template-droga.php). Uzywa tokenow z style.css (--m-*): karty jak obecne .card,
   karta 5 jak dymek .answer, przyciski i chipy w obecnej palecie. Makietowa paleta (--acc, --grad, --b1..b4) celowo pominieta. */

/* ---- droga: 6 kart; komputer = waz 1→2→3 ↓ 4←5←6 (drugi rzad w lewo), telefon = jeden ciag w dol ---- */
/* 05.11 (wlasciciel): karty rowne i blizsze kwadratu, wszystko symetryczne - szersza sekcja, rowne rzedy, tresc wysrodkowana */
.droga .wrap{max-width:1140px}
.droga h2{margin-bottom:38px}
.kroki{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:72px 42px}
.krok{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff;border:1px solid var(--m-border);border-radius:18px;padding:40px 24px 26px;box-shadow:var(--m-shadow-light);transition:box-shadow .25s,border-color .25s}
.krok:hover{box-shadow:var(--m-shadow-hover);border-color:var(--m-accent)}
.krok__ico{position:absolute;top:-22px;left:calc(50% - 22px);width:44px;height:44px;border-radius:14px;background:var(--m-grad);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(124,90,240,.28)}
.krok__ico svg{width:24px;height:24px;display:block}
.krok h3{font-size:1rem;font-weight:800;margin:0 0 8px;line-height:1.3}
.krok h3 small{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6d3fd6;margin-bottom:4px}
.krok p{margin:0;color:var(--m-muted);font-size:.88rem;line-height:1.62;font-weight:500}

.krok::before{content:none}
/* 05.11 (wlasciciel: „bardziej estetyczne”): strzalka = jeden obrazek SVG (kropki w gradiencie marki + zaokraglony grot), z odstepem od kart
   i ikon; kierunek przez obrot. Rzedy dalej od siebie, zeby strzalka w dol nie wchodzila w ikone nastepnej karty. */
.krok::after{content:"";position:absolute;pointer-events:none;width:34px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 14'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='7' x2='34' y2='7'%3E%3Cstop offset='0' stop-color='%231cb5e0'/%3E%3Cstop offset='1' stop-color='%23a259ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h28' stroke-dasharray='0.01 4.6'/%3E%3Cpath d='M25 2.2 30.6 7 25 11.8'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;top:50%;right:-38px;transform:translateY(-50%)}
/* 3 → 4: w dol, pod karta 3 */
.krok:nth-child(3)::after{top:auto;right:auto;left:50%;bottom:-32px;transform:translateX(-50%) rotate(90deg)}
/* drugi rzad biegnie w lewo: 4 pod 3, 5 w srodku, 6 pod 1 */
.krok:nth-child(4){grid-column:3;grid-row:2}
.krok:nth-child(5){grid-column:2;grid-row:2}
.krok:nth-child(6){grid-column:1;grid-row:2}
.krok:nth-child(4)::after,.krok:nth-child(5)::after{right:auto;left:-38px;transform:translateY(-50%) rotate(180deg)}
.krok:nth-child(6)::after{display:none}

/* karta 5 „Kupione.” = dymek odpowiedzi z chóru (ten sam gradient, biel, 800) */
.krok--kupione{background:var(--m-grad);border:0;color:#fff;box-shadow:0 8px 22px rgba(124,90,240,.25)}
.krok--kupione:hover{border:0}
.krok--kupione h3{font-size:1.6rem;letter-spacing:-.01em;color:#fff}
.krok--kupione h3 small{color:rgba(255,255,255,.88)}
.krok--kupione p{color:#fff}
.krok--kupione .krok__ico{background:#fff;color:#6d3fd6}

@media (max-width:900px){
  .kroki{grid-template-columns:1fr;grid-auto-rows:auto;gap:72px;max-width:560px;margin:0 auto}
  .krok:nth-child(4),.krok:nth-child(5),.krok:nth-child(6){grid-column:auto;grid-row:auto}
  .krok::after,.krok:nth-child(4)::after,.krok:nth-child(5)::after{top:auto;right:auto;left:50%;bottom:-32px;transform:translateX(-50%) rotate(90deg)}
}

/* wejscie kart po kolei (co 0,3 s); tylko opacity/transform - bez przesuniec ukladu */
.droga.is-armed .krok{opacity:0;transform:translateY(14px)}
.droga.is-on .krok{animation:krokin .5s ease-out both}
.droga.is-on .krok:nth-child(2){animation-delay:.3s}.droga.is-on .krok:nth-child(3){animation-delay:.6s}
.droga.is-on .krok:nth-child(4){animation-delay:.9s}.droga.is-on .krok:nth-child(5){animation-delay:1.2s}.droga.is-on .krok:nth-child(6){animation-delay:1.5s}
@keyframes krokin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.droga.is-armed .krok{opacity:1;transform:none;animation:none}}

/* ---- popularne rankingi: chipy w stylu .btn--ghost ---- */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:22px}
.chip{display:inline-block;padding:10px 18px;border-radius:999px;background:#fff;color:var(--m-dark);font-weight:600;font-size:.88rem;text-decoration:none;box-shadow:inset 0 0 0 2px #e3e6ef;transition:box-shadow .2s,color .2s}
.chip:hover{box-shadow:inset 0 0 0 2px var(--m-accent);color:#6d3fd6}

/* ---- 05.11 (wlasciciel): zmiana jezyka obok kotwic u gory (wersje jezykowe = ranking na mikup.eu), jak w rankingu ---- */
.bar{align-items:center}
.m-lang-dd{position:relative;display:inline-block;flex-shrink:0}
.m-lang-dd summary{list-style:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(29,43,79,.06);cursor:pointer}
.m-lang-dd summary::-webkit-details-marker{display:none}
.m-lang-dd summary:hover,.m-lang-dd[open] summary{background:rgba(162,89,255,.14)}
.m-lang-flaga{display:block;width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(29,43,79,.12)}
.m-lang-dd__lista{position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:180px;padding:6px;background:#fff;border:1px solid #e3e8f0;border-radius:10px;box-shadow:0 8px 24px rgba(29,43,79,.14);text-align:left}
.m-lang-dd__lista a{display:flex;align-items:center;gap:10px;padding:8px 10px;color:var(--m-dark);text-decoration:none;font-weight:500;font-size:13px;border-left:2px solid transparent}
.m-lang-dd__lista a:hover{background:#f4f6fb}
.m-lang-dd__lista a.is-active{border-left-color:#6d3fd6;color:#6d3fd6;font-weight:700}
@media (max-width:640px){
  .bar{display:flex;justify-content:flex-end;padding-block:10px 0}
  .bar>a{display:none}
}

/* ---- kraj dostawy w stopce (jak w stopce rankingu) ---- */
.rynki{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;margin-top:14px;font-size:13px;font-weight:500}
.rynki__et{padding:6px 6px 6px 0;color:#8f98b3;font-weight:400}
.rynki a,.rynki__ten{padding:6px 10px;color:#c9cfe0;text-decoration:none;border-left:2px solid transparent}
.rynki a:hover{color:#fff}
.rynki__ten{color:var(--m-amber);font-weight:700;border-left-color:var(--m-amber)}