/* ==========================================================================
   pages/kontakt.css: bloki strony Kontakt (prefiks .kontakt-*) + statyczny plan ośrodka
   .resort-map / .map-list (design-system.md §14). Sam rysunek planu to komponent
   PlanOsrodka.astro, jego style (.plan-osrodka*, .rm-*) są w base.css, sekcja PlanOsrodka.
   Tylko tokeny z base.css, zero wartości hex.
   ========================================================================== */
/* ---------- 1. Hero z liniami kontaktu ---------- */
.kontakt-hero .hero__grid{padding-top:var(--s-6)}
.kontakt-hero .hero__content{display:grid;gap:var(--s-5);justify-items:start;padding-bottom:var(--s-7)}
.kontakt-hero .hero__title{font-size:clamp(2.25rem, 1.55rem + 2.5vw, 3.625rem);font-stretch:var(--w-wide);max-width:17ch}
.kontakt-hero .breadcrumbs{color:var(--ink-2)}
.kontakt-hero .hero__actions{margin-top:0}
.kontakt-hero__media{aspect-ratio:3/2 !important}
.kontakt-lines{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--gap);width:100%;max-width:40rem}
.kontakt-lines .contact-line{align-content:start;padding-top:var(--s-3);border-top:1px solid var(--line)}
.kontakt-lines .contact-line__tel{font-size:clamp(1.375rem, 1.2rem + .6vw, 1.625rem);min-height:40px}
.kontakt-lines .contact-line__tel + .contact-line__tel{margin-top:-8px}
.kontakt-lines .contact-line__mail{font-size:1.0625rem;min-height:40px;overflow-wrap:anywhere}
@media (max-width:479px){ .kontakt-lines .contact-line:last-child{grid-column:1 / -1} }
.kontakt-hero__meta{display:grid;gap:var(--s-2);list-style:none;margin:0;padding:0;color:var(--ink-2);font-size:var(--t-small);font-weight:500}
.kontakt-hero__meta li{display:flex;gap:var(--s-3);align-items:flex-start;max-width:none}
.kontakt-hero__meta .i{color:var(--ink);margin-top:.05em}
@media (max-width:1023px){
  .kontakt-hero .hero__content{order:1}
  .kontakt-hero .hero__media{order:2}
}
@media (min-width:1024px){
  .kontakt-hero .hero__grid{padding-top:0;min-height:min(calc(100svh - var(--header-h)), 820px)}
  .kontakt-hero .hero__content{grid-column:1 / span 6;padding:var(--s-7) 0}
  .kontakt-hero .hero__media{grid-column:7 / -1;aspect-ratio:auto !important;align-self:stretch;margin-block:var(--s-5)}
}

/* ---------- 2. Plan ośrodka: kontener (rysunek: PlanOsrodka.astro, style w base.css) ---------- */
.kontakt-plan{padding-top:calc(var(--section) * .7)}
.resort-map{position:relative}

/* ---------- 3. Lista miejsc (tekstowa alternatywa planu, statyczna) ---------- */
.map-list{margin-top:var(--s-9)}
.map-list__title{margin-bottom:var(--s-6)}
.map-list__grid{display:grid;gap:var(--gap)}
@media (min-width:768px){ .map-list__grid{grid-template-columns:repeat(2,minmax(0,1fr))} .map-list__places{grid-column:1 / -1} }
@media (min-width:1280px){ .map-list__grid{grid-template-columns:4fr 4fr 5fr} .map-list__places{grid-column:auto} }
.map-list__item{display:grid;grid-template-rows:auto auto 1fr auto auto;gap:var(--s-4);container-type:inline-size;padding:clamp(1.25rem, 2.2vw, 1.75rem);background:var(--paper);border-top:2px solid var(--ink)}
.map-list__item p{color:var(--ink-2)}
.map-list__name{display:flex;align-items:center;gap:var(--s-3)}
.map-list__price{display:grid;align-self:end;justify-items:start;gap:var(--s-1);color:var(--ink-2);font-size:var(--t-small);font-weight:500}
.map-list__price .t-price{color:var(--ink);font-size:clamp(1.75rem, 1.5rem + .8vw, 2.25rem)}
/* 8 kolumn: 8 tabliczek domków parterowych w jednym rzędzie, 1–7 w tej samej siatce; wąska karta: 4 kolumny (4+4, 4+3). Tabliczki są statyczne, bez celu dotyku */
.map-list__plates{display:grid;grid-template-columns:repeat(8,minmax(0,40px));gap:var(--s-1) 0;list-style:none;margin:0;padding:0}
.map-list__plates li{display:grid;place-items:center;max-width:none}
@container (max-width:319px){ .map-list__plates{grid-template-columns:repeat(4,40px);gap:var(--s-1) var(--s-2)} }
.map-list__places{display:grid;list-style:none;margin:0;padding:var(--s-2) clamp(.5rem, 1vw, .75rem) var(--s-3);background:var(--paper);border-top:2px solid var(--ink);align-content:start}
.map-list__places li{max-width:none;border-bottom:1px solid var(--line)}
.map-list__place{display:grid;gap:2px;padding:var(--s-3) var(--s-3) var(--s-3) var(--s-2);text-align:left}
.map-list__place-name{font-weight:600}
.map-list__place-desc{color:var(--ink-2);font-size:var(--t-small);font-weight:500}

/* ---------- 4. Dojazd + fasada mapy Google ---------- */
.kontakt-route__grid{display:grid;gap:var(--s-8) var(--gap)}
@media (min-width:1024px){ .kontakt-route__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start} }
.kontakt-route__address{display:grid;gap:var(--s-1);font-size:var(--t-lead);color:var(--ink)}
.kontakt-route__address .t-h3{margin-bottom:var(--s-2)}
.kontakt-route__address .t-meta{font-size:var(--t-body)}
.kontakt-route__actions{margin:var(--s-6) 0 var(--s-8)}
.kontakt-ways{display:grid;gap:var(--s-6) var(--gap);list-style:none;margin:0;padding:0}
@media (min-width:768px){ .kontakt-ways{grid-template-columns:repeat(3,minmax(0,1fr))} }
.kontakt-way{display:grid;gap:var(--s-3);align-content:start;padding-top:var(--s-4);border-top:1px solid var(--line);max-width:none}
.kontakt-way .i--lg{color:var(--ink)}
.kontakt-way p{color:var(--ink-2);margin-top:var(--s-2)}
.kontakt-gmap{display:grid;gap:var(--s-3)}
.kontakt-gmap__facade{display:grid;background:var(--paper);border:1px solid var(--line)}
.kontakt-gmap__art{position:relative;aspect-ratio:4 / 5;overflow:hidden;background:var(--paper)}
.kontakt-gmap__lake{position:absolute;inset:0;width:100%;height:100%;color:var(--sky-ink);fill:var(--sky);fill-opacity:.24}
.kontakt-gmap__label{position:absolute;font-size:var(--t-small);font-weight:600;color:var(--ink);white-space:nowrap}
.kontakt-gmap__label--lake{left:43%;top:36%;font-style:italic;font-weight:300;font-stretch:var(--w-wide);font-size:clamp(1rem, .9rem + .5vw, 1.25rem);color:var(--ink-2);transform:rotate(-72deg);transform-origin:left center}
.kontakt-gmap__label--rejs{right:calc(100% - 59.4% + 18px);top:81.1%;transform:translateY(-50%);padding:.25rem .625rem;background:var(--ink);color:var(--mist);font-stretch:var(--w-label);letter-spacing:.02em}
.kontakt-gmap__label--city{right:var(--s-4);bottom:var(--s-4);display:inline-flex;align-items:center;gap:var(--s-2);font-stretch:var(--w-label);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-size:var(--t-label)}
.kontakt-gmap__label--city .i{transform:rotate(90deg)}
.kontakt-gmap__cta{display:grid;gap:var(--s-3);justify-items:start;padding:var(--s-5);border-top:1px solid var(--line)}
.kontakt-gmap__cta p{color:var(--ink-2)}
.kontakt-gmap__frame{display:block;width:100%;aspect-ratio:4 / 5;border:1px solid var(--line);background:var(--paper)}
.kontakt-gmap__credit{color:var(--ink-3)}

/* ---------- 5. Dane do rezerwacji ---------- */
.kontakt-data__grid{display:grid;gap:var(--gap);align-items:stretch}
@media (min-width:768px){ .kontakt-data__grid{grid-template-columns:repeat(2,minmax(0,1fr))} .kontakt-bank{grid-column:1 / -1} }
@media (min-width:1024px){ .kontakt-data__grid{grid-template-columns:6fr 3fr 3fr} .kontakt-bank{grid-column:auto} }
.kontakt-bank{background:var(--mist);border-top:2px solid var(--ink);interpolate-size:allow-keywords}
.kontakt-bank__summary{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-5);min-height:64px;padding:clamp(1.25rem, 2.2vw, 1.75rem);cursor:pointer;list-style:none}
.kontakt-bank__label{display:grid;gap:var(--s-3)}
.kontakt-bank__sub{color:var(--ink-2)}
.kontakt-bank__summary .i{width:24px;height:24px;margin-top:2px}
@media (hover:hover) and (pointer:fine){ .kontakt-bank__summary:hover .t-h4{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px} }
.kontakt-bank__summary::-webkit-details-marker{display:none}
.kontakt-bank__summary .i{flex:none;transition:transform var(--d-ui) var(--ease-ui)}
.kontakt-bank[open] .kontakt-bank__summary .i{transform:rotate(45deg)}
.kontakt-bank::details-content{block-size:0;overflow:hidden;transition:block-size var(--d-panel) var(--ease-ui),content-visibility var(--d-panel) allow-discrete}
.kontakt-bank[open]::details-content{block-size:auto}
.kontakt-bank__body{display:grid;gap:var(--s-5);padding:0 clamp(1.25rem, 2.2vw, 1.75rem) clamp(1.25rem, 2.2vw, 1.75rem)}
.kontakt-dl{display:grid;margin:0}
.kontakt-dl > div{display:grid;gap:2px;padding:var(--s-3) 0;border-top:1px solid var(--line)}
.kontakt-dl dt{color:var(--ink-2);font-size:var(--t-small);font-weight:500}
.kontakt-dl dd{margin:0;font-weight:600}
.kontakt-bank__iban{display:block;font-size:clamp(1.25rem, 1.1rem + .6vw, 1.625rem);letter-spacing:.02em;margin:2px 0 var(--s-3)}
.kontakt-bank__copy.is-success{--btn-bg:var(--ink);--btn-fg:var(--mist)}
.kontakt-data__card{display:grid;gap:var(--s-3);align-content:start;padding:clamp(1.25rem, 2.2vw, 1.75rem);background:var(--mist);border-top:2px solid var(--ink)}
.kontakt-data__card p{color:var(--ink-2)}
.kontakt-data__links{display:grid;gap:var(--s-3);list-style:none;margin:0;padding:0}

/* ---------- 6. FAQ i CTA na koniec ---------- */
.kontakt-final__grid{display:grid;gap:var(--s-8) var(--gap)}
@media (min-width:1024px){ .kontakt-final__grid{grid-template-columns:5fr 7fr;align-items:end} }
.kontakt-final__cta{display:grid;gap:var(--s-4);justify-items:start}
.kontakt-final__tel{display:inline-block;margin-top:var(--s-3);color:var(--ink);background:linear-gradient(var(--accent),var(--accent)) 0 92%/100% .14em no-repeat;transition:color var(--d-micro) var(--ease-ui)}
.kontakt-final__cta p{color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){ .kontakt-final__tel:hover{color:var(--sky-ink)} }
.kontakt-final__cta .cluster{margin-top:var(--s-3)}
.kontakt-gmap__dot{position:absolute;left:59.4%;top:81.1%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--accent);outline:5px solid color-mix(in srgb, var(--accent) 30%, transparent)}