@charset "UTF-8";
/*! MKM Labs frontend 2026-10-04 - /szkolenia-ai-dla-firm/<miasto>/ (city training case pages).
 * Loaded AFTER page-szkolenia.20261004.css (reuses szk-* components); only city-specific additions live here. */

.city-page .city-h1{font-size:clamp(34px,5.2vw,84px);line-height:1.02;text-wrap:balance}
.city-page .city-h2{text-wrap:balance}
.city-page .city-lede{max-width:860px}
.city-page .city-lead{max-width:560px;color:#c3c8d3;font-size:17px;line-height:1.6;text-wrap:pretty}
.city-page .szk-head--narrow .city-lead{max-width:760px}

/* split blocks: heading left, list/steps right */
.city-split__head{flex:1 1 360px;max-width:520px}

/* soft band behind alternating sections */
.city-band{position:relative}
.city-band::before{content:"";position:absolute;inset:0 clamp(0px,1.4vw,24px);border-radius:40px;background:rgba(255,255,255,.022);border:1px solid rgba(255,255,255,.05);pointer-events:none}
.city-band>.fe-wrap{position:relative;padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(36px,5vw,64px)}

/* numbered steps (ol) */
.city-steps{flex:1.4 1 520px;min-width:0;display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;counter-reset:city-step}
.city-step{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px 24px 22px 72px;border-radius:22px;background:#12161f;border:1px solid rgba(255,255,255,.07);counter-increment:city-step}
.city-step::before{content:counter(city-step,decimal-leading-zero);position:absolute;left:24px;top:22px;width:32px;height:32px;border-radius:50%;background:rgba(0,87,255,.18);border:1px solid rgba(153,186,255,.3);color:#99baff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.city-step__t{font-size:clamp(17px,1.5vw,20px);font-weight:600;letter-spacing:-0.015em;line-height:1.3;color:#fff}
.city-step__d{color:#c3c8d3;font-size:16px;line-height:1.6;text-wrap:pretty}
.city-step__d a,.szk-check a,.city-lead a,.city-trainer__bio a{color:#99baff}
.city-step__d a:hover,.szk-check a:hover{color:#fff}
.szk-check p strong{color:#fff;font-weight:600}

/* trainer card (compact) */
.city-trainer{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,36px);align-items:center;max-width:920px;padding:clamp(22px,3vw,36px);border-radius:32px;background:#12161f;border:1px solid rgba(255,255,255,.08)}
.city-trainer__photo{flex:0 0 auto;width:160px;height:160px;border-radius:26px;object-fit:cover;background:#07101d}
.city-trainer__body{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:10px}
.city-trainer__role{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6699ff}
.city-trainer__name{font-size:clamp(26px,2.6vw,36px);font-weight:600;letter-spacing:-0.03em;line-height:1.05}
.city-trainer__name a{color:#fff}
.city-trainer__name a:hover{color:#99baff}
.city-trainer__bio{color:#c3c8d3;font-size:16px;line-height:1.65;text-wrap:pretty}
.city-trainer__links{margin:0}

/* pricing value is a sentence here, not a single number */
.city-price__v{font-size:clamp(20px,1.9vw,26px);font-weight:600;letter-spacing:-0.025em;line-height:1.2;text-wrap:balance}

.szk-long .szk-card__d a{color:#99baff}
.szk-bridge .fe-eyebrow{margin:0}
.szk-bridge .fe-h2{margin:0}

@media (max-width:560px){
  .city-step{padding:64px 20px 20px}
  .city-step::before{left:20px;top:20px}
  .city-trainer__photo{width:120px;height:120px;border-radius:22px}
  .city-band::before{border-radius:28px}
}