/* ===========================================================================
   Komponenty wspólne dla /szkolenia i strony salonu. Zależy od tokens.css.
   Mobile-first. Zasady: wszystko do lewej · promień tylko na klikalnych ·
   kolor tylko na akcjach.
   =========================================================================== */

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--s-3);top:var(--s-3);z-index:100;background:var(--ink);
  color:var(--paper);padding:var(--s-2) var(--s-3);border-radius:var(--r-klikalne)}

/* ── Nagłówek ───────────────────────────────────────────────────────────── */
.naglowek{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.naglowek__pas{display:flex;align-items:center;gap:var(--s-3);height:var(--wys-naglowka)}
.marka{font-weight:var(--waga-mocna);font-size:1.0625rem;letter-spacing:-.01em;
  text-decoration:none;margin-right:auto}
.nawigacja{display:none}
.nawigacja ul{display:flex;gap:var(--s-4);align-items:center}
.nawigacja a{text-decoration:none;font-size:var(--ts-small);color:var(--stone);
  padding-block:var(--s-2);transition:color var(--czas) var(--krzywa)}
.nawigacja a:hover{color:var(--ink)}
.nawigacja a[aria-current='page']{color:var(--ink)}

.menu-przycisk{width:44px;height:44px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-klikalne)}
.menu-przycisk__kreski,
.menu-przycisk__kreski::before,
.menu-przycisk__kreski::after{
  content:'';display:block;width:18px;height:1.5px;background:var(--ink);
  transition:transform var(--czas) var(--krzywa)}
.menu-przycisk__kreski::before{transform:translateY(-6px)}
.menu-przycisk__kreski::after{transform:translateY(4.5px)}
.menu-przycisk[aria-expanded='true'] .menu-przycisk__kreski{background:transparent}
.menu-przycisk[aria-expanded='true'] .menu-przycisk__kreski::before{transform:rotate(45deg)}
.menu-przycisk[aria-expanded='true'] .menu-przycisk__kreski::after{transform:rotate(-45deg) translateY(0)}

.nawigacja.otwarte{display:block;position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-bottom:1px solid var(--line);
  padding:var(--s-3) var(--margines) var(--s-4)}
.nawigacja.otwarte ul{flex-direction:column;align-items:flex-start;gap:0}
.nawigacja.otwarte a{display:block;padding:var(--s-3) 0;font-size:1.125rem;
  color:var(--ink);border-bottom:1px solid var(--line);width:100%}

/* ── Akcje ──────────────────────────────────────────────────────────────── */
.akcja{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:var(--s-2) var(--s-4);
  background:var(--red);color:var(--white);border:0;border-radius:var(--r-klikalne);
  font-weight:var(--waga-mocna);font-size:var(--ts-body);
  text-decoration:none;text-align:center;
  transition:background var(--czas) var(--krzywa);
}
.akcja:hover{background:color-mix(in srgb, var(--red) 86%, black)}
.akcja--mala{min-height:48px;padding:var(--s-2) var(--s-3);font-size:var(--ts-small)}
.naglowek .akcja--mala{display:none}

.akcja-poboczna{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:var(--s-2) var(--s-4);
  background:transparent;color:var(--ink);
  border:1px solid var(--ink);border-radius:var(--r-klikalne);
  font-size:var(--ts-body);text-decoration:none;
  transition:background var(--czas) var(--krzywa);
}
.akcja-poboczna:hover{background:color-mix(in srgb, var(--ink) 8%, transparent)}
.akcja-poboczna--ikona{min-width:56px;padding:var(--s-2)}

/* ── Rama treści ────────────────────────────────────────────────────────── */
.sekcja{padding-block:var(--odstep-sekcji)}
.sekcja--linia{border-top:1px solid var(--line)}
.sekcja--ciemna{background:var(--ink);color:var(--paper)}
.sekcja--ciemna .h1{color:var(--paper)}
.sekcja--ciemna .notka{color:color-mix(in srgb, var(--paper) 60%, var(--ink))}

.nadtytul{font-size:var(--ts-small);color:var(--stone);margin-bottom:var(--s-2)}
.nadtytul--jasny{color:color-mix(in srgb, var(--paper) 70%, var(--ink))}
.h1{font-size:var(--ts-h1);margin-bottom:var(--s-3)}
.wstep{margin-bottom:var(--s-5);color:var(--stone)}
.notka{font-size:var(--ts-small);color:var(--stone);margin-top:var(--s-3)}

/* ── Siatka dwukolumnowa: zdjęcie + treść ──────────────────────────────── */
.siatka-2{display:grid;gap:var(--s-5)}
.siatka-2__foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.siatka-2__tresc > .proza{margin-bottom:var(--s-3)}

/* ── Tabela ─────────────────────────────────────────────────────────────── */
.tabela-otoczka{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabela{width:100%;border-collapse:collapse;min-width:460px}
.tabela th,.tabela td{text-align:left;padding:var(--s-3) var(--s-3) var(--s-3) 0;
  border-bottom:1px solid var(--line);vertical-align:baseline}
.tabela thead th{font-size:var(--ts-small);font-weight:var(--waga-mocna);
  color:var(--stone);border-bottom-color:var(--ink)}
.tabela tbody th{font-weight:var(--waga-ui)}
.tabela tbody th a{text-decoration:none;border-bottom:1px solid var(--line)}
.tabela tbody th a:hover{border-bottom-color:var(--ink)}
.tabela td.cena{font-weight:var(--waga-mocna);color:var(--red);white-space:nowrap}
.tabela td.cena i{font-style:normal;font-size:var(--ts-small);
  font-weight:var(--waga-ui);color:var(--stone)}
.tabela td.niedostepne{color:var(--stone);font-weight:var(--waga-ui)}

/* ── Formularz ──────────────────────────────────────────────────────────── */
.formularz{margin-top:var(--s-5);display:grid;gap:var(--s-4);max-width:32rem}
.pole{display:grid;gap:var(--s-2)}
.pole label{font-size:var(--ts-small);font-weight:var(--waga-mocna)}
.opcjonalne{font-weight:var(--waga-ui);color:var(--stone)}
.pole input,.pole select,.pole textarea{
  width:100%;min-height:48px;padding:var(--s-2) var(--s-3);
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-klikalne);
  transition:border-color var(--czas) var(--krzywa);
}
.pole textarea{min-height:96px;resize:vertical}
.pole input:focus,.pole select:focus,.pole textarea:focus{border-color:var(--ink)}
.pole input[aria-invalid='true']{border-color:var(--red)}
.pole--zgoda{grid-template-columns:auto 1fr;align-items:start;gap:var(--s-3);
  position:relative;padding:var(--s-2) 0}
.pole--zgoda input{width:22px;min-height:22px;height:22px;margin-top:1px}
.pole--zgoda label{font-weight:var(--waga-ui);line-height:1.4}
.pole--zgoda label::before{content:'';position:absolute;inset:0;cursor:pointer}
.blad{font-size:var(--ts-small);color:var(--red)}
.formularz .notka a{color:var(--ink)}

/* ── Stopka ─────────────────────────────────────────────────────────────── */
.stopka{background:var(--ink);color:var(--paper);padding-block:var(--s-6)}
.stopka__siatka{display:grid;gap:var(--s-4)}
.stopka__marka{font-weight:var(--waga-mocna);margin-bottom:var(--s-2)}
.stopka__adres{font-size:var(--ts-small);line-height:1.6;
  color:color-mix(in srgb, var(--paper) 70%, var(--ink))}
.stopka__linki{display:grid;gap:var(--s-2);font-size:var(--ts-small)}
.stopka__linki a{text-decoration:none;
  color:color-mix(in srgb, var(--paper) 80%, var(--ink))}
.stopka__linki a:hover{color:var(--paper)}

/* ── Pasek mobilny ──────────────────────────────────────────────────────── */
.pasek-mobilny{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;gap:var(--s-2);padding:var(--s-2) var(--s-3);
  padding-bottom:max(var(--s-2), env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:blur(8px);border-top:1px solid var(--line);
}
.pasek-mobilny .akcja{flex:1}
body{padding-bottom:76px}

/* ═══ TABLET ════════════════════════════════════════════════════════════ */
@media (min-width:48rem){
  .siatka-2{grid-template-columns:5fr 7fr;gap:var(--s-6);align-items:start}
  .siatka-2--odwrotna .siatka-2__foto{order:2}
  .stopka__siatka{grid-template-columns:1fr auto}
  .stopka__linki{display:flex;gap:var(--s-4)}
  .pasek-mobilny{display:none}
  body{padding-bottom:0}
}

/* ═══ DESKTOP ═══════════════════════════════════════════════════════════ */
@media (min-width:64rem){
  .nawigacja{display:block}
  .menu-przycisk{display:none}
  .naglowek .akcja--mala{display:inline-flex;margin-left:var(--s-4)}
  .marka{margin-right:var(--s-6)}
  .nawigacja ul{margin-right:auto}
}