/*
 * Warstwa prezentacji archiwum — Etap 1b, krok 6.7.
 * Świadomie POZA style.css: warstwa graficzna należy do Etapu 2 (UMOWA §1 pkt 2),
 * a osobny plik pozwala ją wymienić bez naruszania bazy motywu.
 * Wyłącznie tokeny z :root — żadnych wartości spoza projektu.
 */

/* ---------- Obudowa ---------- */

.nwa-single,
.nwa-archive {
	max-width: var(--nwa-wrap);
	margin-inline: auto;
	padding-inline: var(--nwa-space-m);
	padding-block: var(--nwa-space-l);
}

/* ---------- Pojedynczy wpis ---------- */

.nwa-entry__header {
	margin-bottom: var(--nwa-space-m);
}

.nwa-entry__title {
	margin: 0 0 var(--nwa-space-xs);
}

.nwa-entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nwa-space-s);
	align-items: baseline;
	margin: 0;
	font-size: var(--nwa-dopiski);
}

.nwa-entry__date,
.nwa-card__date {
	color: var(--nwa-ink);
}

.nwa-entry__level a,
.nwa-card__level a {
  color: var(--nwa-brand);
  font-weight: 700;
  letter-spacing: var(--nwa-tracking-cap);
  text-decoration: none;
  text-transform: uppercase;
}

.nwa-entry__teaser {
	max-width: var(--nwa-measure);
	margin-bottom: var(--nwa-space-m);
	font-size: var(--nwa-h5);
	font-style: italic;
}

.nwa-entry__content {
	max-width: var(--nwa-measure);
}

.nwa-entry__content p {
	margin-block: 0 var(--nwa-space-m);
}

/* ---------- Karta PMPro w miejscu treści ---------- */

.nwa-entry__content .pmpro_card {
	margin-block: var(--nwa-space-m);
	padding: var(--nwa-space-m);
	background: var(--nwa-surface);
	box-shadow: var(--nwa-shadow-card);
}

/* ---------- Słowniczek ---------- */

.nwa-glossary {
	max-width: var(--nwa-measure);
	margin-top: var(--nwa-space-l);
	padding: var(--nwa-space-m);
}

.nwa-glossary__title {
	margin: 0 0 var(--nwa-space-s);
	font-size: var(--nwa-h4);
}

.nwa-glossary__list {
	margin: 0;
}

.nwa-glossary__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--nwa-space-xs);
	padding-block: var(--nwa-space-xs);
	border-bottom: 1px solid var(--nwa-placeholder);
}

.nwa-glossary__row:last-child {
	border-bottom: 0;
}

.nwa-glossary__term {
	margin: 0;
	font-weight: 700;
}

.nwa-glossary__def {
	margin: 0;
	font-style: italic;
}

@media (max-width: 40rem) {
	.nwa-glossary__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* ---------- Lista archiwum ---------- */

.nwa-archive__title {
	margin: 0 0 var(--nwa-space-l);
}

.nwa-archive__list {
	display: grid;
	gap: var(--nwa-space-m);
}

.nwa-card {
	padding: var(--nwa-space-m);
}

.nwa-card__title {
	margin: 0 0 var(--nwa-space-xs);
	font-size: var(--nwa-h3);
}

.nwa-card__title a {
	text-decoration: none;
}

.nwa-card__title a:hover,
.nwa-card__title a:focus-visible {
	text-decoration: underline;
}

.nwa-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nwa-space-s);
	align-items: baseline;
	margin: 0 0 var(--nwa-space-s);
	font-size: var(--nwa-dopiski);
}

.nwa-card__teaser {
	max-width: var(--nwa-measure);
}

.nwa-card__teaser p {
	margin: 0;
}

.nwa-card__more {
	margin: var(--nwa-space-s) 0 0;
}

.nwa-card__link {
	font-size: var(--nwa-button);
	letter-spacing: var(--nwa-tracking-cap);
}

/* ---------- Stronicowanie ---------- */

.nwa-archive .pagination {
	margin-top: var(--nwa-space-l);
}

.nwa-archive .page-numbers {
	display: inline-block;
	padding: var(--nwa-space-xs) var(--nwa-space-s);
	text-decoration: none;
}

.nwa-archive .page-numbers.current {
	background: var(--nwa-brand);
	color: var(--nwa-on-brand);
}

.nwa-archive__empty {
	max-width: var(--nwa-measure);
}

/* ==========================================================================
   P5 — TOOLTIPY SŁOWNICZKA
   Struktura z importu: <span class="nwa-term" data-de="…" tabindex="0">
   ========================================================================== */

.nwa-term {
	position: relative;
	cursor: help;
	text-decoration: underline dotted;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--nwa-brand);
	text-underline-offset: .18em;
}

.nwa-term:focus-visible {
	outline: 2px solid var(--nwa-brand);
	outline-offset: 2px;
	border-radius: 2px;
}

.nwa-term::after {
	content: attr(data-de);
	display: none;
	position: absolute;
	left: var(--nwa-tt-x, 0px);
	bottom: calc(100% + .4em);
	z-index: 20;
	width: max-content;
	max-width: min(18em, 70vw);
	padding: .35em .6em;
	border-radius: 4px;
	background: var(--nwa-brand);
	color: var(--nwa-on-brand);
	font-size: .875rem;
	font-style: normal;
	font-weight: 400;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	white-space: normal;
	overflow-wrap: break-word;
	pointer-events: none;
}

/* Mysz i klawiatura — bez JS. Hover wyłącznie tam, gdzie istnieje. */
@media (hover: hover) {
	.nwa-term:hover::after {
		display: block;
	}
}

.nwa-term:focus-visible::after,
.nwa-term.is-open::after {
	display: block;
}


.nwa-term.nwa-term--below::after {
	bottom: auto;
	top: calc(100% + .4em);
}

/* Wydruk — tłumaczenie w nawiasie, bo dymka nie da się najechać na papierze. */
@media print {
	.nwa-term::after {
		content: " (" attr(data-de) ")";
		display: inline;
		position: static;
		width: auto;
		max-width: none;
		padding: 0;
		background: none;
		color: inherit;
		font-size: inherit;
	}
}

/* =========================================================================
   P4 — FORMULARZ FILTRÓW
   Warstwa robocza. Wyłącznie tokeny z :root — grafika należy do Etapu 2.
   ========================================================================= */

.nwa-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--nwa-space-s);
	margin-block-end: var(--nwa-space-l);
	padding: var(--nwa-space-m);
	border: 1px solid var(--nwa-placeholder);
	border-radius: 4px;
}

.nwa-filters__field {
	display: flex;
	flex: 1 1 10rem;
	flex-direction: column;
	gap: var(--nwa-space-xs);
	margin: 0;
	min-width: 0;
}

.nwa-filters__field--wide {
	flex-basis: 18rem;
}

.nwa-filters__field label {
	font-size: var(--nwa-dopiski);
	font-weight: 600;
}

.nwa-filters__field input,
.nwa-filters__field select {
	width: 100%;
	min-width: 0;
	padding: .5rem .625rem;
	border: 1px solid var(--nwa-placeholder);
	border-radius: 4px;
	background: var(--nwa-surface);
	font: inherit;
	font-size: 1rem; /* poniżej 16px iOS przybliża widok przy fokusie */
	line-height: 1.3;
	color: inherit;
}

.nwa-filters__field input:focus-visible,
.nwa-filters__field select:focus-visible,
.nwa-filters__submit:focus-visible,
.nwa-filters__reset:focus-visible {
	outline: 2px solid var(--nwa-brand);
	outline-offset: 2px;
}

.nwa-filters__actions {
	display: flex;
	align-items: center;
	gap: var(--nwa-space-s);
	margin: 0;
}

.nwa-filters__submit {
	padding: .5rem 1.25rem;
	border: 1px solid var(--nwa-brand);
	border-radius: 4px;
	background: var(--nwa-brand);
	color: var(--nwa-on-brand);
	font: inherit;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}

.nwa-filters__reset {
	font-size: var(--nwa-dopiski);
	white-space: nowrap;
}

@media (max-width: 40em) {

	.nwa-filters__field,
	.nwa-filters__field--wide {
		flex-basis: 100%;
	}

	.nwa-filters__actions {
		flex-basis: 100%;
	}

	.nwa-filters__submit {
		flex: 1;
	}
}

/* --- Miniatura karty (B2, 15.08.2026) ---------------------------------
 * Rozmiar wypisywany przez szablon to `medium` (480 px) — zapas na Etap 2,
 * gdy dojdą właściwe grafiki. Tutaj wyłącznie ograniczenie prezentacji.
 * Obrazek zastępczy jest identyczny na wszystkich kartach, więc ma być
 * znakiem rozpoznawczym, nie bohaterem karty.
 * -------------------------------------------------------------------- */

.nwa-card__thumb {
	display: block;
	width: 150px;
	max-width: 30%;
	margin: 0 0 0.75rem;
}

.nwa-card__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

/* Grafika zastępcza — przygaszona, żeby nie konkurowała z tytułem. */
.nwa-card__thumb img.nwa-thumb--default {
	opacity: 0.8;
}

@media (max-width: 600px) {
	.nwa-card__thumb {
		width: 120px;
	}
}

/* --- Sekcja podcastu (B3, 15.08.2026) ---------------------------------
 * Renderowana POZA bramką, także dla czytelnika bez dostępu do treści.
 * Ma być czytelna, ale nie konkurować ze słowniczkiem stojącym wyżej.
 * -------------------------------------------------------------------- */

.nwa-podcast {
	margin-block-start: 2rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid rgba(0, 0, 0, 0.12);
}

.nwa-podcast__title {
	margin-block-end: 0.75rem;
	font-size: 1.1rem;
}

.nwa-podcast__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nwa-podcast__item {
	margin: 0;
}

.nwa-podcast__link {
	display: inline-block;
	padding-block: 0.35rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.nwa-podcast__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.nwa-podcast__list {
		flex-direction: column;
		gap: 0.25rem;
	}
}

/* =========================================================
   P5 — STRONY PMPro
   ========================================================= */

/* Konto: tytuł strony (h1 motywu) niesie już „Mein Konto".
   Shortcode PMPro powtarza go w h2 — jeden nagłówek zostaje.
   Zaczep przez ID sekcji, nie przez .pmpro_section_title:
   ta klasa jest wspólna dla wszystkich sekcji tej strony. */
#pmpro_account-profile > .pmpro_section_title {
	display: none;
}

/* Strony PMPro stoją na page-template-default, więc nie dostają
   obudowy .nwa-single ani .nwa-archive — stąd treść przy lewej
   krawędzi okna, bez odstępu bocznego.
   Zmierzone 05.09 na /membership-levels/:
   .nwa-main w=1191 pad=0 · .nwa-entry__content x=0 w=699 margin-left=0.
   Zawężone przez :has(.pmpro) — wpis i archiwum bez zmian. */
.nwa-main:has(.pmpro) .nwa-entry {
	max-width: var(--nwa-measure);
	margin-inline: auto;
	padding-inline: var(--nwa-space-m);
}

/* Pion — WYŁĄCZNIE strona poziomów. Ten sam szablon obsługuje
   kasę i konto, które są długie; tam centrowanie w pionie szkodzi.
   Zmierzone: nagłówek 80 px, stopka 32 px.
   `safe center` przy treści wyższej niż okno cofa się do
   wyrównania od góry — nic nie ucieka poza ekran. */
body.pmpro-levels .nwa-main {
	display: flex;
	flex-direction: column;
	justify-content: safe center;
	min-height: calc(100vh - 112px);
	min-height: calc(100dvh - 112px);
}

/* Strona powitalna pod korzeniem subdomeny — usterka 58 */
.nwa-main:has(.nwa-welcome) .nwa-entry {
	max-width: var(--nwa-measure);
	margin-inline: auto;
	padding-inline: var(--nwa-space-m);
}
.nwa-welcome__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nwa-space-s);
}

/* Strona powitalna — wyśrodkowanie w pionie */
.nwa-main:has(.nwa-welcome) {
	display: flex;
	flex-direction: column;
	justify-content: safe center;
	min-height: calc(100vh - 112px);
	min-height: calc(100dvh - 112px);
}

/* Strona logowania — wyśrodkowanie w pionie, usterka 58 (rodzina) */
body.pmpro-login .nwa-main {
	display: flex;
	flex-direction: column;
	justify-content: safe center;
	min-height: calc(100vh - 112px);
	min-height: calc(100dvh - 112px);
}

/* =========================================================
   ETAP 2 - UKLAD WG PROJEKTU GRAFICZNEGO (13.09.2026)
   Ramka Figmy `meldunki - strona wpisu`, 1440 x 4243.
   Zmierzone: obudowa 1151, kolumny 749 : 368, szczelina 34,
   wypelnienie panelu 81 gora / 36 boki, tlo #E9DED4 (spoza stylow).
   Blok stoi na koncu celowo: nadpisuje reguly bazowe kolejnoscia
   kaskady i cofa sie usunieciem jednego ciaglego fragmentu.
   Do scalenia z regulami wyzej przy koncowym przepisaniu arkusza.
   ========================================================= */

.nwa-single,
.nwa-archive {
  max-width: calc(var(--nwa-wrap) + var(--nwa-space-m) * 2);
}

.nwa-entry__meta {
  flex-direction: column;
  gap: var(--nwa-space-xs);
}

.nwa-glossary {
  max-width: none;
  padding: 36px 36px 0;
  background: var(--nwa-panel);
}

.nwa-podcast {
  margin-block-start: 0;
  padding: 0 36px 36px;
  border-block-start: 0;
  background: var(--nwa-panel);
}

@media (min-width: 60rem) {
  .nwa-entry {
    display: grid;
    grid-template-columns: minmax(0, var(--nwa-col-main)) minmax(0, var(--nwa-col-aside));
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--nwa-gap-cols);
    align-items: start;
  }

  .nwa-entry__header {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .nwa-entry__content {
    grid-column: 1;
    grid-row: 2 / 5;
    max-width: none;
  }

  .nwa-glossary {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0;
    padding-top: 81px;
  }

  .nwa-podcast {
    grid-column: 2;
    grid-row: 3;
  }
}

/* ---------- Przyciski platform w panelu - wzorzec z landingu 8838 ----------
 * Wartosci przepisane z .nwa-l-plat w meldunki-landing.css, zeby obie
 * powierzchnie wygladaly tak samo. Znaki wchodza przez ::before, wiec
 * szablon motywu zostaje nietkniety. Pliki serwuje ten sam host.
 * ODSTEPSTWO OD PROJEKTU: ramka Figmy ma w panelu same znaki, bez przyciskow.
 * -------------------------------------------------------------------- */

.nwa-podcast__list {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--nwa-space-xs);
}

.nwa-podcast__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  border: 1px solid var(--nwa-aside);
  border-radius: var(--nwa-radius);
  background: var(--nwa-surface);
  color: var(--nwa-ink);
  font-size: var(--nwa-body-s);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.nwa-podcast__link:hover,
.nwa-podcast__link:focus-visible {
  border-color: var(--nwa-brand);
}

.nwa-podcast__link::before {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background: center / contain no-repeat;
}

.nwa-podcast__link[href*="youtube"]::before {
  background-image: url("/wp-content/uploads/meldunki-lp/02-youtube.svg");
}

.nwa-podcast__link[href*="spotify"]::before {
  background-image: url("/wp-content/uploads/meldunki-lp/03-spotify.svg");
}

.nwa-podcast__link[href*="apple"]::before {
  background-image: url("/wp-content/uploads/meldunki-lp/04-apple-podcast.png");
}