/* Szkółki rolkowe — mapa i lista. Wszystko w obrębie .szk; kolory i kroje z arkusza sklepu. */

.szk { padding-bottom: 56px; }
.szk h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.szk-finder { margin-bottom: 48px; }

/* ---- pasek wyszukiwania ---- */
.szk-bar { display: grid; grid-template-columns: minmax(300px, 1.7fr) minmax(170px, 1fr) minmax(210px, 1.1fr); gap: 6px 20px; align-items: start; padding: 18px 20px 6px; background: var(--biel); border: 1px solid var(--linia); border-bottom: 0; border-radius: var(--r-l) var(--r-l) 0 0; }
.szk-bar .field { margin-bottom: 8px; }
.szk-bar__row { display: flex; gap: 8px; }
.szk-bar__row input { min-width: 0; }
.szk-bar select, .szk-bar__row input { min-height: 50px; }
.szk-bar__row .btn { flex: none; white-space: nowrap; }
.szk-bar__hint { margin: 2px 0 0; font-size: .88rem; color: var(--tekst-2); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.szk-bar__hint .linklike { font-weight: 600; color: var(--fiolet-2); }
.szk-bar__hint [data-szk-locate-msg]:empty { display: none; }

/* ---- mapa + lista ---- */
.szk-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-l); overflow: hidden; }
.szk-bar + .szk-grid { border-radius: 0 0 var(--r-l) var(--r-l); }
.szk-grid--empty { grid-template-columns: minmax(0, 1.06fr) minmax(0, .8fr); }

.szk-map { position: relative; background: var(--czern); color: var(--biel); }
.szk-map__svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.szk-map.is-zoomed .szk-map__svg { cursor: grab; touch-action: none; }
.szk-map.is-drag .szk-map__svg { cursor: grabbing; }
.szk-map__grid { stroke: #fff; stroke-opacity: .075; stroke-width: 1; vector-effect: non-scaling-stroke; }
.szk-map__land { fill: var(--noc); stroke: #8a63e6; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.szk-map__dots { pointer-events: none; }
.szk-map__deg text { font-family: var(--mono); fill: #fff; fill-opacity: .36; }
.szk-map__towns circle { fill: #b9a4e8; }
.szk-map__towns text { font-family: var(--mono); fill: #b9a4e8; text-transform: uppercase; letter-spacing: .04em; }
.szk-map__stores rect { fill: var(--biel); stroke: var(--czern); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.szk-map__stores a:hover rect, .szk-map__stores a:focus-visible rect { fill: var(--lila-3); }

.szk-pin { cursor: pointer; text-decoration: none; outline: none; }
.szk-pin__dot { fill: var(--zolty); stroke: var(--czern); stroke-width: 2.5; vector-effect: non-scaling-stroke; transition: fill .15s; }
.szk-pin__hub { fill: var(--czern); pointer-events: none; }
.szk-pin__n { font-family: var(--display); font-weight: 800; text-anchor: middle; fill: var(--czern); pointer-events: none; }
.szk-pin__label { font-family: var(--sans); font-weight: 700; text-anchor: middle; fill: var(--biel); paint-order: stroke; stroke: var(--czern); stroke-linejoin: round; opacity: 0; transition: opacity .15s; pointer-events: none; }

.szk-map--named .szk-pin__label, .szk-pin:hover .szk-pin__label, .szk-pin:focus-visible .szk-pin__label, .szk-pin.is-on .szk-pin__label { opacity: 1; }
/* pinezka z literą: nazwa szkółki dopiero po najechaniu — litera odsyła do listy */
.szk-map .szk-pin.szk-pin--mark .szk-pin__label { opacity: 0; }
.szk-map .szk-pin.szk-pin--mark:hover .szk-pin__label, .szk-map .szk-pin.szk-pin--mark:focus-visible .szk-pin__label { opacity: 1; }
.szk-pin:hover .szk-pin__dot { fill: var(--biel); }
.szk-pin:focus-visible .szk-pin__dot { fill: var(--biel); stroke: var(--zolty); stroke-width: 4; }
.szk-pin.is-on .szk-pin__dot { fill: var(--biel); stroke: var(--zolty); stroke-width: 4.5; }
.szk-pin.is-dim { opacity: .38; }
.szk-me circle { fill: none; stroke: var(--biel); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.szk-me .szk-me__dot { fill: var(--biel); stroke: none; }
.szk-me text { font-family: var(--mono); fill: var(--biel); text-anchor: middle; paint-order: stroke; stroke: var(--czern); stroke-linejoin: round; text-transform: uppercase; letter-spacing: .04em; }

.szk-map__zoom { position: absolute; top: 14px; right: 14px; display: grid; grid-template-columns: 40px 40px; gap: 4px; }
.szk-map__zoom button { height: 40px; border: 1px solid #4a4458; border-radius: var(--r); background: #1d1826; color: var(--biel); font: 800 1.5rem/1 var(--display); cursor: pointer; }
.szk-map__zoom button:hover:not(:disabled) { background: var(--zolty); border-color: var(--zolty); color: var(--czern); }
.szk-map__zoom button:disabled { opacity: .35; cursor: default; }
.szk-map__zoom .szk-map__all { grid-column: 1 / -1; font: 600 .78rem/1 var(--sans); }
.szk-map__legend { position: absolute; left: 10px; bottom: 10px; margin: 0; padding: 6px 9px; background: rgba(20, 16, 28, .86); border-radius: 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 500 .7rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #cbbfe6; }
.szk-map__key { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: var(--zolty); box-shadow: 0 0 0 2px var(--czern); margin-left: 10px; }
.szk-map__key:first-child { margin-left: 0; }
.szk-map__key--n { width: 20px; height: 20px; font: 800 .86rem/20px var(--display); color: var(--czern); text-align: center; letter-spacing: 0; }
.szk-map__key--store { width: 10px; height: 10px; border-radius: 0; background: var(--biel); transform: rotate(45deg); margin-right: 3px; }

.szk-list { position: relative; min-width: 0; border-left: 1px solid var(--linia); }
.szk-list__in { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; overscroll-behavior: contain; }
.szk-list__status { margin: 0; padding: 14px 22px; background: var(--lila); border-bottom: 1px solid var(--linia); font-size: .92rem; position: sticky; top: 0; z-index: 1; }
.szk-list__status .linklike { margin-left: 8px; font-weight: 600; color: var(--fiolet-2); }
.szk-list__none { margin: 0; padding: 22px; }
.szk-list__all { margin: 0; padding: 16px 22px; border-bottom: 1px solid var(--linia); }
.szk-list__all .btn { width: 100%; }
.szk-list__more { margin: auto 0 0; padding: 16px 22px 18px; background: var(--tlo); border-top: 1px solid var(--linia); font-size: .9rem; color: var(--tekst-2); }
.szk-list__more a { font-weight: 600; color: var(--fiolet-2); }
.szk-grid--empty .szk-list { background: var(--fiolet); color: var(--biel); border-left: 0; }
.szk-empty { padding: 34px 32px; margin: auto 0; }
.szk-empty h3 { font-size: clamp(2rem, 3vw, 2.8rem); margin-bottom: 16px; }
.szk-empty p { color: #eadffc; font-size: 1.05rem; max-width: 46ch; }
.szk-empty a { font-weight: 700; color: var(--zolty-3); }
.szk-empty__go { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.szk-empty__go .btn--mark { background: var(--zolty); border-color: var(--zolty); color: var(--czern); }
.szk-empty__go .btn--line { border-color: var(--biel); color: var(--biel); background: none; }
.szk-empty__go .btn:hover { background: var(--biel); border-color: var(--biel); color: var(--czern); }

/* ---- wizytówka szkółki ---- */
.szk-item { padding: 20px 22px 18px; border-bottom: 1px solid var(--linia); scroll-margin-top: 110px; }
.szk-item.is-on { background: #fffbee; box-shadow: inset 5px 0 0 var(--zolty); }
.szk-item__head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.szk-item__logo { width: 56px; height: 56px; border-radius: var(--r); object-fit: contain; background: var(--biel); border: 1px solid var(--linia); flex: none; }
.szk-item__mark { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--zolty); box-shadow: 0 0 0 3px var(--czern); font: 800 1.25rem/34px var(--display); text-align: center; margin-right: 2px; }
.szk-map__note { margin: -8px 0 0; font-size: .84rem; color: var(--tekst-2); }
.szk-item__name { font: 800 1.55rem/1.02 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 0; text-wrap: balance; }
.szk-item__place { margin: 5px 0 0; font: 500 .74rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-2); }
.szk-item__km { margin-left: 8px; padding: 1px 7px; background: var(--czern); color: var(--zolty); letter-spacing: .03em; }
.szk-item__lead { margin: 0 0 10px; }
.szk-item__facts { margin: 0 0 10px; display: grid; gap: 3px; font-size: .92rem; }
.szk-item__facts div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; }
.szk-item__facts dt { font: 500 .7rem/1.9 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--tekst-2); }
.szk-item__facts dd { margin: 0; }
.szk-item__perk { margin: 0 0 10px; padding: 8px 12px; background: var(--zolty-3); font-size: .92rem; }
.szk-item__links { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .92rem; }
.szk-item__links a { color: var(--fiolet-2); font-weight: 600; }
.szk-item__links a + a::before { content: "·"; display: inline-block; margin: 0 9px; color: var(--linia-2); font-weight: 400; text-decoration: none; }
.szk-item__links .szk-item__www { color: var(--czern); font-weight: 700; }

/* ---- miasta ---- */
.szk-cities { margin-bottom: 48px; }
.szk-cities h2 { margin-bottom: 18px; }
.szk-cities__cols { columns: 4 200px; column-gap: 32px; }
.szk-cities__cols > div { break-inside: avoid; margin-bottom: 18px; }
.szk-cities h3 { font: 500 .74rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--tekst-2); margin: 0 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--czern); }
.szk-cities ul { list-style: none; margin: 0; padding: 0; }
.szk-cities li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--linia); }
.szk-cities li a { font-weight: 600; text-decoration: none; }
.szk-cities li a:hover { color: var(--fiolet); text-decoration: underline; }
.szk-cities li span { font: 500 .8rem/1.8 var(--mono); color: var(--tekst-2); }

/* ---- poradnik + boczne ramki ---- */
.szk-guide { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: start; margin-bottom: 48px; }
.szk-guide__side { display: grid; gap: 18px; }
.szk-guide__main .ws-teaser { margin-top: 26px; }
.szk-box { background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-l); padding: 22px 24px; }
.szk-box h2 { font-size: 1.5rem; margin-bottom: 10px; }
.szk-box p { margin: 0 0 12px; }
.szk-box p:last-child { margin-bottom: 0; }
.szk-box__links { list-style: none; margin: 0; padding: 0; }
.szk-box__links li { border-top: 1px solid var(--linia); }
.szk-box__links a { display: flex; justify-content: space-between; padding: 9px 0; font-weight: 600; text-decoration: none; }
.szk-box__links a::after { content: "→"; color: var(--fiolet); }
.szk-box__links a:hover { color: var(--fiolet); }
.szk-box--dark { background: var(--czern); border-color: var(--czern); color: var(--biel); }
.szk-box--dark p { color: #d9d2e6; }
.szk-box--dark .btn--mark { background: var(--zolty); border-color: var(--zolty); color: var(--czern); }
.szk-box--dark .btn--mark:hover { background: var(--biel); border-color: var(--biel); }
.szk-faq { margin-bottom: 48px; }
.szk-faq h2 { margin-bottom: 16px; }
.szk-faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }

/* ---- zgłoszenie szkółki ---- */
.szk-join { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); border-radius: var(--r-l); overflow: hidden; margin-bottom: 20px; scroll-margin-top: 110px; }
.szk-join__copy { background: var(--fiolet); color: var(--biel); padding: 34px 32px; }
.szk-join__copy .eyebrow { color: var(--zolty-3); }
.szk-join__copy h2 { margin-bottom: 14px; }
.szk-join__copy p { margin: 0 0 20px; color: #eadffc; font-size: 1.05rem; }
.szk-join__copy .eyebrow { margin-bottom: .9em; font-size: .78rem; }
.szk-join__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .28); }
.szk-join__list li { padding: 11px 0 11px 26px; border-bottom: 1px solid rgba(255, 255, 255, .28); position: relative; font-weight: 600; }
.szk-join__list li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 11px; height: 11px; border-radius: 50%; background: var(--zolty); box-shadow: inset 0 0 0 3px var(--czern); }
.szk-join__form { background: var(--lila); padding: 28px 32px 32px; }
.szk-join__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.szk-join__msg { margin: 0 0 16px; padding: 12px 14px; background: #fbe6e3; border-left: 5px solid var(--blad); font-weight: 600; }
.szk-join__msg.is-ok { background: #e3f5ea; border-color: var(--jest); }
.szk-join__form .check a { color: var(--fiolet-2); font-weight: 600; }
.szk-join__form .btn { margin-top: 6px; }
.szk-note { margin: 0; font-size: .88rem; color: var(--tekst-2); max-width: 80ch; }
.szk-credit { margin: 8px 0 0; font-size: .76rem; color: var(--brak); }
.szk-credit a { color: inherit; }

/* ---- strona miasta ---- */
.szk-citygrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 40px; align-items: start; margin-bottom: 48px; }
.szk-citylist { background: var(--biel); border: 1px solid var(--linia); border-radius: var(--r-l); overflow: hidden; }
.szk-citylist .szk-item { padding: 26px 28px 24px; }
.szk-citylist .szk-item__name { font-size: 1.95rem; }
.szk-citylist .szk-item__about { margin: 0 0 14px; }
.szk-citylist .szk-item__about p { margin: 0 0 .8em; }
.szk-citylist .szk-note { padding: 16px 28px 18px; background: var(--tlo); max-width: none; }
.szk-cityside { display: grid; gap: 18px; position: sticky; top: 142px; }
.szk-map--city { border-radius: var(--r-l); overflow: hidden; }
.szk-near { list-style: none; margin: 0; padding: 0; }
.szk-near li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--linia); }
.szk-near a { font-weight: 600; }
.szk-near span { font: 500 .76rem/1.9 var(--mono); color: var(--tekst-2); white-space: nowrap; }
.szk-back { margin: 0; font-size: .92rem; }
.szk-back a { font-weight: 600; color: var(--fiolet-2); }
.ws-teaser--szk { background-color: var(--fiolet-2); }

@media (max-width: 1040px) {
  .szk-bar { grid-template-columns: 1fr 1fr; }
  .szk-bar__place { grid-column: 1 / -1; }
  .szk-grid, .szk-grid--empty { grid-template-columns: 1fr; }
  .szk-list { border-left: 0; border-top: 1px solid var(--linia); }
  .szk-list__in { position: static; overflow: visible; }
  .szk-list__status { top: 60px; }
  .szk-guide, .szk-join, .szk-citygrid { grid-template-columns: 1fr; gap: 28px; }
  .szk-faq__grid { grid-template-columns: 1fr; }
  .szk-join { gap: 0; }
  .szk-cityside { position: static; }
}
@media (max-width: 560px) {
  .szk-bar { grid-template-columns: 1fr; padding: 14px 14px 4px; }
  .szk-bar__row { flex-wrap: wrap; }
  .szk-bar__row .btn { flex: 1 1 100%; }
  .szk-item { padding: 18px 16px 16px; }
  .szk-item__facts div { grid-template-columns: 1fr; gap: 0; }
  .szk-item__facts dt { line-height: 1.5; }
  .szk-list__status, .szk-list__more { padding-inline: 16px; }
  .szk-map__zoom { top: 10px; right: 10px; grid-template-columns: 36px 36px; }
  .szk-map__zoom button { height: 36px; }
  .szk-map__legend { left: 6px; bottom: 6px; right: 6px; font-size: .62rem; }
  .szk-join__copy, .szk-join__form { padding: 24px 18px; }
  .szk-join__row { grid-template-columns: 1fr; }
  .szk-citylist .szk-item { padding: 20px 16px 18px; }
  .szk-citylist .szk-item__name { font-size: 1.6rem; }
  .szk-box { padding: 18px 16px; }
}