/* ===========================================================================
   Strona salonu — tylko elementy właściwe tej stronie.
   Wspólne komponenty: wspolne.css
   =========================================================================== */

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{display:flex;flex-direction:column}
.hero__foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%}
.hero__tekst{padding:var(--s-5) var(--margines) var(--s-6)}
.hero__h1{
  /* Mniejszy pułap niż --ts-display: przy 7 słowach i 5 wierszach CTA
     schodziło pod zgięcie na laptopach 1366x768. */
  font-size:clamp(2.25rem, 1.1rem + 5vw, 4.5rem);
  line-height:1.04;margin-bottom:var(--s-4);
}
.hero__lead{color:var(--stone);margin-bottom:var(--s-5)}
.hero__akcje{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero__akcje .akcja,.hero__akcje .akcja-poboczna{flex:1 1 auto;min-width:170px}

/* ── Prace ──────────────────────────────────────────────────────────────── */
.prace{display:grid;gap:var(--s-2);margin-top:var(--s-4);grid-template-columns:1fr 1fr}
.prace img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}

/* ── Cennik ─────────────────────────────────────────────────────────────── */
/* Grupy usług zamiast osobnych tabel: jedna kolumna cen do przebiegnięcia
   wzrokiem. Nagłówek grupy nie jest ozdobą — dzieli ofertę. */
.tabela--cennik{min-width:0}
.tabela--cennik tbody th{padding-left:0}
.tabela--cennik td{text-align:right;padding-right:0}
.tabela__grupa th{
  font-size:var(--ts-small);font-weight:var(--waga-mocna);
  color:var(--ink);padding-top:var(--s-5);border-bottom-color:var(--ink);
}
.tabela__grupa:first-child th{padding-top:0}
.cennik__akcja{margin-top:var(--s-5)}

/* ── Miejsce ────────────────────────────────────────────────────────────── */
.miejsce{display:grid;gap:var(--s-5);margin-top:var(--s-4)}
.miejsce__foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}

.dane{display:grid;gap:var(--s-3)}
.dane > div{display:grid;gap:2px;padding-bottom:var(--s-3);border-bottom:1px solid var(--line)}
.dane dt{font-size:var(--ts-small);color:var(--stone)}
.dane dd{margin:0;line-height:1.5}
.dane dd a{text-decoration:none;border-bottom:1px solid var(--line)}

/* Mapa ładowana po kliknięciu — oszczędza ~19 żądań i ciasteczka Google */
.mapa{margin-top:var(--s-4);border:1px solid var(--line);background:var(--white)}
.mapa__zastepnik{
  display:grid;gap:var(--s-1);place-content:center;
  width:100%;min-height:180px;padding:var(--s-4);
  background:transparent;border:0;text-align:center;
}
.mapa__tytul{font-weight:var(--waga-mocna)}
.mapa__opis{font-size:var(--ts-small);color:var(--stone);max-width:34ch;margin-inline:auto}
.mapa__ramka{width:100%;height:320px;border:0;display:block}

/* ── Zapisy ─────────────────────────────────────────────────────────────── */
.zapisy{display:grid;gap:var(--s-6)}

/* Trzy sposoby to hierarchia, nie równorzędna lista — dlatego ol, i dlatego
   tylko pierwszy ma przycisk w kolorze akcji. */
.sposoby{display:grid;gap:var(--s-4);margin-top:var(--s-5);counter-reset:sposob}
.sposob{
  display:grid;gap:var(--s-2);
  padding-top:var(--s-3);border-top:1px solid var(--line);
}
.sposob h3{font-size:var(--ts-h3);font-weight:var(--waga-mocna)}
.sposob .proza{color:var(--stone);font-size:var(--ts-body);font-family:var(--font-display)}
.sposob .akcja,.sposob .akcja-poboczna{justify-self:start;margin-top:var(--s-1)}
.sposob--pierwszy{border-top-color:var(--ink)}

.zapisy__formularz .formularz{margin-top:0}

/* ── Zajawka szkoleń ────────────────────────────────────────────────────── */
.zajawka{display:grid;gap:var(--s-4)}
.zajawka .proza{color:color-mix(in srgb, var(--paper) 75%, var(--ink))}
.zajawka .akcja{justify-self:start}

/* ═══ TABLET ════════════════════════════════════════════════════════════ */
@media (min-width:48rem){
  .hero{
    display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--s-5);
    padding-inline:var(--margines);max-width:var(--kontener);margin-inline:auto;
    min-height:calc(100svh - var(--wys-naglowka));
  }
  .hero__tekst{padding:var(--s-6) 0}
  .hero__foto img{aspect-ratio:3/4}

  .prace{grid-template-columns:repeat(4,1fr)}
  .tabela--cennik{max-width:640px}
  .miejsce{grid-template-columns:5fr 7fr;gap:var(--s-6);align-items:start}
  .zapisy{grid-template-columns:6fr 6fr;gap:var(--s-6);align-items:start}
  .sposoby{gap:var(--s-5)}
  .zajawka{grid-template-columns:1fr auto;align-items:end;gap:var(--s-6)}
  .zajawka .akcja{justify-self:end}
}

/* ═══ DESKTOP ═══════════════════════════════════════════════════════════ */
@media (min-width:64rem){
  .hero__akcje .akcja,.hero__akcje .akcja-poboczna{flex:0 0 auto}
  .miejsce{grid-template-columns:6fr 6fr}
}