/*
 * Powłoka podstron W1 (inc/Powloka.php): nagłówek strony głównej (stały, .hdr z pliku frontu), główka strony (H1 i wiersz
 * z datą – docelowy wygląd i miejsce od pierwszej klatki; React tej części nie rysuje), okruszki, kasa (S0) i stopka.
 * Paleta i kroje jak na stronie głównej (tresc.css: --tg-*). Spokojnie: bez animacji wejścia treści.
 */

/* Marginesy strony jak na stronie głównej (podstrona.css zeruje poziome wcięcie .tg-tresc w .tg-strona). */
.tg-powloka main.tg-strona {
  padding-right: max(var(--tg-pad), env(safe-area-inset-right));
  padding-left: max(var(--tg-pad), env(safe-area-inset-left));
}

/* Nagłówek frontu jest stały (position: fixed) – treść zaczyna się pod nim; bez frontu nagłówek motywu stoi w treści. */
.tg-powloka--front main.tg-strona {
  padding-top: calc(var(--header-h, 64px) + env(safe-area-inset-top) + clamp(20px, 4vh, 48px));
}

/* Pasek administratora (zalogowani) nad nagłówkiem. */
.admin-bar .hdr {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* Stopka serwera (zanim przejmie ją React) – bez wysokości całego ekranu z .tg-tresc. */
#tg-stopka.tg-tresc {
  min-height: 0;
}

/* Z JavaScriptem (klasa tg-wyspy z <head> – Powloka::poczatek) stopka serwera czeka niewidoczna na stopkę v8 z wyspy
   (przejęcie zdejmuje klasę tg-tresc--stopka), więc na krótkich stronach nie mignie inna stopka. Gdyby front nie
   wystartował – po 4 s się pokazuje. Bez JavaScriptu – widoczna od razu. */
.tg-wyspy #tg-stopka.tg-tresc--stopka {
  visibility: hidden;
  animation: tg-stopka-zapas 0s linear 4s forwards;
}

@keyframes tg-stopka-zapas {
  to {
    visibility: visible;
  }
}

/* Okruszki: „Strona główna › Soboty › One Last Night, 6.02.2027”. */
.tg-okruszki {
  margin: 0 0 clamp(14px, 2vh, 22px);
  font-family: var(--tg-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--tg-fg-2);
}

.tg-okruszki ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tg-okruszki li + li::before {
  content: '›';
  margin: 0 0.6em;
  color: var(--tg-linia-2);
}

.tg-okruszki a {
  text-decoration: none;
}

.tg-okruszki a:hover {
  text-decoration: underline;
}

/* Główka strony (#tg-glowka): H1 i wiersz z datą. Te same wymiary w każdej wersji – React ich nie dotyka. */
.tg-glowka {
  margin: 0 0 clamp(24px, 4vh, 40px);
}

.tg-glowka__tytul {
  max-width: 22em;
  margin: 0;
  font-family: var(--tg-display);
  font-size: clamp(34px, 5.4vw, 72px);
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1.02;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
}

.tg-glowka__kiedy {
  margin: clamp(10px, 1.6vh, 16px) 0 0;
  font-family: var(--tg-mono);
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: 0.04em;
  color: var(--tg-fg-2);
}

/* Strona nocy (S0 – N dopracowuje). */
.tg-noc-strona__podtytul {
  margin: -12px 0 24px;
  color: var(--tg-fg-2);
}

.tg-noc-strona__plakat {
  max-width: 420px;
  margin: 0 0 clamp(24px, 4vh, 40px);
}

.tg-noc-strona__plakat img {
  display: block;
  width: 100%;
  height: auto;
}

.tg-noc-strona__opis,
.tg-noc-strona__dane,
.tg-hub__tresc,
.tg-hub__ostatnie,
.tg-kasa {
  margin: 0 0 clamp(32px, 5vh, 56px);
}

.tg-noc-strona__opis > :where(p, ul, ol) {
  max-width: 72ch;
  margin: 0 0 1em;
}

.tg-fakty {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px 24px;
  margin: 0;
}

.tg-fakty dt {
  font-family: var(--tg-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tg-fg-2);
}

.tg-fakty dd {
  margin: 4px 0 0;
}

/* Kasa (S0: formularz wtyczki, jeden naraz). */
.tg-kasa__stan {
  max-width: 72ch;
  margin: 0;
}

.tg-kasa__czesc {
  scroll-margin-top: calc(var(--header-h, 64px) + 16px);
}

.tg-kasa__czesc + .tg-kasa__czesc {
  margin-top: 16px;
}

.tg-hub__ostatnie ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tg-hub__ostatnie li + li {
  margin-top: 8px;
}

.tg-program__wstep {
  max-width: 72ch;
  margin: 0 0 clamp(24px, 4vh, 40px);
  color: var(--tg-fg-2);
}

.tg-program__dalej {
  margin: clamp(24px, 4vh, 40px) 0 0;
}