/*
 * TheSybin — strona „Webinary” (`webinary`), faza LP: sekcje S1–S6 wg docs/TRESCI-MAPA.md §4.5 i §6.4 (dokument LP L366–L387), decyzja K7.
 * Język wizualny stron Technologia (ciemna sekcja zdjęcie | treść), Partnerzy i współpraca oraz E-booki: kontener 1300 px, padding 100/50 px,
 * rytm tła biała · ciemna · kremowa · biała · (kremowa — archiwum po pierwszym nagraniu) · biała · kremowa, zdjęcie r 20, odznaka C10, liście C20.
 * Komponenty (etykieta, nagłówek, przyciski, pola, `ts-notice`) — components.css; wydarzenie, formularz, tabela, zapowiedzi, archiwum i karty e-booków —
 * bloki wtyczek Thesybin Webinary i Thesybin Leady: tu wyłącznie układ sekcji i miejsce na blok, bez wnętrza bloków.
 * Znaczniki: patterns/webinary-{wstep,najblizszy,zapis,harmonogram,archiwum,zapowiedzi,polecane}.php. Odstępstwa: docs/odstepstwa/webinary-strona.md.
 * Progi: tablet ≤1024, telefon ≤767.
 */

/* ==========================================================================
   Wspólne: sekcje pełnej szerokości (także sekcja renderowana przez blok archiwum)
   ========================================================================== */

.ts-page-webinary .ts-page-content > .wp-block-post-content {
	padding-inline: 0;
}

.ts-page-webinary .wp-block-post-content > :is(.ts-webinary-section, .wp-block-thesybin-webinary-archiwum) {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 100px max(20px, calc((100% - 1280px) / 2));
	/* Obracana odznaka (C10) w trakcie ruchu nie poszerza strony (1.4.10) */
	overflow-x: clip;
}

body.ts-page-webinary :where(.ts-webinary-section, .ts-webinary-section [class*="ts-webinary-"]) > * {
	margin-block: 0;
}

.ts-page-webinary .ts-webinary-section .ts-heading em {
	font-weight: 400;
}

.ts-page-webinary .ts-webinary-section :where(figure.wp-block-image) {
	margin: 0;
}

/* Nagłówek | treść (S1, S3, S5) */
.ts-page-webinary .wp-block-post-content > :is(.ts-webinary-intro, .ts-webinary-schedule, .ts-webinary-upcoming) {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: 30px 60px;
}

.ts-page-webinary .wp-block-post-content > .ts-webinary-intro {
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	align-items: center;
}

@media (max-width: 1024px) {
	.ts-page-webinary .wp-block-post-content > :is(.ts-webinary-section, .wp-block-thesybin-webinary-archiwum) {
		padding-block: 50px;
	}

	.ts-page-webinary .wp-block-post-content > :is(.ts-webinary-intro, .ts-webinary-schedule, .ts-webinary-upcoming) {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}

/* ==========================================================================
   S1. Wstęp — nagłówek | zdanie ze złotą linią (biała)
   ========================================================================== */

.ts-page-webinary .ts-webinary-intro__lead {
	padding-left: 25px;
	border-left: 3px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--body-text);
	font-size: 18px;
	line-height: 1.7;
}

/* „na żywo.” w jednym wierszu: skrypt ts-reveal-chars dzieli nagłówek na słowa inline-block, między którymi
   twarda spacja nie blokuje łamania — „żywo.” zostawało samo w wierszu (768). */
.ts-page-webinary .ts-webinary-nowrap {
	white-space: nowrap;
}

@media (max-width: 767px) {
	.ts-page-webinary .ts-webinary-intro__lead {
		padding-left: 18px;
		font-size: 16px;
	}
}

/* ==========================================================================
   S2. Najbliższy webinar — ciemna z liśćmi: zdjęcie z odznaką | etykieta i blok wydarzenia
   ========================================================================== */

.ts-page-webinary .wp-block-post-content > .ts-webinary-next {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: center;
	gap: 40px 70px;
}

.ts-page-webinary .ts-webinary-next__media {
	position: relative;
	min-width: 0;
	padding: 30px 40px 0 0;
}

.ts-page-webinary .ts-webinary-next__photo {
	overflow: hidden;
	border-radius: var(--ts-radius-card);
}

.ts-page-webinary .ts-webinary-section .ts-webinary-next__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1.05;
	object-fit: cover;
}

.ts-page-webinary .ts-webinary-next__seal {
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	line-height: 0;
	pointer-events: none;
}

.ts-page-webinary .ts-webinary-next__content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	min-width: 0;
}

@media (max-width: 1024px) {
	.ts-page-webinary .wp-block-post-content > .ts-webinary-next {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.ts-page-webinary .ts-webinary-next__media {
		width: 100%;
		padding: 25px 30px 0 0;
	}

	.ts-page-webinary .ts-webinary-section .ts-webinary-next__photo img {
		aspect-ratio: 1 / 0.5;
	}
}

@media (max-width: 767px) {
	.ts-page-webinary .wp-block-post-content > .ts-webinary-next {
		gap: 30px;
	}

	.ts-page-webinary .ts-webinary-next__media {
		width: 100%;
		padding: 20px 20px 0 0;
	}

	.ts-page-webinary .ts-webinary-section .ts-webinary-next__photo img {
		aspect-ratio: 1 / 0.75;
	}
}

/* ==========================================================================
   S2b. Zapis na webinar — kremowa z liściem, biała ramka 860 px (formularz albo komunikat o zamkniętych zapisach)
   ========================================================================== */

.ts-page-webinary .ts-webinary-signup__card {
	box-sizing: border-box;
	max-width: 860px;
	margin-inline: auto;
	padding: 60px 50px 50px;
	border-radius: var(--ts-radius-card);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--ts-shadow-card);
}

/* Odstęp nagłówka bloku od formularza / komunikatu i nagłówek wyśrodkowany jak na stronie E-booki */
.ts-page-webinary .ts-webinary-signup__card .wp-block-thesybin-webinary-formularz-rejestracji {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.ts-page-webinary .ts-webinary-signup__card .wp-block-thesybin-webinary-formularz-rejestracji > :is(h2, h3, h4) {
	margin: 0;
	text-align: center;
}

@media (max-width: 1024px) {
	.ts-page-webinary .ts-webinary-signup__card {
		padding: 40px 30px 30px;
	}

	.ts-page-webinary .ts-webinary-signup__card .wp-block-thesybin-webinary-formularz-rejestracji {
		gap: 30px;
	}
}

@media (max-width: 767px) {
	.ts-page-webinary .ts-webinary-signup__card {
		padding: 30px 20px 20px;
	}

	.ts-page-webinary .ts-webinary-signup__card .wp-block-thesybin-webinary-formularz-rejestracji {
		gap: 20px;
	}

	.ts-page-webinary .ts-webinary-signup__card .wp-block-thesybin-webinary-formularz-rejestracji > :is(h2, h3, h4) {
		text-align: left;
	}
}

/* ==========================================================================
   S3. Harmonogram i S5. Zapowiedzi — nagłówek | tabela / zapowiedzi (biała)
   Dwie białe sekcje obok siebie (archiwum ukryte) czytają się jak jedna: bez podwójnego odstępu.
   ========================================================================== */

.ts-page-webinary .wp-block-post-content > .ts-webinary-schedule + .ts-webinary-upcoming {
	padding-top: 0;
}

/* ==========================================================================
   S4. Archiwum webinarów — sekcja z bloku (tylko po pierwszym nagraniu), kremowa
   ========================================================================== */

.ts-page-webinary .wp-block-post-content > .wp-block-thesybin-webinary-archiwum {
	display: flex;
	flex-direction: column;
	gap: 40px;
	background-color: var(--wp--preset--color--background);
}

.ts-page-webinary .wp-block-post-content > .wp-block-thesybin-webinary-archiwum > * {
	margin: 0;
}

@media (max-width: 1024px) {
	.ts-page-webinary .wp-block-post-content > .wp-block-thesybin-webinary-archiwum {
		gap: 30px;
	}
}

/* ==========================================================================
   S6. Polecane e-booki — nagłówek i karty poziome w kolumnie 1100 px (kremowa)
   ========================================================================== */

.ts-page-webinary .wp-block-post-content > .ts-webinary-ebooks {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.ts-page-webinary .ts-webinary-ebooks__title {
	text-align: center;
}

.ts-page-webinary .ts-webinary-ebooks__list {
	width: 100%;
	max-width: 1100px;
	margin-inline: auto;
}

@media (max-width: 1024px) {
	.ts-page-webinary .wp-block-post-content > .ts-webinary-ebooks {
		gap: 30px;
	}
}

@media (max-width: 767px) {
	.ts-page-webinary .wp-block-post-content > .ts-webinary-ebooks {
		gap: 20px;
	}

	.ts-page-webinary .ts-webinary-ebooks__title {
		text-align: left;
	}
}