/* ============================================================
   klasyk.pl — indeks cen klasyków 2026 · /ceny-klasykow*
   Strona danych: tablica notowań + podstrony modeli (wykres SSR SVG).
   Ładowany wyłącznie na /ceny-klasykow* (HomeLayoutHeadConfigurator).
   Wymaga: tokens.css + base.css + components.css + components-content.css.
   Zasady taksonomii 2026: czerwień = akcent (linki, kickery, punkty
   danych), ceny tekstem NIGDY na czerwono, przyciski czarne.
   ============================================================ */

/* Pełny shell (unifikacja szerokości listingów 2026-07-22): wrapper
   bez własnego max-width — łam wyznacza main.shell (120rem); wąskie
   zostają tylko miary tekstu (pi-lead, pi-lede, pi-foot). */
.pi-wrap{ margin:0 auto; padding:1.75rem 0 4rem; }

/* ---------- Okruszki (podstrona modelu) ---------- */
.pi-crumbs{ display:flex; flex-wrap:wrap; gap:.5rem; font-size:.85rem; color:var(--meta); }
.pi-crumbs a{ color:var(--meta-strong); }
.pi-crumbs a:hover{ color:var(--accent); }
.pi-crumbs .sep{ color:var(--gray-line); }

/* ---------- Nagłówek strony ---------- */
.pi-head{ margin-top:1rem; }
.pi-kicker{ font-size:.8125rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); margin:0 0 .5rem; }
.pi-head h1{ font-family:var(--title-font); font-weight:var(--title-weight); letter-spacing:var(--title-track);
  font-size:clamp(1.7rem,calc(3.2 * var(--vwu)),2.4rem); line-height:1.08; color:var(--heading);
  margin:0 0 .7rem; text-wrap:balance; }
.pi-lead{ font-size:1.02rem; color:var(--text); max-width:44rem; margin:0 0 1.5rem; }
.pi-sub{ font-size:.9rem; color:var(--meta-strong); margin:0; }

/* ---------- Pasek statystyk ---------- */
.pi-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--gray-line);
  border:1px solid var(--gray-line); border-radius:var(--r-card); overflow:hidden; }
.pi-stat{ background:#fff; padding:.85rem 1rem; }
.pi-stat .n{ display:block; font-size:1.4rem; font-weight:700; color:var(--heading);
  letter-spacing:-.01em; line-height:1.15; font-variant-numeric:tabular-nums; }
.pi-stat .l{ display:block; font-size:.72rem; color:var(--meta); letter-spacing:.04em;
  text-transform:uppercase; font-weight:600; margin-top:.2rem; }
.pi-stat-week .n{ font-size:1.1rem; line-height:1.5; white-space:nowrap; }

/* ---------- Sekcje ---------- */
.pi-sec{ margin-top:2.75rem; }
.pi-sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:1.125rem; }
.pi-sec-head h2{ font-family:var(--sans); font-weight:700; line-height:1.2; letter-spacing:.09em;
  text-transform:uppercase; color:var(--meta-strong); margin:0; font-size:.8125rem; }
.pi-sec-note{ font-size:.78rem; color:var(--meta); }

/* ---------- Największe rynki tygodnia ---------- */
/* auto-fill: na pełnym shellu 8 kart rynków mieści się w jednym rzędzie */
.pi-top{ display:grid; grid-template-columns:repeat(auto-fill,minmax(13rem,1fr)); gap:.75rem; }
.pi-top-card{ display:flex; flex-direction:column; gap:.3rem; border:1px solid var(--gray-line);
  border-radius:var(--r-card); background:#fff; padding:.9rem 1rem; color:var(--text); transition:border-color .15s; }
.pi-top-card:hover{ border-color:var(--meta); }
.pi-top-card .tc-name{ font-weight:600; color:var(--heading); font-size:.92rem; line-height:1.25; }
.pi-top-card .tc-price .v{ font-weight:600; color:var(--heading); font-size:1.3rem;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.pi-top-card .tc-price .u{ font-weight:600; color:var(--meta-strong); font-size:.6rem; }
.pi-top-card .tc-meta{ font-size:.72rem; color:var(--meta); }

/* ---------- Chipsy marek ---------- */
.pi-chips{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.25rem; }
.pi-chip{ font-size:.78rem; font-weight:600; color:var(--text); border:1px solid var(--gray-line);
  border-radius:var(--r-pill); padding:.26rem .75rem; background:#fff; }
.pi-chip:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------- Tablica notowań ---------- */
.pi-group{ margin-top:1.5rem; scroll-margin-top:6rem; }
.pi-group-h{ font-size:1.05rem; font-weight:700; color:var(--heading); letter-spacing:-.01em;
  margin:0 0 .5rem; }
.pi-tbl-scroll{ overflow-x:auto; }
.pi-tbl{ border-collapse:collapse; width:100%; min-width:42rem; font-variant-numeric:tabular-nums; }
.pi-tbl th{ font-size:.68rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--meta); text-align:left; padding:.45rem .8rem .45rem 0; border-bottom:1px solid var(--heading); }
.pi-tbl th.r, .pi-tbl td.r{ text-align:right; }
.pi-tbl td{ padding:.62rem .8rem .62rem 0; border-bottom:1px solid var(--gray-line); vertical-align:middle; }
.pi-tbl tbody tr{ transition:background .15s; }
.pi-tbl tbody tr:hover{ background:var(--gray-2); }
.pi-tbl td.model a{ font-weight:600; color:var(--heading); font-size:.95rem; }
.pi-tbl td.model a:hover{ color:var(--accent); }
.pi-tbl td.model .g{ display:block; font-size:.72rem; color:var(--meta); margin-top:.1rem; }
.pi-tbl td.med{ font-weight:600; color:var(--heading); font-size:1rem; white-space:nowrap; }
.pi-tbl td .u{ font-size:.68em; color:var(--meta-strong); font-weight:600; }
.pi-tbl td.n{ color:var(--text); }
.pi-tbl td.delta{ color:var(--muted); font-size:.88rem; white-space:nowrap; }
.pi-tbl .range-col{ min-width:11rem; }
.pi-tbl td.range .vals{ display:flex; justify-content:space-between; gap:.6rem;
  font-size:.7rem; color:var(--meta); margin-bottom:.28rem; white-space:nowrap; }
.pi-pill-new{ display:inline-block; font-size:.6rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent); border:1px solid currentColor;
  border-radius:var(--r-pill); padding:.06rem .42rem; margin-left:.4rem; vertical-align:.14em; }

/* Pasek widełek p25–p75 z punktem mediany (wspólny wzorzec strony) */
.rbar, .pi-tbl td.range .rbar{ position:relative; display:block; height:.3rem;
  background:var(--rule); border-radius:var(--r-pill); }
.rbar i{ position:absolute; top:50%; width:.6rem; height:.6rem; border-radius:50%;
  background:var(--heading); border:2px solid #fff; transform:translate(-50%,-50%); }

.pi-foot{ font-size:.76rem; color:var(--meta); margin:.9rem 0 0; max-width:52rem; }

/* ---------- Bieżące notowanie (podstrona modelu) ---------- */
.pi-now{ margin-top:1.75rem; background:var(--surface-warm); border-radius:var(--r-card);
  padding:1.5rem 1.75rem 1.4rem; }
.pi-now-q{ font-family:var(--sans); font-weight:700; line-height:1.2; letter-spacing:.09em;
  text-transform:uppercase; color:var(--meta-strong); margin:0 0 .55rem; font-size:.8125rem; }
.pi-lede{ font-size:.95rem; color:var(--text); max-width:46rem; margin:0 0 1.35rem; }
.pi-lede b{ color:var(--heading); font-weight:600; }
.pi-now-price{ display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap; }
.pi-now-price .price .v{ font-size:2.4rem; font-weight:600; color:var(--heading);
  letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.pi-now-price .price .u{ font-weight:600; color:var(--meta-strong); font-size:1rem; }
.pi-now-price .lbl{ font-size:.85rem; color:var(--meta-strong); }
.pi-now-range{ margin:1.2rem 0 .5rem; }
.pi-now-range .rbar{ height:.4rem; }
.pi-now-range .rbar i{ width:.72rem; height:.72rem; border-color:var(--surface-warm); }
.pi-now-range .vals{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.78rem; color:var(--meta-strong); margin-top:.45rem; font-variant-numeric:tabular-nums; }
.pi-now-range .vals b{ color:var(--heading); font-weight:600; }
.pi-now-range .minmax{ display:block; font-size:.72rem; color:var(--meta); margin-top:.4rem;
  font-variant-numeric:tabular-nums; }
.pi-now-meta{ display:flex; justify-content:space-between; gap:.5rem 1.25rem; flex-wrap:wrap;
  font-size:.78rem; color:var(--meta); margin-top:.9rem; }
.pi-now-meta .delta{ font-weight:600; color:var(--meta-strong); }
.pi-now-meta .delta.muted{ font-weight:400; color:var(--meta); }
.pi-note{ font-size:.8rem; color:var(--meta-strong); margin:.9rem 0 0; padding-left:.8rem;
  border-left:2px solid var(--rule); }
.pi-empty p{ font-size:.95rem; color:var(--text); max-width:44rem; margin:0; }
.pi-empty b{ color:var(--heading); }

/* ---------- Wykres tygodniowy (SSR SVG) ---------- */
.pi-chart-box{ border:1px solid var(--gray-line); border-radius:var(--r-card); background:#fff;
  padding:1rem 1rem .5rem; overflow-x:auto; }
.pi-chart{ display:block; width:100%; min-width:33rem; height:auto; }
.pi-chart .grid{ stroke:var(--gray-3); stroke-width:1; }
.pi-chart .tick, .pi-chart .xlbl, .pi-chart .mlbl{ font-family:var(--sans); font-size:11px; fill:var(--meta); }
.pi-chart .band{ fill:var(--surface-warm); stroke:var(--rule); stroke-width:1; }
.pi-chart .whisk{ stroke:var(--rule); stroke-width:2; stroke-linecap:round; }
.pi-chart .obs{ fill:var(--heading); opacity:.16; }
.pi-chart .line{ fill:none; stroke:var(--heading); stroke-width:2; stroke-linejoin:round; }
.pi-chart .dot{ fill:var(--heading); stroke:#fff; stroke-width:2; }
/* Mediana w całości czarna (decyzja 2026-07-06) — czerwień zarezerwowana
   dla przyszłej skali stanu na kropkach obserwacji (wzorzec mapy Polski). */
.pi-chart .dot-last{ fill:var(--heading); }
.pi-chart .vlbl{ font-family:var(--sans); font-size:12px; font-weight:600; fill:var(--heading); }
.pi-tbl-weeks{ margin-top:1.25rem; min-width:40rem; }
.pi-tbl td.mm{ color:var(--meta); font-size:.85rem; white-space:nowrap; }

/* ---------- Ogłoszenia własnej giełdy ---------- */
.pi-ads{ display:grid; grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); gap:.75rem; }
.pi-ad-card{ display:flex; flex-direction:column; gap:.45rem; border:1px solid var(--gray-line);
  border-radius:var(--r-card); background:#fff; overflow:hidden; color:var(--text);
  transition:border-color .15s; }
.pi-ad-card:hover{ border-color:var(--meta); }
.pi-ad-card .img{ display:block; aspect-ratio:500/320; overflow:hidden; background:var(--gray-2); }
.pi-ad-card .img img{ width:100%; height:100%; object-fit:cover; display:block; }
.pi-ad-card .t{ font-weight:600; color:var(--heading); font-size:.9rem; line-height:1.3;
  padding:0 .9rem; }
.pi-ad-card .p{ font-weight:600; color:var(--heading); font-size:1.05rem; padding:0 .9rem .8rem;
  font-variant-numeric:tabular-nums; }

/* ---------- Siostrzane notowania marki ---------- */
.pi-sibs{ list-style:none; margin:0; padding:0; border-top:1px solid var(--gray-line);
  columns:22rem; column-gap:2.5rem; }
.pi-sibs li{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.55rem .25rem; border-bottom:1px solid var(--gray-line); break-inside:avoid; }
.pi-sibs a{ font-weight:600; color:var(--heading); font-size:.92rem; }
.pi-sibs a:hover{ color:var(--accent); }
.pi-sibs .v{ font-size:.8rem; color:var(--meta-strong); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
.pi-sibs .v.muted{ color:var(--meta); }

/* ---------- Metodyka ---------- */
.pi-method{ margin-top:3rem; background:var(--surface-warm); border-radius:var(--r-card);
  padding:1.5rem 1.75rem; scroll-margin-top:6rem; }
.pi-method h2{ font-family:var(--sans); font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--meta-strong); margin:0 0 1rem; font-size:.8125rem; }
.pi-method p{ font-size:.88rem; color:var(--text); margin:0; max-width:72ch; }
.pi-method b{ color:var(--heading); font-weight:600; }
.pi-method-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem 2.25rem; }
.pi-method-mini p + p{ margin-top:.6rem; }
.pi-back{ font-size:.85rem; }

/* ---------- Domknięcie sprzedażowe (lejek 2.3) ---------- */
.pi-sell{ display:flex; align-items:center; justify-content:space-between; gap:1rem 1.75rem;
  flex-wrap:wrap; margin-top:1.75rem; background:var(--surface-warm); border-radius:var(--r-card);
  padding:1.35rem 1.75rem; }
.pi-sell-txt{ flex:1 1 22rem; min-width:15rem; }
.pi-sell-h{ font-family:var(--title-font); font-weight:var(--title-weight); letter-spacing:var(--title-track);
  font-size:1.15rem; line-height:1.2; color:var(--heading); margin:0 0 .3rem; }
.pi-sell-txt p{ font-size:.9rem; color:var(--text); margin:0; max-width:42rem; }
.pi-sell-cta{ flex:0 0 auto; white-space:nowrap; }
.pi-sell--slim{ margin-top:1.5rem; padding:1.1rem 1.5rem; }
.pi-sell--slim .pi-sell-h{ font-size:1.02rem; }

/* ---------- Responsywność ---------- */
@media (max-width:899px){
  .pi-stats{ grid-template-columns:repeat(2,1fr); }
  .pi-top{ grid-template-columns:repeat(2,1fr); }
  .pi-method-grid{ grid-template-columns:1fr; }
  .pi-ads{ grid-template-columns:1fr 1fr; }
  .pi-sibs{ columns:1; }
}
@media (max-width:599px){
  .pi-wrap{ padding-top:1.25rem; }
  .pi-top{ grid-template-columns:1fr 1fr; gap:.5rem; }
  .pi-ads{ grid-template-columns:1fr; }
  .pi-now{ padding:1.15rem 1.125rem 1.05rem; }
  .pi-now-price .price .v{ font-size:2rem; }
  .pi-chart-box{ padding:.6rem .4rem .2rem; }
  .pi-sell{ padding:1.1rem 1.125rem; gap:.9rem; }
  .pi-sell-cta{ width:100%; }
}