/* home-wd.css — strona główna „Wydanie dnia" (#0312).
   Źródło wyglądu: proposals/applied/0312-wzorzec-glowna-wydanie-dnia.html (sesja show-me
   08–09.08.2026). Ładowany WYŁĄCZNIE na froncie, OSTATNI (po home-extra/partners/zones) —
   nadpisania stref (.pz) i app-shella liczą na tę kolejność.
   Zasady: zero hairline'ów, separacja = whitespace/ton/barwne plamy; tint petrol tylko na
   zdjęciach TREŚCI (var(--of-ffilt) — wariant z Customizera, na prodzie of-imgf-veil);
   kreacje partnerów i postery wideo bez tintu. */

.home-wd { --pod: #f6f7f6; }

/* ── Białe tło + pełna szerokość pasów: .main bez ograniczenia, treść boxed wraca przez .wd-wrap ── */
body.home-wd { background: #fff; }
.home-wd .main { max-width: none; padding: 8px 0 0; }
.wd-wrap { max-width: 1240px; margin: 0 auto; padding: 0 36px; }

/* ── Utilbar: data obok okruszka (wypełnia JS — publiczny cache 12 h nie może utrwalić daty) ── */
.utilbar .ub-date { font-family: 'Source Sans 3', sans-serif; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }

/* ── Hero na czystej bieli (wzorzec #0312) — bez miętowej płachty starej głównej ── */
.home-wd .hero-illus { background: transparent; border-radius: 0; padding-left: 0; padding-right: 0; overflow: visible; }
/* !important: globalna reguła „tytuły bez zieleni w akcentach" (home.css) też ma !important —
   wzorzec #0312 świadomie przywraca miętowy akcent WYŁĄCZNIE w hero frontu. */
.home-wd .hero-illus h1 .em { color: var(--accent) !important; }
/* Pole szukania na szerokość zapytania, nie strony (wzorzec: 560 px; zgłoszenie usera 09.08) —
   bije .hero-grid .mega { max-width: none } z home-extra.css. */
.home-wd .hero-grid .mega { max-width: 560px; }

/* ── Tint petrol na miniaturach treści (wspólny slot wierszy/kafli nowych sekcji) ── */
.wd-th { position: relative; isolation: isolate; overflow: hidden; }
.wd-th img { width: 100%; height: 100%; object-fit: cover; filter: var(--of-ffilt, saturate(0.78) contrast(0.96) brightness(1)); }
.wd-th::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--of-ftint, rgba(15, 100, 112, 0.16));
  mix-blend-mode: var(--of-fblend, normal);
}
.wd-th--empty { background: rgba(15, 100, 112, 0.08); }
.wd-th--empty::after { content: none; }
/* #0315 wariant A (decyzja usera po oglądzie proda): kategoria = kolorowa etykieta w linii
   meta pod tytułem (.nd b, kolor inline z mapy kategorii) — bez chipa na miniaturze. */
.wd-ni .nd b { font-weight: 700; }

/* ── Aktualności / Na czasie: jednorodne wiersze (miniatura + tytuł), bez kart i hairline'ów ── */
.wd-newsl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 52px; padding: 4px 0 0; }
.wd-ni { display: flex; gap: 16px; align-items: center; padding: 10px 0; }
.wd-ni .wd-th { width: 118px; aspect-ratio: 16 / 10; border-radius: 12px; flex: none; }
.wd-ni .t { font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; }
.wd-ni .nd { display: block; font-family: 'Source Sans 3', sans-serif; font-size: 12.5px; font-weight: 400; color: var(--ink-3); margin-top: 3px; }

/* ── Strefy (marki + eksperckie): tonalny podest zamiast karty z ramką ── */
.home-wd .pz {
  background: var(--pod); border: 0; border-radius: 24px;
  padding: 26px 0 28px;
}
.home-wd .pz-head { margin: 0 0 16px; padding: 0 112px 0 34px; }
.home-wd .pz-head h2 { font-size: 18px; }
/* position:static — strzałki (.pz-nav, absolute) mają kotwiczyć się do .pz (linia nagłówka),
   nie do viewportu toru; klip overflow vp ich nie tnie, bo containing block jest poza nim. */
.home-wd .pz-vp { margin: 0; position: static; }
/* Bez scroll-snap (precedens #0294): snap dosuwał tor do 34 px na starcie (pomiar 09.08),
   przycinając lewy padding podestu; strzałki zones.js i tak celują w krawędź kafla. */
/* gap = 14 (nie 16 z wzorca): zones.js liczy krok strzałki ze stałą GAP=14 — inny gap
   rozjeżdżałby dosunięcie o 2 px na każde kliknięcie. */
.home-wd .pz-track { padding: 0 34px; gap: 14px; scroll-snap-type: none; }
/* #0316: kafle marek KWADRATOWE (kreacje stref są 1200×1200 — slot 1:1 nie kadruje)
   i mniejsze (128 px, intencja usera „się pomniejszą"). */
.home-wd .pz-item {
  width: 128px; aspect-ratio: auto; border: 0; background: transparent;
  border-radius: 0; overflow: visible; box-shadow: none;
}
.home-wd .pz-item:hover { border: 0; box-shadow: none; transform: none; }
.home-wd .pz-item .pz-ph { flex: none; width: 128px; height: 128px; border-radius: 14px; overflow: hidden; background: #fff; }
/* Kreacje partnerów BEZ tintu (wzorzec #0312) — zdejmujemy filtr crossfade'u z zones-styles. */
.home-wd .pz-item .pz-ph img.pz-ph-blend { filter: none; }
.home-wd .pz-item .pz-name {
  border-top: 0; background: transparent; padding: 8px 2px 0;
  font-size: 13.5px; white-space: normal;
}
/* Strzałki: kołowe, stale widoczne, w linii nagłówka (jak wzorzec) — także na dotyku. */
.home-wd .pz-nav {
  top: 24px; transform: none; opacity: 1; display: grid;
  width: 32px; height: 32px; border: 0; background: #fff; color: var(--primary);
  box-shadow: 0 4px 14px -6px rgba(13, 75, 92, 0.4);
}
.home-wd .pz-nav:hover { background: #fff; color: var(--accent); }
.home-wd .pz-nav:disabled { opacity: 0.35 !important; pointer-events: none; }
.home-wd .pz-nav.prev { left: auto; right: 76px; }
.home-wd .pz-nav.next { right: 34px; }
.home-wd .pz-dots { display: none; }
/* Kampanie eksperckie: kreacje w NATURALNEJ proporcji 3:1, całe widoczne (contain). */
.home-wd .pz--banner .pz-item { width: 312px; }
.home-wd .pz--banner .pz-item img.pz-full {
  width: 312px; height: 104px; object-fit: contain;
  background: #fff; border-radius: 14px; display: block;
}
/* #0316: kafel-CTA „Zobacz wszystkie" na końcu toru (oba paski) — tonalna mięta, strzałka.
   Reguły PO wariancie bannerowym (równa specyficzność — wygrywa kolejność w pliku). */
.home-wd .pz-item--all .pz-all-in {
  width: 128px; height: 128px; border-radius: 14px;
  background: var(--accent-soft); color: var(--accent-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; font-size: 12.5px; font-weight: 600; text-align: center; padding: 8px;
  transition: background 0.15s;
}
.home-wd .pz-item--all:hover .pz-all-in { background: rgba(20, 160, 133, 0.18); }
.home-wd .pz-item--all .pz-all-in svg { width: 20px; height: 20px; }
.home-wd .pz--banner .pz-item--all { width: 150px; }
.home-wd .pz--banner .pz-item--all .pz-all-in { width: 150px; height: 104px; }

/* ── Wydarzenia: czysta typografia z dużą datą; wyróżnione = jedyna miętowa plama ── */
.wd-ev-row { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 26px; padding-top: 4px; }
/* #0318: IDENTYCZNA geometria wszystkich wierszy — plama wyróżnienia to WYŁĄCZNIE tło+radius
   (własny padding featu rozjeżdżał daty/tagi/tytuły trzech pozycji z jednej linii). */
.wd-ev { display: flex; gap: 18px; padding: 14px 16px; }
.wd-ev.feat { background: var(--accent-soft); border-radius: 20px; }
.wd-ev .d { text-align: center; flex: none; width: 52px; }
.wd-ev .d .mo { display: block; font-size: 11px; color: var(--warn); font-weight: 700; }
.wd-ev .d .nr { display: block; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); }
.wd-ev .d .wdd { display: block; font-family: 'Source Sans 3', sans-serif; font-size: 10.5px; color: var(--ink-3); }
/* #0318: linia typu z ikoną kanonu (mapa wspólna z railem #0317 — of_ev_typ_info). */
.wd-ev .tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--accent-2); }
.wd-ev .tag svg { width: 13px; height: 13px; flex: none; }
.wd-ev .tag .ft { color: #b0651a; }
.wd-ev .tt { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.3; margin: 4px 0 5px; color: var(--ink); }
.wd-ev .m { display: block; font-family: 'Source Sans 3', sans-serif; font-size: 12px; color: var(--ink-3); }
.wd-ev-all { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 13.5px; color: var(--primary-2); font-weight: 500; }
.wd-ev-all:hover { color: var(--primary); }

/* ── Ulubione: półka z kreskowanymi slotami ── */
.wd-fav-note { margin: -6px 0 4px; font-size: 13.5px; color: var(--ink-3); }
.wd-fav-note a { color: var(--accent-2); font-weight: 600; }
.wd-fav-note a:hover { color: var(--accent); }
.wd-fav-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; padding-top: 8px; }
.wd-fav-it { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wd-fav-ph { aspect-ratio: 16 / 10; border-radius: 14px; }
.wd-fav-ph.wd-fav-dash {
  border: 2px dashed var(--line); background: transparent;
  display: grid; place-items: center;
  font-size: 34px; font-weight: 300; color: var(--ink-4);
  transition: border-color 0.12s, color 0.12s;
}
.wd-fav-it.wd-fav-add:hover .wd-fav-dash { border-color: var(--accent); color: var(--accent); }
.wd-fav-t { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.wd-fav-k { font-family: 'Source Sans 3', sans-serif; font-size: 11.5px; color: var(--ink-3); }

/* ── Narzędzia podręczne: petrolowy pas pełnej szerokości, kafle tonalne ── */
.wd-tools {
  margin-top: 52px; padding: 38px 0 40px;
  background: linear-gradient(120deg, #0d4b5c, #0a3f47); color: #fff;
}
.wd-tools h2 { margin: 0 0 5px; font-size: 21px; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.wd-tools .wd-tools-sub { display: inline-block; margin-bottom: 22px; font-size: 13px; color: rgba(255, 255, 255, 0.65); }
.wd-tools .wd-tools-sub:hover { color: #fff; }
.wd-tgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.wd-tool {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: 18px 18px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.07); color: #fff;
  transition: background 0.15s;
}
.wd-tool:hover { background: rgba(255, 255, 255, 0.13); }
.wd-tool.t-dyzur { background: var(--accent); }
.wd-tool.t-dyzur:hover { background: var(--accent-2); }
.wd-tic { width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; }
.wd-tool.t-dyzur .wd-tic { background: rgba(255, 255, 255, 0.22); }
.wd-tic svg { width: 20px; height: 20px; }
.wd-tlb { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.wd-tbadge {
  position: absolute; top: 12px; right: 12px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.12);
  border-radius: 7px; padding: 3px 8px;
}
/* Marker plamy malinowej = plakietka wyróżnienia bazy (decyzja usera 09.08: „NAJWIĘKSZA BAZA"). */
.wd-tbadge.thot { display: inline-flex; align-items: center; gap: 5px; background: var(--warn); color: #fff; }
.wd-tbadge .pulse { width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* ── Reklama: osobna sekcja na bieli, billboard wycentrowany ── */
.wd-adsec { display: flex; justify-content: center; }
.wd-adsec .ad-slot { margin: 0 auto; }

/* ── Wyróżnione materiały: miętowa plama (accent-soft, radius 24) z karuzelą aktywnych
      promocji — tor overflow-x, scrollbar ukryty, strzałki/drag dokłada hscroll.js (#0294) ── */
.wd-wyr {
  background: var(--accent-soft); border-radius: 24px;
  padding: 28px 34px 30px;
}
.wd-wyr .lbl { display: flex; align-items: baseline; font-size: 13px; font-weight: 700; color: var(--accent-2); margin-bottom: 18px; }
.wd-wyr-track {
  display: flex; gap: 34px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 2px;
}
.wd-wyr-track::-webkit-scrollbar { display: none; }
.wd-wyr-track .wd-wyr-it { flex: 0 0 440px; }
.wd-wyr .wd-wyr-more { margin-left: auto; font-family: 'Source Sans 3', sans-serif; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.wd-wyr .wd-wyr-more:hover { color: var(--primary); }
.wd-wyr-it { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.wd-wyr-ph { width: 168px; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; flex: none; background: #fff; }
.wd-wyr-ph img { width: 100%; height: 100%; object-fit: cover; }
.wd-wyr-b { min-width: 0; }
.wd-wyr-b .tt { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; margin-bottom: 7px; color: var(--ink); }
.wd-wyr-b .dk { display: block; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); margin-bottom: 7px; }
.wd-wyr-b .pp { display: block; font-family: 'Source Sans 3', sans-serif; font-size: 11px; color: var(--ink-3); }

/* ── Pogadanki: ciemny pas bez nagłówka — duży player + playlista ── */
.wd-vid { margin-top: 52px; padding: 44px 0 52px; background: var(--primary-d); color: #fff; }
.wd-vid-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
.wd-vframe {
  position: relative; display: block; aspect-ratio: 16 / 9;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
  background: #0a3f47;
}
.wd-vframe img { width: 100%; height: 100%; object-fit: cover; }
.wd-vframe .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 50, 62, 0.15) 0%, transparent 35%, transparent 55%, rgba(4, 24, 30, 0.82) 100%); }
.wd-vframe .bigplay {
  position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  display: grid; place-items: center;
}
.wd-vframe .bigplay::after { content: ""; border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; margin-left: 7px; }
.wd-vframe .fdur { position: absolute; right: 16px; top: 14px; background: rgba(0, 0, 0, 0.55); border-radius: 7px; padding: 3px 8px; font-family: 'Source Sans 3', sans-serif; font-size: 11px; font-weight: 600; }
.wd-vframe .ftitle { position: absolute; left: 22px; right: 22px; bottom: 44px; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
.wd-vframe .fmeta { position: absolute; left: 22px; bottom: 24px; font-family: 'Source Sans 3', sans-serif; font-size: 11.5px; color: rgba(255, 255, 255, 0.75); }
.wd-vframe .pbar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, 0.22); }
.wd-vframe .pbar i { display: block; height: 100%; background: var(--accent); }
.wd-vep { display: flex; gap: 13px; padding: 8px 0; align-items: center; }
.wd-vep .th { width: 118px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; flex: none; position: relative; background: rgba(255, 255, 255, 0.08); }
.wd-vep .th img { width: 100%; height: 100%; object-fit: cover; }
.wd-vep .th::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; opacity: 0.85; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5)); }
.wd-vep .th .dur { position: absolute; right: 5px; bottom: 5px; background: rgba(0, 0, 0, 0.6); border-radius: 5px; padding: 1px 5px; font-family: 'Source Sans 3', sans-serif; font-size: 9.5px; font-weight: 600; }
.wd-vep .th .rz { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.25); }
.wd-vep .th .rz i { display: block; height: 100%; background: var(--accent); }
.wd-vep .tt { font-size: 13.5px; line-height: 1.35; font-weight: 600; color: rgba(255, 255, 255, 0.92); min-width: 0; }
.wd-vep .tt i { display: block; font-style: normal; font-family: 'Source Sans 3', sans-serif; font-size: 11px; color: rgba(255, 255, 255, 0.5); font-weight: 400; margin-top: 2px; }
.wd-vall { display: inline-block; margin-top: 12px; font-family: 'Source Sans 3', sans-serif; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.wd-vall:hover { color: #fff; }

/* ── Baza wiedzy: indeks 3 kolumn czystych list ── */
.wd-idx { padding-top: 4px; }
.wd-idx-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; padding-top: 4px; }
.wd-idx-col h3 { margin: 0 0 12px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.wd-idx-ko h3 { color: var(--accent-2); }
.wd-idx-col a { display: block; font-size: 14.5px; padding: 7px 0; color: var(--ink-2); }
.wd-idx-col a:hover { color: var(--primary); }
.wd-idx-col a i { font-style: normal; font-family: 'Source Sans 3', sans-serif; font-size: 11.5px; color: var(--ink-4); }
.wd-idx-col .more-lnk { color: var(--ink-3); font-size: 13px; }
.wd-idx-col .more-lnk:hover { color: var(--primary); }

/* ── Responsywność ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .wd-tgrid { grid-template-columns: repeat(2, 1fr); }
  .wd-fav-row { grid-template-columns: repeat(2, 1fr); }
  .wd-ev-row { grid-template-columns: 1fr; gap: 8px; }
  .wd-vid-grid { grid-template-columns: 1fr; }
  .wd-idx-cols { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 700px) {
  .wd-wrap { padding: 0 18px; }
  .utilbar .ub-date { display: none; }

  /* karuzele: bleed do krawędzi, scrollbar ukryty (mechanika = hscroll.js #0294) */
  .wd-newsl {
    display: flex; gap: 12px; overflow-x: auto;
    margin: 0 -18px; padding: 12px 18px 10px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .wd-newsl::-webkit-scrollbar { display: none; }
  .wd-ni { flex: none; width: 238px; flex-direction: column; align-items: stretch; gap: 9px; padding: 0; }
  .wd-ni .wd-th { width: 100%; }

  .wd-fav-row {
    display: flex; gap: 12px; overflow-x: auto;
    margin: 0 -18px; padding: 8px 18px 10px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .wd-fav-row::-webkit-scrollbar { display: none; }
  .wd-fav-it { flex: none; width: 210px; }

  .wd-wyr { padding: 22px 20px 24px; }
  .wd-wyr-track { gap: 20px; }
  .wd-wyr-track .wd-wyr-it { flex-basis: 300px; flex-direction: column; }
  .wd-wyr-ph { width: 100%; }
  .wd-wyr-b .tt { font-size: 15.5px; }
  .wd-tgrid { gap: 10px; }
  .wd-tool { padding: 14px; }
  .wd-vframe .ftitle { font-size: 15.5px; left: 14px; right: 14px; bottom: 38px; }
  .wd-vframe .fmeta { left: 14px; bottom: 20px; }
  .wd-vframe .bigplay { width: 64px; height: 64px; }
  .wd-vframe .bigplay::after { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
}