/* ==========================================================================
   palace-glass.css — REFAKTOR 2026-07-23
   Warstwowe szkło pałacowe. Ładowany PO palace-rebrand.css (nadpisuje).

   Zasady:
   1) Panel = półprzezroczyste TYLKO tło + mocny blur. Tekst / oś / wykres
      pozostają nieprzezroczyste (czytelność).
   2) Element wiszący NAD panelem (status, audio, legenda)
      dostaje WŁASNY, słabszy blur → warstwy się nakładają = głębia.
   3) Podstrony: sekcje .long-read / nagłówki / karty = to samo szkło;
      elementy wewnętrzne = słabszy blur warstwy 2.
   4) Kontrast: tekst na szkle zawsze ciemny brąz (#2c1d15 / #46321f / #5d4732).
   ========================================================================== */

/* --- tokeny szkła (prefiks pg-, żeby nie kolidować z palace-theme) --- */
:root {
  --pg-glass:        rgba(251, 246, 238, 0.42);  /* panel główny */
  --pg-glass-soft:   rgba(251, 246, 238, 0.24);  /* tło pod wykresem */
  --pg-glass-strong: rgba(255, 252, 247, 0.62);  /* warstwa 2: tile, karty */
  --pg-glass-pill:   rgba(255, 252, 247, 0.55);  /* pigułki: status, audio */
  --pg-border:       rgba(176, 141, 79, 0.28);
  --pg-border-soft:  rgba(122, 74, 58, 0.15);
  --pg-ink:          #2c1d15;  /* nagłówki na szkle */
  --pg-ink-body:     #46321f;  /* tekst główny */
  --pg-ink-muted:    #5d4732;  /* tekst drugorzędny (wcześniej za jasny) */
  --pg-blur:         blur(16px) saturate(145%);
  --pg-blur-soft:    blur(9px) saturate(130%);
}

/* ==========================================================================
   A. STRONA GŁÓWNA — panele: przezroczyste TYLKO w tle
   ========================================================================== */
.home-page .iz-live-intro,
.home-page .iz-stream-panel {
  background: var(--pg-glass);
  -webkit-backdrop-filter: var(--pg-blur);
  backdrop-filter: var(--pg-blur);
  border: 1px solid var(--pg-border);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(58, 40, 32, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

/* Tło pod wykresem — najlżejsze szkło (canvas sam w sobie przezroczysty) */
.home-page .iz-stream-canvas-wrap {
  background: var(--pg-glass-soft);
  border: 1px solid var(--pg-border-soft);
  border-radius: 14px;
}
.home-page .iz-stream-canvas-wrap canvas { background: transparent; }
.home-page .iz-stream-yaxis { color: var(--pg-ink-muted); font-weight: 700; }

/* ==========================================================================
   B. TILES ODCZYTÓW — podbity kontrast czcionki (było za jasne)
   ========================================================================== */
.home-page .iz-stream-readouts { gap: 0.6rem; }
.home-page .iz-stream-readouts .iz-readout:last-child {
  grid-column: 1 / -1;
}
.home-page .iz-readout {
  background: var(--pg-glass-strong);
  -webkit-backdrop-filter: var(--pg-blur-soft);
  backdrop-filter: var(--pg-blur-soft);
  border: 1px solid var(--pg-border-soft);
  border-radius: 12px;
  padding: 0.55rem 0.75rem;
  box-shadow: 0 3px 10px rgba(58, 40, 32, 0.05);
}
.home-page .iz-readout-label {
  color: var(--pg-ink-muted);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.home-page .iz-readout-value {
  color: var(--pg-ink);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}
.home-page .iz-readout-value-small {
  color: var(--pg-ink-body);
  font-weight: 800;
  font-size: 0.82rem;
  line-height: 1.25;
}

/* ==========================================================================
   C. WARSTWA 2 — elementy wiszące NAD panelami (własny blur → głębia)
   ========================================================================== */
.home-page .iz-stream-status {
  background: var(--pg-glass-pill);
  -webkit-backdrop-filter: var(--pg-blur-soft);
  backdrop-filter: var(--pg-blur-soft);
  border: 1px solid var(--pg-border);
  border-radius: 999px;
  padding: 0.5rem 1rem;
}
.home-page #live-status-text { color: var(--pg-ink-body); font-weight: 700; }
.home-page .live-time {
  color: var(--pg-ink-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.home-page .iz-btn-audio {
  background: var(--pg-glass-pill);
  -webkit-backdrop-filter: var(--pg-blur-soft);
  backdrop-filter: var(--pg-blur-soft);
  border: 1px solid var(--pg-border);
  border-radius: 999px;
  color: var(--pg-ink);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.86rem;
  padding: 0.6rem 1.15rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(58, 40, 32, 0.08);
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.home-page .iz-btn-audio:hover {
  transform: translateY(-2px);
  background: var(--pg-glass-strong);
  border-color: rgba(176, 141, 79, 0.45);
  box-shadow: 0 8px 20px rgba(58, 40, 32, 0.12);
}
.home-page .iz-btn-audio.active {
  background: rgba(127, 163, 147, 0.28);
  border-color: rgba(127, 163, 147, 0.55);
  color: #243b30;
}

/* ==========================================================================
   F. HERO — intro i legenda pasm nad tłem (mur + laser + fala)
   ========================================================================== */
.home-page .iz-live-kicker {
  color: #8f6c33;
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.72rem;
}
.home-page .iz-live-title { color: var(--pg-ink); }
.home-page .iz-live-title em { color: #7a4a3a; }
.home-page .iz-live-lead { color: var(--pg-ink-body); }
.home-page .iz-live-lead strong { color: var(--pg-ink); }
.home-page .iz-stream-helper { color: var(--pg-ink-muted); font-size: 0.8rem; line-height: 1.5; }

.home-page .iz-band-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.8rem;
  margin: var(--space-xl) 0 0;
}
.home-page .iz-band-item {
  background: var(--pg-glass);
  -webkit-backdrop-filter: var(--pg-blur-soft);
  backdrop-filter: var(--pg-blur-soft);
  border: 1px solid var(--pg-border);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  box-shadow: 0 6px 18px rgba(58, 40, 32, 0.06);
}
.home-page .iz-band-item dt {
  color: #7a4a3a;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}
.home-page .iz-band-item dd { margin: 0; color: var(--pg-ink-body); font-size: 0.85rem; line-height: 1.45; }

/* ==========================================================================
   G. PRZYCISKI CTA NA DOLE GŁÓWNEJ — ciemne szkło (brązowy gradient)
   ========================================================================== */
.home-page .iz-live-cta .cta-button {
  background: linear-gradient(180deg, rgba(58, 40, 32, 0.82), rgba(40, 28, 22, 0.88));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(176, 141, 79, 0.55);
  color: #f4ead8;
  box-shadow: 0 8px 24px rgba(20, 12, 8, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.home-page .iz-live-cta .cta-button::before { display: none; } /* gradient overlay wył. */
.home-page .iz-live-cta .cta-button span { color: inherit; font-weight: 700; }
.home-page .iz-live-cta .cta-button:hover {
  background: linear-gradient(180deg, rgba(44, 29, 21, 0.92), rgba(28, 18, 13, 0.95));
  border-color: rgba(201, 168, 106, 0.75);
  color: #fff7e8;
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(20, 12, 8, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.home-page .iz-live-cta .cta-button-outline {
  background: linear-gradient(180deg, rgba(40, 28, 22, 0.62), rgba(58, 40, 32, 0.70));
  border: 1px solid rgba(176, 141, 79, 0.45);
  color: #efdfc6;
}
.home-page .iz-live-cta .cta-button-outline:hover {
  background: linear-gradient(180deg, rgba(44, 29, 21, 0.88), rgba(28, 18, 13, 0.92));
  border-color: rgba(201, 168, 106, 0.70);
  color: #fff7e8;
}

/* ==========================================================================
   H. PODSTRONY — jednolite szkło sekcji (warstwa 1)
   ========================================================================== */
body:not(.home-page) .page-header,
body:not(.home-page) .long-read > section,
body:not(.home-page) .form-section,
body:not(.home-page) .ways,
body:not(.home-page) .how-auction,
body:not(.home-page) .fig-gallery {
  background: var(--pg-glass);
  -webkit-backdrop-filter: var(--pg-blur);
  backdrop-filter: var(--pg-blur);
  border: 1px solid var(--pg-border);
  border-radius: 20px;
  box-shadow: 0 14px 38px rgba(58, 40, 32, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  padding: 1.6rem 1.7rem;
  margin-bottom: var(--space-lg);
}

/* Warstwa 2 — karty wiszące NAD sekcjami: własny, słabszy blur (głębia) */
body:not(.home-page) .glass-panel,
body:not(.home-page) .long-read .blockquote {
  background: rgba(255, 252, 247, 0.55);
  -webkit-backdrop-filter: var(--pg-blur-soft);
  backdrop-filter: var(--pg-blur-soft);
  border: 1px solid var(--pg-border-soft);
  box-shadow: 0 4px 14px rgba(58, 40, 32, 0.06);
}

/* Alert / CTA — szkło z terakotowym zabarwieniem */
body:not(.home-page) section.alert,
body:not(.home-page) .alert {
  background: rgba(196, 122, 110, 0.12);
  -webkit-backdrop-filter: var(--pg-blur);
  backdrop-filter: var(--pg-blur);
  border: 1px solid rgba(196, 122, 110, 0.3);
}

/* ==========================================================================
   I. PODSTRONY — kontrast tekstu na szkle
   ========================================================================== */
.long-read,
.long-read p,
.long-read li { color: var(--pg-ink-body); }
.long-read h1,
.long-read h2,
.long-read h3 { color: var(--pg-ink); }
.long-read .lead { color: var(--pg-ink-body); }
.long-read a {
  color: #6d3f2f;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(176, 141, 79, 0.5);
}
.long-read a:hover { color: #7a4a3a; }
.long-read .blockquote p { color: var(--pg-ink-body); }
.long-read .blockquote footer { color: var(--pg-ink-muted); }

/* Formularz (Wspólnota) — pola czytelne na szkle */
body:not(.home-page) .field-row label { color: var(--pg-ink-body); }
body:not(.home-page) .field-row input[type="text"],
body:not(.home-page) .field-row input[type="email"],
body:not(.home-page) .field-row input[type="tel"],
body:not(.home-page) .field-row textarea,
body:not(.home-page) .field-row select {
  background: rgba(255, 255, 255, 0.85);
  color: var(--pg-ink);
  border: 1px solid var(--pg-border-soft);
}

/* Ryciny w kolumnach bocznych (pałac) — rama ze szkła warstwy 2 */
.palac-fig__item {
  background: rgba(255, 252, 247, 0.72);
  -webkit-backdrop-filter: var(--pg-blur-soft);
  backdrop-filter: var(--pg-blur-soft);
  border: 1px solid var(--pg-border);
  box-shadow: 0 10px 26px rgba(58, 40, 32, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .home-page .iz-btn-audio,
  .home-page .iz-live-cta .cta-button { transition: none; }
}