/* archivo-vietnamese-wdth-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/assets/archivo-vietnamese-wdth-normal-rJmnGBSt.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* archivo-latin-ext-wdth-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/assets/archivo-latin-ext-wdth-normal-7khWdh9v.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* archivo-latin-wdth-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(/assets/archivo-latin-wdth-normal-DY7AcnAa.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* ═══════════════════════════════════════════════════════════
   Studio Tańca NR - podstawa

   Tylko to, czego potrzebuje każda podstrona: reset, tło i ostrość
   fokusu. Kolor, krój i układ trzymają arkusze w src/taniec/.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'Archivo Variable', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #f6f4f1;
  background: #0a090e;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.038em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img, svg, video { display: block; max-width: 100%; }
ul, ol { list-style: none; margin: 0; padding: 0; }

::selection { background: #8b5cf6; color: #0a090e; }

:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: 3px;
  border-radius: 4px;
}

.app-shell { position: relative; z-index: 1; }

.app-error {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.app-error__card {
  max-width: 420px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.app-error__card h1 { font-size: 24px; }

.app-error__card button {
  padding: 0.8rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: #8b5cf6;
  color: #0a090e;
  font-weight: 600;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ═══════════════════════════════════════════════════════════
   Studio Tańca NR
   ═══════════════════════════════════════════════════════════

   Strona stoi na czterech regułach:

    1. Jedna myśl na ekran. Wielki nagłówek, jedno zdanie pod nim, jeden
       przycisk - i dużo pustego miejsca dookoła. Pusta przestrzeń jest
       częścią projektu, nie resztką.

    2. Plakat zamiast ozdobnika. Nazwy stylów i hasła są złożone wąskim,
       ciężkim krojem w wersalikach, jak afisze szkół tańca. Duży napis
       robi to, co w tamtych miejscach robi wideo.

    3. Światło, nie gradient. Fiolet pojawia się jako poświata za treścią
       - rozlana i powolna, jak reflektor na scenie. Na płaszczyznach
       i przyciskach tylko tam, gdzie ma coś znaczyć.

    4. Zaokrąglenie tylko dla przedmiotów. Wpis i kafel z ofertą dostają
       dużą zaokrągloną płytę, lekko jaśniejszą od tła. Wszystko, co jest
       danymi - grafik, poziomy, przełącznik dnia - stoi na kącie prostym.
       Strona zaokrąglona w całości robi się miękka i traci rytm.

   Kolory są fioletowe: noc prawie czarna, a fiolet w akcencie i w świetle
   za treścią. Poziomy grup mają swoje barwy, ale jako podpis słowny,
   a nie kropka do zgadywania.

   Krój: Archivo ze zmienną osią szerokości. Jeden plik daje i plakat,
   i akapit - zwężony i ciężki na hasłach, w normalnej szerokości spokojny
   tekst do czytania. */

.t-taniec {
  /* Dwie zmienne, ktore w zrodle przychodzily z ukladu calej aplikacji.
     Tutaj strona jest sama dla siebie, wiec stoja na miejscu. */
  --font-taniec: 'Archivo Variable', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Noc prawie neutralna, z ledwie wyczuwalnym fioletem - kolor studia
     niesie akcent i światło za treścią, nie tło. Mocno fioletowe tło pod
     fioletowym akcentem zabiera mu całą siłę. */
  --c-noc: #0a090e;
  --c-noc-2: #121017;
  --c-noc-3: #1a1723;
  --c-noc-4: #232031;
  --c-biel: #f6f4f1;
  /* 0.66 na czerni daje 8.9 - podpisy czytają się bez wysiłku, a nadal
     stoją wyraźnie za tekstem głównym. */
  --c-szary: rgba(246, 244, 241, 0.66);
  --c-szary-2: rgba(246, 244, 241, 0.5);
  --c-linia: rgba(246, 244, 241, 0.09);
  --c-linia-2: rgba(246, 244, 241, 0.16);

  /* Fiolet o jasności, która czyta się i jako tekst na nocnym tle (5:1),
     i jako wypełnienie przycisku z ciemnym drukiem. */
  --c-akcent: #8b5cf6;
  --c-akcent-ink: #0a090e;
  --c-akcent-miekki: color-mix(in srgb, var(--c-akcent) 14%, transparent);

  --c-r: 28px;
  --c-r-sm: 18px;
  --c-sekcja: clamp(6rem, 13vw, 11rem);

  background: var(--c-noc);
  color: var(--c-biel);
  font-family: var(--font-taniec), "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.t-taniec ::selection {
  background: var(--c-akcent);
  color: var(--c-akcent-ink);
}

/* ─── Typografia ─── */

/**
 * Plakat. Szerokość 64 z 125, grubość 800: napis, który zajmuje pół
 * ekranu i nadal mieści się w nim cały. Interlinia poniżej jedności,
 * bo wersaliki nie mają dolnych wydłużeń i przy zwykłej wyglądałyby
 * jak trzy osobne napisy.
 */
.t-taniec .c-plakat {
  text-wrap: balance;
  font-weight: 800;
  font-variation-settings: "wdth" 64;
  text-transform: uppercase;
  /* 0,92 zamiast 0,84: polskie ogonki w ZAJĘCIA i SĄ schodziły przy ciaśniejszej
     interlinii na wiersz niżej. Wersaliki nie mają dolnych wydłużeń, ale ogonek
     i kreska nad literą już tak. */
  line-height: 0.92;
  letter-spacing: -0.005em;
}

.t-taniec .c-h1 {
  font-weight: 750;
  font-variation-settings: "wdth" 70;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0;
  text-wrap: balance;
}

/** Nagłówek zdaniem - zwykła szerokość, ciasne światło, jak u Apple. */
.t-taniec .c-h2 {
  font-weight: 650;
  font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.t-taniec .c-h3 {
  font-weight: 650;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.t-taniec .c-lead {
  font-size: clamp(1.125rem, 1.55vw, 1.35rem);
  line-height: 1.5;
  color: var(--c-szary);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.t-taniec .c-tekst {
  color: var(--c-szary);
  text-wrap: pretty;
}

.t-taniec .c-nad {
  font-size: 0.75rem;
  font-weight: 600;
  font-variation-settings: "wdth" 112;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-szary);
}

.t-taniec .c-nad-akcent {
  color: var(--c-akcent);
}

/** Cyfry w godzinach i cenach: wąskie i równe, jak na tablicy odjazdów. */
.t-taniec .c-cyfry {
  font-weight: 700;
  font-variation-settings: "wdth" 72;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.t-taniec .c-akcent {
  color: var(--c-akcent);
}

.t-taniec .c-szary {
  color: var(--c-szary);
}

/** Napis obrysowany - w wstążce na co drugim słowie. */
.t-taniec .c-obrys {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-szary-2);
}

/* ─── Sekcje ─── */

.t-taniec .c-sekcja {
  padding-block: var(--c-sekcja);
}

.t-taniec .c-sekcja-ciasna {
  padding-block: calc(var(--c-sekcja) * 0.6);
}

.t-taniec .c-linia-gora {
  border-top: 1px solid var(--c-linia);
}

/**
 * Pierwsza sekcja pod nagłówkiem podstrony.
 *
 * Nagłówek kończy się poświatą, a treść zaczynała się dokładnie na jej
 * krawędzi - karty kontaktu i filtry oferty wyglądały, jakby się do niego
 * przykleiły. Jedna klasa zamiast czterech różnych odstępów, bo to jest
 * ten sam moment na każdej podstronie.
 */
.t-taniec .c-po-tytule {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: var(--c-sekcja);
}

/* ─── Przyciski ─── */

.t-taniec .c-btn,
.t-taniec .c-btn-drugi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-size: 0.975rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    color 0.3s var(--ease),
    transform 0.2s var(--ease),
    box-shadow 0.3s var(--ease);
}

.t-taniec .c-btn {
  background: var(--c-akcent);
  color: var(--c-akcent-ink);
  box-shadow: 0 10px 40px -12px color-mix(in srgb, var(--c-akcent) 70%, transparent);
}

.t-taniec .c-btn-drugi {
  background: rgba(246, 244, 241, 0.06);
  color: var(--c-biel);
  box-shadow: inset 0 0 0 1px var(--c-linia-2);
}

.t-taniec .c-btn-maly {
  height: 2.5rem;
  padding: 0 1.1rem;
  font-size: 0.875rem;
}

.t-taniec .c-btn svg,
.t-taniec .c-link svg {
  transition: transform 0.3s var(--ease);
}

@media (hover: hover) {
  .t-taniec .c-btn:hover {
    box-shadow: 0 14px 50px -10px color-mix(in srgb, var(--c-akcent) 90%, transparent);
  }
  .t-taniec .c-btn-drugi:hover {
    background: rgba(246, 244, 241, 0.12);
  }
  .t-taniec .c-btn:hover svg,
  .t-taniec .c-btn-drugi:hover svg,
  .t-taniec .c-link:hover svg {
    transform: translateX(3px);
  }
}

.t-taniec .c-btn:active,
.t-taniec .c-btn-drugi:active {
  transform: scale(0.97);
}

/** Odnośnik w zdaniu: kolor studia i strzałka, jak „Dowiedz się więcej”. */
.t-taniec .c-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--c-akcent);
}

@media (hover: hover) {
  .t-taniec .c-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-thickness: 1px;
  }
}

.t-taniec :is(a, button):focus-visible {
  outline: 2px solid var(--c-akcent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ─── Pasek ─── */

.t-taniec .c-pasek {
  transition:
    background-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

/* Pełne tło, nie szkło: pod paskiem przewijają się nagłówki i zdjęcia,
   a rozmyte zostawiają za nazwą studia kolorową smugę. */
.t-taniec .c-pasek[data-przewiniety="true"] {
  background: var(--c-noc);
  box-shadow: 0 1px 0 var(--c-linia);
}

.t-taniec .c-znak {
  font-weight: 800;
  font-variation-settings: "wdth" 66;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
}

.t-taniec .c-nawigacja {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-szary);
  transition: color 0.25s var(--ease);
}

.t-taniec .c-nawigacja:hover,
.t-taniec .c-nawigacja[aria-current="page"] {
  color: var(--c-biel);
}

.t-taniec .c-nawigacja[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.55rem;
  height: 2px;
  border-radius: 2px;
  background: var(--c-akcent);
}

/* ─── Światło ─── */

/**
 * Poświata za nagłówkiem.
 *
 * Trzy rozlane plamy w kolorze studia, które powoli płyną - jak światło
 * reflektorów przesuwane nad sceną. Bez `filter: blur`: miękkość daje sam
 * gradient radialny, więc przeglądarka nie przelicza rozmycia w każdej
 * klatce i przewijanie zostaje płynne na słabszym telefonie.
 */
.t-taniec .c-swiatlo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.t-taniec .c-swiatlo::before,
.t-taniec .c-swiatlo::after,
.t-taniec .c-swiatlo > i {
  content: "";
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.t-taniec .c-swiatlo::before {
  width: 80vmax;
  height: 80vmax;
  right: -30vmax;
  top: -38vmax;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--c-akcent) 42%, transparent),
    transparent
  );
  animation: cPlyn1 22s ease-in-out infinite alternate;
}

.t-taniec .c-swiatlo::after {
  width: 60vmax;
  height: 60vmax;
  left: -24vmax;
  bottom: -34vmax;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, #c026d3 30%, transparent),
    transparent
  );
  animation: cPlyn2 26s ease-in-out infinite alternate;
}

.t-taniec .c-swiatlo > i {
  width: 44vmax;
  height: 44vmax;
  left: 38%;
  top: 30%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, #ff6a3d 18%, transparent),
    transparent
  );
  animation: cPlyn3 30s ease-in-out infinite alternate;
}

/* Ziarno - bez niego gradient na czerni tworzy pasy. */
.t-taniec .c-ziarno::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@keyframes cPlyn1 {
  to {
    transform: translate3d(-12vmax, 10vmax, 0) scale(1.1);
  }
}
@keyframes cPlyn2 {
  to {
    transform: translate3d(14vmax, -8vmax, 0) scale(1.15);
  }
}
@keyframes cPlyn3 {
  to {
    transform: translate3d(-18vmax, -6vmax, 0) scale(0.9);
  }
}

/* ─── Karty ─── */

.t-taniec .c-karta {
  position: relative;
  border-radius: var(--c-r);
  background: var(--c-noc-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px var(--c-linia);
  overflow: hidden;
}

/**
 * Karta na ostro.
 *
 * Zaokrąglenie jest dobre dla rzeczy, które mają wyglądać jak przedmiot:
 * zdjęcie, wpis, kafel z ofertą. Grafik przedmiotem nie jest - to tabela
 * godzin, a tabela na zaokrąglonych płytach wygląda miękko i nieporadnie.
 * Kolumny dni, poziomy i przełącznik dnia mają więc kąt prosty i to one
 * dają stronie ten kontrast, którego samo światło nie zrobi.
 */
.t-taniec .c-karta-ostra {
  border-radius: 0;
}

/** Karta, która prowadzi dalej - podnosi się pod kursorem. */
.t-taniec .c-karta-zywa {
  transition:
    transform 0.5s var(--ease),
    background-color 0.4s var(--ease);
}

@media (hover: hover) {
  .t-taniec .c-karta-zywa:hover {
    transform: translateY(-4px);
    background: var(--c-noc-3);
  }
}

/** Karta w kolorze studia: jedna na ekran, nie więcej. */
.t-taniec .c-karta-akcent {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, #ffffff 22%, transparent), transparent 55%),
    var(--c-akcent);
  color: var(--c-akcent-ink);
  box-shadow: none;
}

.t-taniec .c-karta-akcent .c-tekst,
.t-taniec .c-karta-akcent .c-nad {
  color: color-mix(in srgb, var(--c-akcent-ink) 78%, transparent);
}

/* ─── Spis stylów ─── */

/**
 * Oferta jako spis, nie jako czternaście kafelków.
 *
 * Czternaście jednakowych prostokątów obok siebie to katalog z hurtowni:
 * każdy krzyczy tak samo głośno, więc żaden nie mówi nic. Spis czyta się
 * z góry na dół, jak stronę w programie teatralnym - numer, nazwa, jedno
 * zdanie, godziny - i dopiero w nim widać, że tych grup jest naprawdę
 * czternaście.
 *
 * Trzyma go samo światło i włos linii. Żadnego pudełka, żadnego cienia
 * i żadnych kolorowych plakietek przy poziomie - kolor ma na tej stronie
 * jedno zadanie i nosi je nazwa studia.
 */
.t-taniec .c-rzad {
  position: relative;
  border-top: 1px solid var(--c-linia);
  transition: background-color 0.45s var(--ease);
}

.t-taniec .c-rzad:last-child {
  border-bottom: 1px solid var(--c-linia);
}

/* Kreska, która dorasta od lewej - jedyny ruch w całym spisie. */
.t-taniec .c-rzad::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  background: var(--c-akcent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}

@media (hover: hover) {
  .t-taniec .c-rzad:hover {
    background: color-mix(in srgb, var(--c-biel) 3.5%, transparent);
  }

  .t-taniec .c-rzad:hover::before {
    transform: scaleX(1);
  }

  .t-taniec .c-rzad:hover .c-indeks {
    color: var(--c-akcent);
  }
}

.t-taniec .c-indeks {
  font-variant-numeric: tabular-nums;
  font-variation-settings: "wdth" 74;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-szary-2);
  transition: color 0.35s var(--ease);
}

/* ─── Znaczniki ─── */

/*
 * Poziom grupy nie ma już własnej barwy.
 *
 * Zielona, żółta i różowa plakietka przy każdych zajęciach dawały
 * w grafiku trzy dodatkowe kolory na ekranie i to one rzucały się w oczy
 * jako pierwsze - przed godziną i przed nazwą. Poziom siedzi teraz tam,
 * gdzie jest potrzebny: w spisie stylów jako słowo i w szczegółach zajęć.
 */
.t-taniec .c-znacznik {
  display: inline-flex;
  align-items: center;
  height: 1.6rem;
  padding: 0 0.65rem;
  border-radius: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-szary);
  background: rgba(246, 244, 241, 0.07);
  white-space: nowrap;
}

/* ─── Wstążka ─── */

.t-taniec .c-wstazka {
  display: flex;
  width: max-content;
  animation: cWstazka 60s linear infinite;
}

@keyframes cWstazka {
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ─── Przełącznik dni ─── */

.t-taniec .c-dni {
  display: flex;
  gap: 0.35rem;
  padding: 0.35rem;
  border-radius: 0;
  background: var(--c-noc-2);
  box-shadow: inset 0 0 0 1px var(--c-linia);
  overflow-x: auto;
  scrollbar-width: none;
}

.t-taniec .c-dni::-webkit-scrollbar {
  display: none;
}

.t-taniec .c-dzien {
  flex: 1 0 auto;
  min-width: 3.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border-radius: 0;
  color: var(--c-szary);
  transition:
    background-color 0.3s var(--ease),
    color 0.3s var(--ease);
}

.t-taniec .c-dzien[aria-selected="true"] {
  background: var(--c-biel);
  color: var(--c-noc);
}

@media (hover: hover) {
  .t-taniec .c-dzien:hover:not([aria-selected="true"]) {
    color: var(--c-biel);
    background: rgba(246, 244, 241, 0.06);
  }
}

/* ─── Kalendarz grafiku ─── */

/**
 * Godzina jako miejsce, nie jako napis.
 *
 * Oś po lewej, dni w kolumnach, blok wysoki na tyle, ile trwają zajęcia.
 * Dzięki temu w sekundę widać wolny wieczór i to, że dwie rzeczy, na które
 * ktoś chciał chodzić, zaczynają się o tej samej porze - czego lista pod
 * sobą nie powie nigdy.
 *
 * Bloki są jednym odcieniem jaśniejsze od tła i nie mają koloru. Kolorem
 * na tej stronie jest magenta i ma znaczyć jedną rzecz naraz; czternaście
 * kolorowych prostokątów obok siebie nie znaczy nic.
 */
.t-taniec .c-kal {
  --c-kal-os: 3.9rem;
  display: grid;
  border-top: 1px solid var(--c-linia);
}

@media (min-width: 1024px) {
  .t-taniec .c-kal {
    --c-kal-os: 4.6rem;
  }
}

.t-taniec .c-kal-rog,
.t-taniec .c-kal-glowa {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--c-linia);
}

.t-taniec .c-kal-glowa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.9rem;
  border-left: 1px solid var(--c-linia);
}

.t-taniec .c-kal-dzis {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-akcent);
}

/* Bez rzędu z nazwami dni pierwsza godzina stałaby połową wiersza nad
   krawędzią kalendarza - stąd odrobina miejsca u góry. */
.t-taniec .c-kal-solo {
  padding-top: 0.6rem;
}

.t-taniec .c-kal-os {
  position: relative;
}

/* Godzina siedzi na swojej linii, nie pod nią. */
.t-taniec .c-kal-godzina {
  position: absolute;
  right: 0.75rem;
  transform: translateY(-0.55em);
  font-size: 0.72rem;
  color: var(--c-szary-2);
}

.t-taniec .c-kal-kolumna {
  position: relative;
  border-left: 1px solid var(--c-linia);
}

.t-taniec .c-kal-linia {
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: var(--c-linia);
}

.t-taniec .c-kal-blok {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  overflow: hidden;
  padding: 0.5rem 0.65rem;
  text-align: left;
  background: var(--c-noc-3);
  box-shadow: inset 1px 0 0 var(--c-linia-2);
  transition:
    background-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease);
}

@media (hover: hover) {
  .t-taniec .c-kal-blok:hover {
    background: var(--c-noc-4);
    box-shadow: inset 2px 0 0 var(--c-akcent);
  }
}

.t-taniec .c-kal-blok[data-odwolane="true"] {
  opacity: 0.45;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.t-taniec .c-kal-czas {
  font-size: 0.72rem;
  color: var(--c-szary);
}

/* Długa nazwa w wąskim bloku urywa się wielokropkiem, a nie w pół litery -
   pełną widać w szczegółach. */
.t-taniec .c-kal-nazwa {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.25;
}

.t-taniec .c-kal-blok[data-waski="true"] .c-kal-nazwa {
  font-size: 0.78rem;
}

.t-taniec .c-kal-kto {
  margin-top: auto;
  font-size: 0.72rem;
  color: var(--c-szary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Okno szczegółów ─── */

.t-taniec .c-okno {
  background: var(--c-noc-2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px var(--c-linia-2);
  animation: c-okno-wjazd 0.32s var(--ease) backwards;
}

@keyframes c-okno-wjazd {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.t-taniec .c-okno-wiersz {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--c-linia);
}

/* ─── Filtry ─── */

.t-taniec .c-filtr {
  height: 2.5rem;
  padding: 0 1.1rem;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-szary);
  box-shadow: inset 0 0 0 1px var(--c-linia-2);
  white-space: nowrap;
  transition:
    background-color 0.3s var(--ease),
    color 0.3s var(--ease),
    box-shadow 0.3s var(--ease);
}

.t-taniec .c-filtr[aria-pressed="true"] {
  background: var(--c-biel);
  color: var(--c-noc);
  box-shadow: none;
}

@media (hover: hover) {
  .t-taniec .c-filtr:hover:not([aria-pressed="true"]) {
    color: var(--c-biel);
    box-shadow: inset 0 0 0 1px var(--c-szary-2);
  }
}

/* ─── Pytania ─── */

.t-taniec .c-pytanie {
  border-top: 1px solid var(--c-linia);
}

.t-taniec .c-pytanie:last-child {
  border-bottom: 1px solid var(--c-linia);
}

.t-taniec .c-pytanie summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.t-taniec .c-pytanie summary::-webkit-details-marker {
  display: none;
}

.t-taniec .c-pytanie summary svg {
  flex-shrink: 0;
  transition: transform 0.35s var(--ease);
}

.t-taniec .c-pytanie[open] summary svg {
  transform: rotate(45deg);
}

/* ─── Zdjęcia ─── */

.t-taniec .c-kadr {
  position: relative;
  overflow: hidden;
  background: var(--c-noc-3);
}

.t-taniec .c-kadr img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 1.2s var(--ease),
    opacity 0.8s var(--ease);
}

.t-taniec .c-kadr img[data-wczytane="false"] {
  opacity: 0;
}

@media (hover: hover) {
  .t-taniec .c-kadr-zywy:hover img {
    transform: scale(1.035);
  }
}

/** Plansza zamiast zdjęcia: wpis bez kadru ma swoją grafikę z liter. */
.t-taniec .c-plansza {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 85% 10%, color-mix(in srgb, var(--c-akcent) 38%, transparent), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, #c026d3 26%, transparent), transparent 60%),
    var(--c-noc-3);
}

/* ─── Podgląd na pełny ekran ─── */

.t-taniec .c-lightbox {
  animation: cWjazd 0.35s var(--ease) both;
}

.t-taniec .c-lightbox img {
  animation: cPowieksz 0.5s var(--ease) both;
}

@keyframes cWjazd {
  from {
    opacity: 0;
  }
}

@keyframes cPowieksz {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

/* ─── Stopka ─── */

.t-taniec .c-stopka-znak {
  font-weight: 800;
  font-variation-settings: "wdth" 62;
  text-transform: uppercase;
  line-height: 0.78;
  letter-spacing: -0.01em;
  font-size: clamp(5rem, 27vw, 26rem);
  color: transparent;
  background: linear-gradient(
    180deg,
    rgba(246, 244, 241, 0.16),
    rgba(246, 244, 241, 0.02) 85%
  );
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}

.t-taniec .c-stopka a {
  color: var(--c-szary);
  transition: color 0.25s var(--ease);
}

.t-taniec .c-stopka a:hover {
  color: var(--c-biel);
}

/* ─── Ruch ─── */

@media (prefers-reduced-motion: reduce) {
  .t-taniec .c-swiatlo::before,
  .t-taniec .c-swiatlo::after,
  .t-taniec .c-swiatlo > i,
  .t-taniec .c-wstazka {
    animation: none;
  }
}
/* ═══════════════════════════════════════════════════════════
   Studio Tańca NR - układ
   ═══════════════════════════════════════════════════════════

   [taniec.css] trzyma charakter strony: kolor, krój, karty, przyciski,
   światło. Ten plik trzyma wyłącznie rozstawienie - siatki, odstępy
   i punkty załamania. Podział jest celowy: charakteru dotyka się rzadko
   i ostrożnie, a układ poprawia się przy każdym nowym ekranie.
   ═══════════════════════════════════════════════════════════ */

.t-taniec-korzen {
  background: #0a090e;
  color-scheme: dark;
}

/* Arkusz aplikacji nadaje krój nagłówkom wprost (h1-h6), a reguła dla
   elementu bije dziedziczenie po klasie - przez to plakaty na tej stronie
   leciały krojem tekstowym zamiast Archivo. Jedna rodzina na całej stronie
   jest tu założeniem projektu, więc wymuszamy dziedziczenie wszędzie. */
.t-taniec,
.t-taniec * {
  font-family: var(--font-taniec), 'Helvetica Neue', Arial, sans-serif;
}

/* Przeglądarka wcina <dd> o czterdzieści pikseli - w liczbach i godzinach
   wyglądało to jak przypadkowe przesunięcie podpisu względem wartości. */
/* :where zamiast :is - reset nie moze miec wyzszej wagi niz klasy sekcji,
   inaczej zjada im odstepy (lista pod karta godzin kleila sie do niej). */
.t-taniec :where(dl, dd, ol, ul, figure) {
  margin: 0;
  padding: 0;
}

.t-taniec :where(ul, ol) {
  list-style: none;
}

.t-taniec {
  --t-margines: clamp(1.25rem, 4vw, 3.5rem);
  --t-szer: 1440px;
  min-height: 100dvh;
}

.t-kontener {
  width: min(var(--t-szer), 100%);
  margin-inline: auto;
  padding-inline: var(--t-margines);
}

/* Kotwica z menu ma zatrzymać sekcję pod paskiem, nie za nim. */
.t-kotwica {
  scroll-margin-top: 5.5rem;
}

.t-pomin {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--c-akcent);
  color: var(--c-akcent-ink);
  border-radius: 0 0 8px 0;
  font-weight: 600;
}

.t-pomin:focus {
  left: 0;
}

/* ─── Pasek ─── */

.t-pasek {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
}

.t-pasek__wnetrze {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  height: 4.5rem;
}

.t-pasek__znak {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  margin-right: auto;
}

.t-pasek__menu {
  display: none;
  gap: clamp(1.1rem, 2.4vw, 2.2rem);
}

.t-pasek__cta {
  flex-shrink: 0;
}

@media (min-width: 62rem) {
  .t-pasek__menu { display: flex; }
}

/* ─── Otwarcie ─── */

.t-czolo {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
}

.t-czolo .c-swiatlo { z-index: -1; }

.t-czolo__wnetrze {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: clamp(6rem, 11vh, 7.5rem);
  padding-bottom: clamp(1.75rem, 4vh, 3rem);
}

.t-czolo__sezon {
  align-self: flex-start;
  gap: 0.65rem;
  padding-left: 0.4rem;
}

.t-czolo__plakietka {
  background: var(--c-akcent);
  color: var(--c-akcent-ink);
  border-radius: 999px;
  padding: 0.25rem 0.65rem;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.t-czolo__srodek {
  margin-block: auto;
  padding-block: clamp(1rem, 3vh, 3rem);
}

.t-czolo__plakat {
  /* Dwa wiersze plakatu plus zdanie i przyciski musza zmiescic sie w jednym
     ekranie - stad ograniczenie wysokoscia okna, nie tylko szerokoscia. */
  font-size: clamp(3.4rem, min(15.5vw, 24svh), 14rem);
}

.t-czolo__dol {
  display: grid;
  gap: 2.5rem;
  align-items: end;
}

.t-czolo__lead {
  max-width: 36ch;
  color: var(--c-biel);
}

.t-czolo__guziki {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.t-czolo__karta {
  padding: 1.5rem;
  background: rgba(26, 23, 35, 0.55);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.t-czolo__godzina {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: 1rem;
}

.t-czolo__godzina .c-cyfry {
  font-size: 2.75rem;
  line-height: 1;
}

.t-czolo__co { min-width: 0; }

.t-czolo__nazwa,
.t-czolo__kto {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t-czolo__nazwa { font-size: 15px; font-weight: 600; }
.t-czolo__kto { font-size: 13px; }

@media (min-width: 62rem) {
  .t-czolo__dol {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 4rem;
  }
}

/* ─── Wstążka ─── */

.t-wstazka-pas {
  overflow: hidden;
  border-block: 1px solid var(--c-linia);
  padding-block: clamp(1.5rem, 3vw, 2rem);
}

.t-wstazka__slowo {
  white-space: nowrap;
  padding-inline: clamp(1.25rem, 3vw, 2rem);
  font-size: clamp(3rem, 7vw, 6rem);
}

/* ─── Nagłówek sekcji ─── */

.t-naglowek {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 62rem) {
  .t-naglowek {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
    gap: 3rem;
  }
}

/* ─── Dla kogo ─── */

.t-kafle {
  display: grid;
  gap: 1rem;
  margin-top: 3.5rem;
}

.t-kafel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 16rem;
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.t-kafel--duzy { min-height: 24rem; }

.t-kafel__poswiata {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    80% 60% at 100% 0%,
    color-mix(in srgb, var(--c-akcent) 22%, transparent),
    transparent 65%
  );
}

.t-kafel > * { position: relative; }

.t-kafel__tytul {
  margin-top: 1rem;
  font-size: clamp(2.4rem, 3.4vw, 3.2rem);
}

.t-kafel__tytul--duzy { font-size: clamp(3.25rem, 6vw, 5.5rem); }

.t-kafel__style {
  margin-top: auto;
  padding-top: 2.5rem;
  line-height: 1.65;
  font-size: 15px;
}

.t-kafel--duzy .t-kafel__style { font-size: 1.15rem; }

.t-kafel__link {
  margin-top: 1.25rem;
  font-size: 14px;
}

.t-kafel--darmo__cena {
  margin-top: auto;
  font-size: clamp(4rem, 9vw, 6.5rem);
}

.t-kafel--darmo__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 15px;
  font-weight: 600;
}

@media (min-width: 62rem) {
  .t-kafle {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .t-kafle__duzy { grid-column: span 7; grid-row: span 2; }
  .t-kafle__a,
  .t-kafle__b { grid-column: span 5; }
  .t-kafle__c { grid-column: span 8; }
  .t-kafle__d { grid-column: span 4; }
  .t-kafel--duzy { min-height: 34rem; }
}

/* ─── Zdanie i liczby ─── */

.t-zdanie__tytul {
  max-width: 16ch;
  margin-inline: auto;
  text-align: center;
  font-size: clamp(2.6rem, 6.4vw, 5.75rem);
}

.t-zdanie__lead {
  max-width: 44ch;
  margin: 1.75rem auto 0;
  text-align: center;
}

.t-liczby {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem 1.5rem;
  margin-top: 5rem;
}

.t-liczby__ile { font-size: clamp(4rem, 8vw, 6.5rem); }
.t-liczby__co { margin-top: 0.75rem; font-size: 15px; }

@media (min-width: 62rem) {
  .t-liczby { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─── Grafik ─── */

.t-grafik { display: grid; gap: 3rem; }

.t-grafik__lead { margin-top: 1.25rem; max-width: 30ch; }
.t-grafik__nota { margin-top: 2rem; max-width: 34ch; font-size: 14.5px; line-height: 1.65; }

.t-dzien__nazwa { font-size: 13px; font-weight: 600; }
.t-dzien__ile { font-size: 1.05rem; margin-top: 0.15rem; }

.t-zajecia { margin-top: 2rem; }

.t-zajecie {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding-block: 1.1rem;
}

.t-zajecie__godz { font-size: 1.2rem; }
.t-zajecie__nazwa { display: block; font-size: 15px; font-weight: 600; }
.t-zajecie__kto { display: block; font-size: 13px; margin-top: 0.15rem; }
.t-zajecie__czas { font-size: 13px; }

@media (min-width: 62rem) {
  .t-grafik {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 4rem;
  }
}

/* ─── Style ─── */

.t-style { margin-top: 3.5rem; }

.t-styl {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.5rem 1.25rem;
  padding-block: 1.75rem;
}

.t-styl__nr { font-size: 14px; padding-top: 0.35rem; }
.t-styl__opis { margin-top: 0.6rem; max-width: 62ch; font-size: 15px; line-height: 1.65; }

.t-styl__meta {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1rem;
  margin-top: 0.85rem;
}

.t-styl__poziomy { font-size: 13px; }

@media (min-width: 62rem) {
  .t-styl {
    grid-template-columns: 3.5rem minmax(0, 7fr) minmax(0, 3fr);
    align-items: start;
    gap: 2rem;
  }
  .t-styl__meta {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    margin-top: 0.35rem;
  }
}

/* ─── Cennik ─── */

.t-cennik {
  display: grid;
  gap: 1rem;
  margin-top: 3.5rem;
}

.t-cena { padding: clamp(1.5rem, 2.6vw, 2rem); }
.t-cena__kwota { margin-top: 1rem; font-size: clamp(2.6rem, 4vw, 3.4rem); }
.t-cena__nota { margin-top: 0.6rem; font-size: 14px; }

.t-cennik__nota {
  margin-top: 2.5rem;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.65;
}

@media (min-width: 40rem) {
  .t-cennik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .t-cennik { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ─── Sezon ─── */

.t-sezon { display: grid; gap: 3rem; }

.t-sezon__tytul { margin-top: 1rem; }

.t-sezon__spis { margin-top: 2.5rem; }

.t-sezon__punkt {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--c-linia);
  font-size: 15px;
}

.t-sezon__data { font-weight: 600; }

@media (min-width: 62rem) {
  .t-sezon {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 5rem;
  }
}

/* ─── Zespół ─── */

.t-zespol {
  display: grid;
  gap: 1rem;
  margin-top: 3.5rem;
}

.t-osoba {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.t-osoba__plansza {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 16 / 10;
  padding: 1.75rem;
}

.t-osoba__inicjaly {
  font-size: 7rem;
  line-height: 0.75;
  color: color-mix(in srgb, var(--c-biel) 88%, transparent);
}

.t-osoba__slowo { padding: 1.75rem; }
.t-osoba__imie { font-size: 1.2rem; font-weight: 600; letter-spacing: -0.015em; }
.t-osoba__rola { margin-top: 0.25rem; font-size: 14px; }
.t-osoba__bio { margin-top: 1rem; font-size: 14.5px; line-height: 1.65; }

@media (min-width: 40rem) {
  .t-zespol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .t-zespol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ─── Kontakt ─── */

.t-kontakt {
  display: grid;
  gap: 1rem;
  margin-top: 3.5rem;
}

.t-kontakt__karta { padding: 1.75rem; }
.t-kontakt__tytul { margin-top: 1rem; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; }
.t-kontakt__pod { margin-top: 0.35rem; font-size: 14px; }

.t-kontakt__godziny { padding: 1.75rem; }

.t-godziny { margin-top: 1.25rem; display: grid; gap: 0.75rem; font-size: 15px; }
.t-godziny > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
/* Godzina ma zostac w jednej linii - "16:00 -" i "21:00" pod soba czytalo sie
   jak dwie rozne wartosci. */
.t-godziny dd { white-space: nowrap; }
.t-godziny .c-cyfry { font-size: 17px; }

.t-drobiazgi {
  display: grid;
  gap: 2.5rem;
  margin-top: 5rem;
}

.t-drobiazgi__tytul { font-size: 16px; font-weight: 600; margin-bottom: 0.5rem; }
.t-drobiazgi .c-tekst { font-size: 14.5px; line-height: 1.65; }

@media (min-width: 40rem) {
  .t-kontakt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-drobiazgi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .t-kontakt { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ─── Pytania ─── */

.t-pytania { display: grid; gap: 2.5rem; }

.t-pytania__plus {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.35s var(--ease);
}

.c-pytanie[open] .t-pytania__plus { transform: rotate(45deg); }

.t-pytania__odp {
  margin-top: -0.5rem;
  max-width: 62ch;
  padding-bottom: 1.75rem;
  font-size: 16px;
  line-height: 1.65;
}

@media (min-width: 62rem) {
  .t-pytania {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 3rem;
  }
}

/* ─── Zachęta ─── */

.t-zacheta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--c-linia);
}

.t-zacheta .c-swiatlo { z-index: -1; }

.t-zacheta__wnetrze {
  padding-block: clamp(7rem, 16vw, 13rem);
  text-align: center;
}

.t-zacheta__tytul { font-size: clamp(3.4rem, 12vw, 11rem); }

.t-zacheta__lead {
  max-width: 40ch;
  margin: 2rem auto 0;
}

.t-zacheta__guziki {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

/* ─── Stopka ─── */

.t-stopka {
  overflow: hidden;
  border-top: 1px solid var(--c-linia);
  padding-top: 5rem;
}

.t-stopka__siatka {
  display: grid;
  gap: 3rem;
}

.t-stopka__znak { font-size: 1.15rem; }
.t-stopka__opis { margin-top: 1rem; max-width: 34ch; font-size: 14.5px; line-height: 1.65; }

.t-stopka__linki {
  margin-top: 1.25rem;
  display: grid;
  gap: 0.65rem;
  font-size: 15px;
}

.t-stopka .c-stopka-znak {
  margin-top: 4rem;
  text-align: center;
  white-space: nowrap;
}

@media (min-width: 40rem) {
  .t-stopka__siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .t-stopka__siatka {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr);
    gap: 4rem;
  }
}

/* ─── Zdjęcia w kaflach ─── */

/* Kadr leży pod treścią kafla. Zasłona od dołu jest tu warunkiem
   czytelności, nie ozdobą: bez niej spis stylów siada na jasnych
   fragmentach zdjęcia i znika. */
.t-kafel__kadr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  transition: transform 0.7s var(--ease), opacity 0.5s var(--ease);
}

.t-kafel__zaslona {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c-noc) 35%, transparent) 0%,
    color-mix(in srgb, var(--c-noc) 72%, transparent) 55%,
    color-mix(in srgb, var(--c-noc) 94%, transparent) 100%
  );
}

@media (hover: hover) {
  .t-kafel:hover .t-kafel__kadr {
    transform: scale(1.04);
    opacity: 0.55;
  }
}

.t-kafel--darmo .t-kafel__zaslona { display: none; }

/* ─── Galeria ─── */

.t-galeria {
  display: grid;
  gap: 1rem;
  margin-top: 3.5rem;
}

.t-galeria figure {
  margin: 0;
  overflow: hidden;
}

.t-galeria img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

@media (hover: hover) {
  .t-galeria figure:hover img { transform: scale(1.04); }
}

.t-galeria__duze { aspect-ratio: 16 / 9; }
.t-galeria__male { aspect-ratio: 4 / 3; }

@media (min-width: 40rem) {
  .t-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-galeria__duze { grid-column: span 2; }
}

@media (min-width: 62rem) {
  .t-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-galeria__duze { grid-column: span 3; aspect-ratio: 21 / 9; }
}

/* ─── Kadr pod wezwaniem ─── */

.t-zacheta__kadr {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

/* Zaciemnienie nad kadrem: plakat na wezwaniu jest najjaśniejszym napisem
   na stronie i nie może konkurować ze zdjęciem pod spodem. */
.t-zacheta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(75% 65% at 50% 50%, color-mix(in srgb, var(--c-noc) 55%, transparent), color-mix(in srgb, var(--c-noc) 85%, transparent) 75%);
}

/* ─── Przycisk, który się dopomina ─── */

/* Powolne tętno poświaty pod głównym wezwaniem. Sam cień, bez ruchu bryły -
   skaczący przycisk czyta się jak reklama, a nie jak zaproszenie. */
@keyframes tTetno {
  0%, 100% { box-shadow: 0 10px 40px -12px color-mix(in srgb, var(--c-akcent) 70%, transparent); }
  50% { box-shadow: 0 14px 54px -10px color-mix(in srgb, var(--c-akcent) 100%, transparent); }
}

.t-btn-zywy { animation: tTetno 3.4s var(--ease) infinite; }

@media (prefers-reduced-motion: reduce) {
  .t-btn-zywy { animation: none; }
}

/* ─── Umów pierwsze zajęcia ─── */

.t-umow { display: grid; gap: 3rem; }

.t-umow__tytul { margin-top: 1rem; }
.t-umow__lead { margin-top: 1.5rem; max-width: 40ch; }
.t-umow__nota { margin-top: 2rem; font-size: 15px; }

.t-umow__karta { padding: clamp(1.5rem, 3vw, 2.5rem); }

.t-formularz {
  display: grid;
  gap: 1.25rem;
}

.t-pole { display: grid; gap: 0.5rem; margin: 0; }
.t-pole__opcja { font-size: 13px; font-weight: 400; }

.t-pole label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.t-pole :is(input, select, textarea) {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 0;
  border-radius: 0;
  background: var(--c-noc);
  color: var(--c-biel);
  font: inherit;
  font-size: 15px;
  box-shadow: inset 0 0 0 1px var(--c-linia-2);
  transition: box-shadow 0.3s var(--ease);
}

.t-pole textarea { resize: vertical; min-height: 5.5rem; }

.t-pole :is(input, select, textarea):focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--c-akcent);
}

.t-pole :is(input, textarea)::placeholder { color: var(--c-szary-2); }

.t-formularz__blad {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 14px;
  color: var(--c-biel);
  background: color-mix(in srgb, #ff5470 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #ff5470 45%, transparent);
}

.t-formularz__wyslij {
  justify-self: start;
  margin-top: 0.25rem;
  border: 0;
  cursor: pointer;
}

.t-formularz__wyslij:disabled { opacity: 0.6; cursor: default; }

.t-formularz__drobne { margin: 0; font-size: 13px; line-height: 1.6; }

.t-umow__gotowe { display: grid; gap: 1rem; justify-items: start; }
.t-umow__gotowe-opis { max-width: 46ch; font-size: 15px; line-height: 1.65; }
.t-umow__gotowe button { border: 0; cursor: pointer; }

@media (min-width: 40rem) {
  .t-formularz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-pole--szerokie,
  .t-formularz__blad,
  .t-formularz__drobne { grid-column: 1 / -1; }
}

@media (min-width: 62rem) {
  .t-umow {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }
}
.t-cena__link { margin-top: 1.25rem; font-size: 14px; }
.t-kontakt.t-kontakt--sam { grid-template-columns: minmax(0, 26rem); }

/* ─── Jedna obróbka dla wszystkich zdjęć ─── */

/* Kadry z zajęć, praktyk i pokazów - z różnych dni i różnego światła.
   Lekko przygaszone i schłodzone, żeby stały obok siebie jak jedna seria,
   ale dalej wyglądały jak zdjęcia z sali, a nie jak grafika. Ziarno
   (c-ziarno) zabiera im fabryczną gładkość. */
.t-kafel__kadr,
.t-galeria img,
.t-zacheta__kadr {
  filter: saturate(0.82) contrast(1.05) brightness(0.9);
}

.t-galeria figure::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Winieta: krawędzie w czerń strony, światło w środku kadru. */
  background: radial-gradient(120% 90% at 50% 45%, transparent 45%, color-mix(in srgb, var(--c-noc) 70%, transparent) 100%);
}

.t-galeria figure.c-ziarno::after { z-index: 2; }