/*
 * Thesybin Webinary — układ elementów bloków (klasy tsw-*) na tokenach motywu.
 * Komponenty motywu (ts-heading, ts-btn, ts-cta, ts-textbtn, ts-link-arrow, ts-notice, ts-field, ts-input, ts-err, ts-check, ts-sr)
 * nie są tu kopiowane ani nadpisywane (ARCHITEKTURA-WTYCZEK §0.2). Progi: ≤ 1024 px (tablet), ≤ 767 px (telefon).
 */

/* ---------- Szablon wpisu webinaru ---------- */

.tsw-szablon > .tsw-pokoj {
	box-sizing: border-box;
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding-inline: var(--ts-gutter, 20px);
}

/* ---------- Fakty (Prowadzenie, Kiedy, Czas trwania) ---------- */

.tsw-fakty {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 17px;
	line-height: 1.5;
}

.tsw-fakty__el {
	position: relative;
}

/* Ikona jest w `dt` (poprawny HTML grupy `dl`), wizualnie w lewej kolumnie obok etykiety i wartości. */
.tsw-fakty__el:has(.tsw-fakty__ikona) {
	min-height: 40px;
	padding-inline-start: 52px;
}

.tsw-fakty__ikona {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
}

.tsw-fakty__ikona svg {
	width: 20px;
	height: 20px;
}

.tsw-fakty dt {
	margin: 0;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.tsw-fakty dd {
	margin: 0;
	overflow-wrap: anywhere;
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .tsw-fakty dt {
	color: var(--wp--preset--color--white);
}

/* ---------- Najbliższy webinar ---------- */

.tsw-najblizszy {
	display: grid;
	gap: 24px;
	min-width: 0;
}

.tsw-najblizszy > * {
	margin: 0;
}

.tsw-najblizszy__opis > p {
	margin: 0 0 12px;
}

.tsw-najblizszy__opis > p:last-child {
	margin-bottom: 0;
}

.tsw-najblizszy__akcje {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin-top: 6px;
}

.tsw-najblizszy__hint {
	flex-basis: 100%;
	margin: 0;
}

/* Etykieta sekcji renderowana przez blok (atrybut `etykieta`): odstęp do tytułu 15 px — jak etykieta będąca treścią strony. */
.tsw-najblizszy__etykieta {
	margin-bottom: -9px;
}

/* Brak najbliższego terminu: tytuł ostatniego webinaru jest linkiem w kolorze nagłówka (podkreślenie odróżnia link — 1.4.1). */
.tsw-najblizszy__tytul a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.12em;
}

.tsw-najblizszy__tytul a:is(:hover, :focus-visible) {
	text-decoration-thickness: 2px;
}

:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .tsw-najblizszy__wiecej,
:is(.ts-on-dark, .ts-surface-dark, .has-primary-background-color) .tsw-najblizszy__wiecej:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--white);
}

/* Przycisk nieaktywny (zapisy zamknięte) — fokusowalny, bez kółka ze strzałką (ts-btn--plain) i bez efektu najechania;
   tekst #4E5451 na #D9D4CB = 5.25:1; fokus z klawiatury — obrys (wypełnienie fokusu motywu oznaczałoby aktywny przycisk). */
.ts-btn.ts-btn--highlighted.tsw-btn-nieaktywny[aria-disabled="true"],
.ts-btn.ts-btn--highlighted.tsw-btn-nieaktywny[aria-disabled="true"]:is(:hover, :focus-visible) {
	background-color: var(--ts-disabled-bg, #D9D4CB);
	color: var(--wp--preset--color--body-text);
	cursor: not-allowed;
}

.ts-btn.ts-btn--highlighted.tsw-btn-nieaktywny[aria-disabled="true"]::after {
	content: none;
}

.ts-btn.ts-btn--highlighted.tsw-btn-nieaktywny[aria-disabled="true"]:focus-visible {
	outline: 2px solid var(--ts-focus);
	outline-offset: 3px;
}

/* ---------- Powiadomienie o kolejnym webinarze ---------- */

.tsw-powiadomienie__wstep {
	margin: 0 0 24px;
	font-size: 17px;
	line-height: 1.6;
}

.tsw-zamkniete + .tsw-powiadomienie__tytul {
	margin: 0;
	font-size: 24px;
	line-height: 1.3;
}

/* ---------- Harmonogram (tabela jak Technologia S7) ---------- */

.tsw-harmonogram {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	overflow-x: auto;
	border: 1px solid var(--ts-cream-line, #E8E0CE);
	border-radius: 16px;
	background-color: var(--wp--preset--color--white);
}

.tsw-harmonogram:focus-visible {
	outline: 2px solid var(--ts-focus);
	outline-offset: 3px;
}

.tsw-harmonogram__tabela {
	width: 100%;
	min-width: 280px;
	margin: 0;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 16px;
	line-height: 1.55;
}

.tsw-harmonogram__tabela :is(th, td) {
	padding: 16px 20px;
	border: 0;
	text-align: left;
	vertical-align: top;
}

.tsw-harmonogram__tabela thead th {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: 15px;
	font-weight: 600;
}

.tsw-harmonogram__tabela tbody tr + tr > * {
	border-top: 1px solid #EEE7D6;
}

.tsw-harmonogram__tabela tbody td {
	color: var(--wp--preset--color--body-text);
}

.tsw-harmonogram__tabela tbody td:first-child {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

@media (max-width: 767px) {
	.tsw-harmonogram__tabela :is(th, td) {
		padding: 12px 12px;
		font-size: 15px;
	}
}

/* ---------- Karty (zapowiedzi, archiwum) ---------- */

.tsw-karty {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsw-karta > article {
	display: grid;
	gap: 16px;
	height: 100%;
	box-sizing: border-box;
	padding: 30px;
	border: 1px solid var(--ts-divider);
	border-radius: var(--ts-radius-card, 20px);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--ts-shadow-card);
}

.tsw-karta__tytul {
	margin: 0;
	font-size: 20px;
	line-height: 1.35;
}

.tsw-karta__tytul a {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.tsw-karta__tytul a:is(:hover, :focus-visible) {
	text-decoration-thickness: 2px;
}

.tsw-karta__materialy {
	margin: 0;
	color: var(--ts-muted);
	font-size: 15px;
}

.tsw-archiwum {
	display: grid;
	gap: 40px;
}

.tsw-archiwum > * {
	margin: 0;
}

.tsw-zapowiedzi__brak {
	margin: 0;
}

/* ---------- Kalendarz ---------- */

.tsw-kalendarz {
	margin: 0;
}

/* ---------- Pokój ---------- */

.tsw-pokoj {
	display: grid;
	gap: 50px;
	min-width: 0;
	font-family: var(--wp--preset--font-family--sans);
	color: var(--wp--preset--color--body-text);
}

.tsw-pokoj > * {
	margin: 0;
	min-width: 0;
}

.tsw-pokoj--blok {
	gap: 20px;
}

.tsw-pokoj__info {
	display: grid;
	gap: 24px;
	max-width: 880px;
}

.tsw-pokoj__info > * {
	margin: 0;
}

.tsw-pokoj__opis > p {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.7;
}

.tsw-pokoj__opis > p:last-child {
	margin-bottom: 0;
}

/* Po webinarze: informacja z linkami (najbliższy webinar, nagranie, archiwum); przed webinarem: potwierdzenie dostępu. */
.tsw-pokoj__po,
.tsw-pokoj__zapisano {
	max-width: 880px;
}

.tsw-pokoj__po-linki {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.tsw-pokoj__zapisano > p + p {
	margin-top: 10px;
}

.tsw-pokoj__nagranie:focus {
	outline: none;
}

.tsw-pokoj__sekcja {
	display: grid;
	gap: 30px;
}

.tsw-pokoj__sekcja > * {
	margin: 0;
}

.tsw-pokoj__zapis,
.tsw-pokoj__link {
	display: grid;
	gap: 24px;
	box-sizing: border-box;
	padding: 40px;
	border-radius: var(--ts-radius-card, 20px);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--ts-shadow-card);
}

.tsw-pokoj__zapis > *,
.tsw-pokoj__link > * {
	margin: 0;
}

.tsw-link-ponownie__tytul {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: 22px;
	line-height: 1.3;
}

.tsw-pokoj__scena {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
	align-items: start;
}

@media (min-width: 1025px) {
	.tsw-pokoj__scena:not(.tsw-pokoj__scena--bez-czatu) {
		grid-template-columns: minmax(0, 1.75fr) minmax(340px, 1fr);
	}

	.tsw-pokoj__scena:has(> .tsw-pokoj__transmisja[hidden]) {
		grid-template-columns: minmax(0, 1fr);
	}
}

.tsw-pokoj__prywatnosc {
	max-width: 880px;
	color: var(--ts-muted);
	font-size: 14px;
	line-height: 1.5;
}

.tsw-pokoj__prywatnosc a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

/* ---------- Transmisja / nagranie ---------- */

.tsw-transmisja {
	display: grid;
	gap: 12px;
}

.tsw-transmisja > * {
	margin: 0;
}

.tsw-transmisja__plansza,
.tsw-transmisja__ramka {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--ts-radius-card, 20px);
	background-color: var(--wp--preset--color--on-accent);
}

.tsw-transmisja__plansza {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 20px;
	padding: 24px;
	color: var(--wp--preset--color--white);
	text-align: center;
	--ts-focus: var(--wp--preset--color--accent-on-dark);
}

.tsw-transmisja__plansza > * {
	margin: 0;
}

.tsw-transmisja__info {
	max-width: 36ch;
	font-size: 17px;
	line-height: 1.5;
}

.tsw-transmisja__wkrotce {
	max-width: 44ch;
	font-size: 16px;
	line-height: 1.5;
}

.tsw-transmisja__ramka iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.tsw-transmisja__ramka:focus-within {
	outline: 2px solid var(--ts-focus);
	outline-offset: 3px;
}

@media (max-width: 767px) {
	.tsw-transmisja__plansza {
		aspect-ratio: auto;
		min-height: 220px;
	}
}

.tsw-nagranie {
	display: grid;
	gap: 24px;
	max-width: 960px;
}

.tsw-nagranie > * {
	margin: 0;
}

.tsw-nagranie__wideo {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--ts-radius-card, 20px);
	background-color: var(--wp--preset--color--on-accent);
}

.tsw-nagranie__pliki {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsw-transkrypcja {
	display: grid;
	gap: 20px;
	max-width: 880px;
}

.tsw-transkrypcja > * {
	margin: 0;
}

.tsw-transkrypcja__tresc > :is(p, h3) {
	margin: 0 0 14px;
	line-height: 1.7;
}

.tsw-transkrypcja__tresc > h3 {
	color: var(--wp--preset--color--primary);
	font-size: 20px;
}

/* ---------- Panele czatu, pytań i moderacji ---------- */

:is(.tsw-czat, .tsw-pytania, .tsw-moderacja) {
	display: grid;
	gap: 16px;
	box-sizing: border-box;
	min-width: 0;
	padding: 24px;
	border: 1px solid var(--ts-divider);
	border-radius: var(--ts-radius-card, 20px);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--ts-shadow-card);
}

:is(.tsw-czat, .tsw-pytania, .tsw-moderacja) > * {
	margin: 0;
}

.tsw-panel__tytul {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

@media (max-width: 767px) {
	:is(.tsw-czat, .tsw-pytania, .tsw-moderacja) {
		padding: 18px 14px;
	}
}

.tsw-czat__narzedzia {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 20px;
}

.tsw-czat__odczyt {
	margin: 0;
}

.tsw-czat__lista {
	box-sizing: border-box;
	height: clamp(260px, 42vh, 460px);
	margin: 0;
	padding: 4px 6px 4px 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	border-block: 1px solid var(--ts-line);
}

.tsw-czat__wiadomosci {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsw-czat__lista:focus-visible {
	outline: 2px solid var(--ts-focus);
	outline-offset: 2px;
}

.tsw-msg {
	padding: 10px 2px;
	border-bottom: 1px solid var(--ts-line);
	overflow-wrap: anywhere;
}

.tsw-msg:last-child {
	border-bottom: 0;
}

.tsw-msg > p {
	margin: 0;
}

.tsw-msg__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	font-size: 14px;
	line-height: 1.4;
}

.tsw-msg__autor {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.tsw-msg__rola,
.tsw-msg__stan,
.tsw-pytanie__stan {
	display: inline-block;
	padding: 1px 8px;
	border-radius: var(--ts-radius-pill, 100px);
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--primary);
	font-size: 13px;
	font-weight: 600;
}

.tsw-msg time {
	color: var(--ts-muted);
}

.tsw-msg__tresc {
	margin-top: 2px !important;
	font-size: 15px;
	line-height: 1.55;
	white-space: pre-line;
}

.tsw-msg--wlasna {
	background-color: #FBF8F1;
}

.tsw-msg--oczekuje,
.tsw-msg--ukryta {
	opacity: 1;
	background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(39, 74, 70, 0.04) 10px 20px);
}

.tsw-czat__nowe {
	justify-self: start;
}

.tsw-czat__zamkniety {
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.tsw-czat__form,
.tsw-pytania__form {
	display: grid;
	gap: 12px;
}

.tsw-czat__form .ts-field,
.tsw-pytania__form .ts-field {
	margin: 0;
}

.tsw-czat__form textarea.ts-input,
.tsw-pytania__form textarea.ts-input {
	min-height: 72px;
	padding-block: 12px;
	resize: vertical;
}

.tsw-czat__form .ts-cta,
.tsw-pytania__form .ts-cta {
	justify-self: start;
}

/* „Zadaj pytanie” — szerokość według tekstu w szerokiej sekcji pytań (docs/odstepstwa/webinary.md); telefon — pełna szerokość. */
.tsw-pytania__form .tsw-pytania__wyslij {
	min-width: 220px;
}

@media (max-width: 767px) {
	.tsw-pytania__form .tsw-pytania__wyslij {
		justify-self: stretch;
		width: 100%;
	}
}

.tsw-czat__form .ts-hint + .ts-hint {
	margin-top: 0;
}

/* Pytania */

.tsw-pytania__narzedzia {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.tsw-pytania__sort {
	min-width: min(100%, 260px);
	margin: 0;
}

.tsw-pytania__lista {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tsw-pytanie {
	display: grid;
	gap: 6px;
	padding: 14px 16px;
	border: 1px solid var(--ts-line);
	border-radius: 12px;
	overflow-wrap: anywhere;
}

.tsw-pytanie > * {
	margin: 0;
}

.tsw-pytanie__tresc {
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}

.tsw-pytanie__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	font-size: 14px;
}

.tsw-pytanie__glos {
	justify-self: start;
}

.tsw-pytanie__glos[aria-pressed="true"] {
	text-decoration-thickness: 2px;
}

.tsw-pytanie__glos[aria-pressed="true"]::before {
	content: "✓";
	font-weight: 700;
}

.tsw-pytanie--odpowiedziane {
	background-color: #F4F8F5;
}

.tsw-pytanie--nowe,
.tsw-pytanie--ukryte {
	background-image: repeating-linear-gradient(135deg, transparent 0 10px, rgba(39, 74, 70, 0.04) 10px 20px);
}

/* Moderacja */

.tsw-akcje {
	display: flex;
	flex-wrap: wrap;
	gap: 0 14px;
	margin-top: 4px;
}

.tsw-akcje .ts-textbtn {
	min-height: 32px;
	font-size: 14px;
}

.tsw-moderacja__ustawienia {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: 12px 30px;
}

.tsw-moderacja__ustawienia .ts-check {
	margin: 0;
}

.tsw-moderacja__wolny {
	width: min(100%, 280px);
	margin: 0;
}

/* Instrukcja w edytorze */

.tsw-instrukcja {
	padding: 16px 20px;
	border: 1px dashed var(--ts-field, #898C8C);
	border-radius: 12px;
	background-color: var(--wp--preset--color--background);
	font-size: 14px;
}

.tsw-instrukcja p {
	margin: 0;
}

/* Formularz zapisu w sekcji zapisu */

.tsw-rejestracja__tytul {
	margin: 0;
}

.tsw-zamkniete {
	margin: 0;
}

@media (max-width: 767px) {
	.tsw-pokoj {
		gap: 36px;
	}

	.tsw-pokoj__zapis,
	.tsw-pokoj__link {
		padding: 24px 16px;
	}

	.tsw-fakty {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsw-czat__lista {
		scroll-behavior: auto;
	}
}

/* ---------- Bez JavaScriptu ----------
 * Czat, pytania, poparcia i odtwarzacz działają tylko ze skryptem: sterowanie jest ukryte, treść wiadomości i pytań,
 * transkrypcja oraz link „Otwórz na YouTube” zostają (wzór motywu: html:not(.ts-js), .ts-nojs). Klasa `ts-js` pochodzi ze skryptu
 * motywu, więc reguły nie dotyczą panelu (`.wp-admin` — edytor bez ramki); tam sygnałem jest `body.no-js` (`admin.css`, W-02). */
.tsw-nojs {
	display: none;
}

html:not(.ts-js) body:not(.editor-styles-wrapper, .wp-admin) .tsw-nojs {
	display: block;
}

html:not(.ts-js) body:not(.editor-styles-wrapper, .wp-admin) :is(.tsw-czat__narzedzia, .tsw-czat__form, .tsw-pytania__narzedzia, .tsw-pytania__form, .tsw-pytanie__glos, .tsw-moderacja__ustawienia, .tsw-transmisja [data-tsw-wlacz]) {
	display: none !important;
}