/*
 * THESYBIN — strona główna (post 12, templates/front-page.html). Zakres: .ts-page-home.
 * Treść: dokument LP (docs/TRESCI-MAPA.md §4.1, sekcje S01–S14), wzorce patterns/home-*.php.
 * Układy i wymiary z dawnej strony głównej (design-ref/spec/home.md, pomiary inspect-{1440,768,390}.json) — hero, „O TheSybin”,
 * „Dlaczego”, „Technologia”, „Najważniejsze informacje”, FAQ, CTA — przeniesione na nowe sekcje.
 * Komponenty (etykieta, nagłówek, przyciski, icon box, karty, akordeon, odznaki, listy) — components.css;
 * tu wyłącznie siatka sekcji, wymiary zdjęć i nadpisania rozmiarów specyficzne dla strony.
 *
 * Siatka jak Elementor: sekcja padding 10 px w poziomie, kontener 1300 px, kolumny z własnym paddingiem 10 px
 * (treść od x = 80 przy 1440, x = 20 na tablecie i telefonie). Tablet ≤1024, telefon ≤767.
 * Rytm teł (mapa §4.1): S01 ciemna · S02 kremowa · S03 biała · S04 kremowa · S05 ciemna · S06 biała · S07 kremowa · S08 ciemna ·
 * S09 biała · S10 kremowa · S11 biała · S12 ciemna · S13 kremowa · S14 biała.
 */

/* ==========================================================================
   Wspólne
   ========================================================================== */

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

/* Grupy sekcji układa CSS (flex/gap) — zerujemy odstępy „flow” rdzenia (specyficzność niższa niż marginesy komponentów) */
body.ts-page-home :where(.wp-block-post-content .wp-block-group) > * {
	margin-block: 0;
}

.ts-page-home .wp-block-post-content > section {
	box-sizing: border-box;
	padding: 100px 10px;
}

.ts-page-home .ts-home__inner {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	max-width: 1300px;
	margin-inline: auto;
}

.ts-page-home .ts-home__inner--stack {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
}

.ts-page-home .ts-home__inner--stack > *,
.ts-page-home .ts-home__col {
	box-sizing: border-box;
	padding: 10px;
}

.ts-page-home .ts-home__col {
	position: relative;
	min-width: 0;
}

.ts-page-home :is(.ts-home__col, .ts-home__head-text, .ts-home-why__content) > .ts-heading em {
	font-weight: 400;
}

/* Obrazy w sekcjach: blok, bez marginesów figure */
.ts-page-home :where(.wp-block-post-content figure.wp-block-image) {
	margin: 0;
}

.ts-page-home :where(.wp-block-post-content figure.wp-block-image) img {
	display: block;
}

/*
 * Zdjęcia laboratoryjne (16:9) w polach o innych proporcjach — obraz o szerokości kadru, przycina go figure.
 * WordPress daje leniwym obrazom sizes="auto", więc przeglądarka wybiera plik z srcset według szerokości pola,
 * a nie kadru (zdjęcie rozmyte przy DPR 1). Obraz ma więc szerokość kadru (proporcje pliku, środek jak object-position 50%).
 */
.ts-page-home .wp-block-post-content :is(.ts-home-why__photo, .ts-home-usage__img, .ts-home-tech__img1, .ts-home-circular__img, .ts-home-platform__img, .ts-home-faq__img, .ts-home-course__img) {
	position: relative;
	overflow: hidden;
	border-radius: var(--ts-radius-card);
}

.ts-page-home .wp-block-post-content :is(.ts-home-why__photo, .ts-home-usage__img, .ts-home-tech__img1, .ts-home-circular__img, .ts-home-platform__img, .ts-home-faq__img, .ts-home-course__img) img {
	position: absolute;
	top: 0;
	left: 50%;
	width: auto;
	min-width: 100%;
	max-width: none;
	height: 100%;
	min-height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transform: translateX(-50%);
}

/*
 * Pliki z jednolitymi pasami przy krawędzi (pomiar wierszy pikseli pliku 1024×576): 6299 — biały pas u góry 7 px (1,2 %),
 * 6301 — biały pas u góry 2 px (0,35 %), 6285 — biały pas u góry 11 px (1,9 %) i czarny u dołu 7 px (1,2 %).
 * Kadr powiększony i przesunięty w górę, żeby pasy nie były widoczne na krawędzi pola (jak 6295 w S13).
 */
.ts-page-home .wp-block-post-content .ts-home-tech__img1 img {
	top: -1.6%;
	height: 103%;
	min-height: 103%;
}

.ts-page-home .wp-block-post-content .ts-home-platform__img img {
	top: -0.8%;
	height: 101.5%;
	min-height: 101.5%;
}

.ts-page-home .wp-block-post-content .ts-home-faq__img img {
	top: -2.4%;
	height: 105%;
	min-height: 105%;
}

/* Odznaki obrotowe: pozycja na grupie-opakowaniu (komponent ma własny transform) */
.ts-page-home .ts-home__badge {
	position: absolute;
	z-index: 1;
	line-height: 0;
}

/* Nagłówek sekcji z akcją po prawej (S06, S08, S14) */
.ts-page-home .ts-home__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.ts-page-home .ts-home__head-text {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 50%;
	padding-right: 30px;
}

.ts-page-home .ts-home__head-action {
	box-sizing: border-box;
	display: flex;
	justify-content: flex-end;
	width: 50%;
}

/* Nota kursywą (przypisy LP) */
.ts-page-home :is(.ts-home-about__note, .ts-home-why__note, .ts-home-facts__note) {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 18px;
	font-style: italic;
	line-height: 1.5;
}

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

	.ts-page-home .ts-home__inner:not(.ts-home__inner--stack) {
		justify-content: center;
		gap: 10px;
	}

	.ts-page-home .ts-home__head {
		gap: 15px;
	}

	.ts-page-home .ts-home__head-text {
		gap: 10px;
		width: 100%;
		padding-right: 0;
	}

	.ts-page-home .ts-home__head-action {
		justify-content: flex-start;
		width: 100%;
	}

	.ts-page-home :is(.ts-home-about__note, .ts-home-why__note, .ts-home-facts__note) {
		font-size: 16px;
	}
}

/* ==========================================================================
   S01. Hero — zdjęcie na całą sekcję (D15), nakładka zieleni 80 %, nagłówek leży na sekcji
   ========================================================================== */

.ts-page-home .wp-block-post-content > section.ts-home-hero {
	position: relative;
	isolation: isolate;
	padding: 200px 10px 100px;
	background-color: var(--wp--preset--color--primary);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.ts-home-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-color: var(--wp--preset--color--primary);
	opacity: 0.8;
	pointer-events: none;
}

.ts-page-home .ts-home-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	width: 50%;
}

.ts-page-home .ts-home-hero__content > .ts-home-hero__title {
	margin-bottom: 5px;
}

.ts-page-home .ts-home-hero__lead {
	color: var(--wp--preset--color--white);
	font-size: 18px;
	line-height: 1.6;
}

.ts-page-home .ts-home-hero__lead--strong {
	font-weight: 600;
}

.ts-page-home .ts-home-hero__content > .ts-home-hero__lead + .ts-home-hero__lead {
	margin-top: -10px;
}

.ts-page-home .ts-home-hero__motto {
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	font-style: italic;
	line-height: 1.4;
}

/* Nazwa „One Health” nie jest dzielona między wiersze (motto S01, nagłówek S12) — przy 390 px „One” zostawało samo na końcu wiersza. */
.ts-page-home :is(.ts-home-hero__motto, .ts-home-cta__title) bdo[lang="en"] {
	white-space: nowrap;
}

/*
 * Wejście akapitu hero (fadeInUp, motion.css) startuje od krycia 0.01 zamiast 0: tekst jest malowany od pierwszej klatki,
 * więc przy 390 px LCP nie czeka na koniec animacji 1,25 s. Różnica wizualna niedostrzegalna, ruch i czasy bez zmian (D4).
 */
@media (prefers-reduced-motion: no-preference) {
	html.ts-motion:not(.ts-reveal-done) .ts-page-home .ts-home-hero__lead.ts-reveal:not(.is-revealed) {
		opacity: 0.01;
	}
}

.ts-page-home .ts-home-hero__content > .ts-home-hero__actions {
	margin-top: 20px;
}

.ts-page-home .ts-home-hero__actions .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 10px;
}

.ts-page-home .ts-home-hero__media {
	width: 50%;
	padding: 10px 55px 10px 75px;
}

.ts-page-home .ts-home-hero__img {
	text-align: center;
}

.ts-page-home .wp-block-post-content .ts-home-hero__img img {
	display: inline-block;
	width: 99%;
	max-width: 95%;
	height: 465px;
	object-fit: cover;
	vertical-align: top;
}

.ts-page-home .ts-home-hero__badge {
	top: 10px;
	left: 84px;
}

@media (max-width: 1024px) {
	.ts-page-home .wp-block-post-content > section.ts-home-hero {
		padding: 150px 10px 60px;
	}

	.ts-page-home .ts-home-hero__content {
		gap: 10px;
		width: 100%;
	}

	.ts-page-home .ts-home-hero__content > .ts-home-hero__title {
		margin-bottom: 0;
	}

	.ts-page-home .ts-home-hero__lead {
		font-size: 16px;
	}

	.ts-page-home .ts-home-hero__content > .ts-home-hero__lead + .ts-home-hero__lead {
		margin-top: -5px;
	}

	.ts-page-home .ts-home-hero__motto {
		font-size: 20px;
	}

	.ts-page-home .ts-home-hero__content > .ts-home-hero__actions {
		margin-top: 15px;
	}

	.ts-page-home .ts-home-hero__media {
		width: 62%;
		padding: 10px;
	}

	.ts-page-home .ts-home-hero__badge {
		left: 10px;
	}
}

@media (max-width: 767px) {
	.ts-page-home .ts-home-hero__motto {
		font-size: 18px;
	}

	.ts-page-home .ts-home-hero__media {
		width: 100%;
	}
}

/* ==========================================================================
   S02. THESYBIN — zdjęcie z odznaką | treść, karta faktu i lista
   ========================================================================== */

.ts-page-home .ts-home-about__media {
	width: 50%;
	padding: 10px 80px 10px 10px;
}

.ts-page-home .wp-block-post-content .ts-home-about__img img {
	width: 75%;
	max-width: 77%;
	height: 500px;
	object-fit: cover;
}

.ts-page-home .ts-home-about__badge {
	top: 10px;
	right: 80px;
}

.ts-page-home .ts-home-about__content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 50%;
}

/* Nagłówek LP to pełne zdanie (122 znaki) — mniejszy stopień niż 46 px komponentu, żeby nie zajmował 6 wierszy */
.ts-page-home .ts-home-about__content > .ts-home-about__title.ts-heading {
	font-size: 40px;
}

/* Karta faktu pierwsza w DOM (kolejność LP: porcja → lista), na desktopie po prawej */
.ts-page-home .ts-home-about__content > .ts-home-about__row {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 30px;
	margin-top: 25px;
}

.ts-page-home .ts-home-about__lead {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: calc(60% - 15px);
}

.ts-page-home .ts-home-about__content > .ts-home-about__action {
	margin-top: 30px;
}

.ts-page-home .ts-home-about__list > li::before {
	top: 5px;
}

.ts-page-home .ts-home-about__card {
	width: calc(40% - 15px);
}

.ts-page-home .ts-home-about__fact {
	color: var(--wp--preset--color--primary);
	font-size: 18px;
	line-height: 1.4;
}

@media (max-width: 1024px) {
	.ts-page-home .ts-home-about__media {
		width: 60%;
		padding: 10px;
	}

	.ts-page-home .ts-home-about__badge {
		right: 10px;
	}

	.ts-page-home .ts-home-about__content {
		gap: 10px;
		width: 100%;
	}

	.ts-page-home .ts-home-about__content > .ts-home-about__title.ts-heading {
		font-size: 34px;
	}

	.ts-page-home .ts-home-about__content > .ts-home-about__row {
		margin-top: 20px;
	}

	.ts-page-home .ts-home-about__content > .ts-home-about__action {
		margin-top: 20px;
	}
}

@media (max-width: 767px) {
	.ts-page-home .ts-home-about__content > .ts-home-about__title.ts-heading {
		font-size: 26px;
	}

	.ts-page-home .ts-home-about__media,
	.ts-page-home .ts-home-about__lead,
	.ts-page-home .ts-home-about__card {
		width: 100%;
	}

	.ts-page-home .ts-home-about__content > .ts-home-about__row {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}
}

/* ==========================================================================
   S03 / S07. Kto powinien sięgać · Własność intelektualna — pełna szerokość, zdjęcie do prawej krawędzi okna
   ========================================================================== */

.ts-page-home .wp-block-post-content > section.ts-home-why {
	display: flex;
	flex-wrap: wrap;
	padding: 0 0 0 max(0px, calc((100% - 1300px) / 2 + 10px));
	background-color: var(--wp--preset--color--white);
}

.ts-page-home .wp-block-post-content > section.ts-home-why.ts-home-ip {
	background-color: transparent;
}

.ts-page-home .ts-home-why__content {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 52%;
	padding: 100px 120px 100px 0;
}

.ts-page-home .ts-home-why__content > .ts-home-why__title {
	margin-bottom: 5px;
}

.ts-page-home .ts-home-why__content > .ts-home-why__strong {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.ts-page-home .ts-home-why__content > .ts-home-why__action {
	margin-top: 15px;
}

.ts-page-home .ts-home-why__content > .ts-home-why__patent {
	display: flex;
	align-items: center;
	margin: 10px 0;
	padding: 30px;
	border-radius: var(--ts-radius-card);
	background-color: var(--wp--preset--color--white);
}

.ts-page-home .ts-home-why__badge {
	flex: none;
	width: 120px;
	line-height: 0;
}

.ts-page-home .ts-home-why__patent > .ts-home-why__patents {
	box-sizing: border-box;
	width: calc(100% - 120px);
	padding-left: 40px;
	color: var(--wp--preset--color--primary);
	font-size: 18px;
	line-height: 1.6;
}

.ts-page-home .ts-home-why__media {
	position: relative;
	width: 48%;
}

.ts-page-home .wp-block-post-content .ts-home-why__photo {
	height: 100%;
	min-height: 520px;
	border-radius: 0;
}

@media (min-width: 1025px) and (max-width: 1300px) {
	.ts-page-home .ts-home-why__content {
		padding: 60px 60px 60px 20px;
	}
}

@media (max-width: 1024px) {
	.ts-page-home .wp-block-post-content > section.ts-home-why {
		padding: 0;
	}

	.ts-page-home .ts-home-why__content {
		gap: 10px;
		width: 100%;
		padding: 50px 20px;
	}

	.ts-page-home .ts-home-why__content > .ts-home-why__title {
		margin-bottom: 0;
	}

	.ts-page-home .ts-home-why__content > .ts-home-why__patent {
		padding: 20px;
	}

	.ts-page-home .ts-home-why__badge {
		width: 100px;
	}

	.ts-page-home .ts-home-why__patent > .ts-home-why__patents {
		width: calc(100% - 100px);
		padding-left: 20px;
		font-size: 16px;
	}

	.ts-page-home .ts-home-why__media {
		width: 100%;
	}

	.ts-page-home .wp-block-post-content .ts-home-why__photo {
		height: auto;
		min-height: 0;
		aspect-ratio: 1 / 0.5;
	}
}

@media (max-width: 767px) {
	.ts-page-home .ts-home-why__content > .ts-home-why__patent {
		flex-wrap: wrap;
		gap: 15px;
	}

	.ts-page-home .ts-home-why__badge {
		width: 90px;
	}

	.ts-page-home .ts-home-why__patent > .ts-home-why__patents {
		width: 100%;
		padding-left: 0;
	}

	.ts-page-home .wp-block-post-content .ts-home-why__photo {
		aspect-ratio: 1 / 0.75;
	}
}

/* ==========================================================================
   S04. Zaczynamy od mikroorganizmu — treść z listą w dwóch kolumnach | zdjęcie
   ========================================================================== */

.ts-page-home .ts-home-usage__content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 58%;
	padding: 10px 60px 10px 10px;
}

.ts-page-home .ts-home-usage__content > .ts-home-usage__text {
	margin-top: 10px;
	font-size: 18px;
	line-height: 1.6;
}

.ts-page-home .ts-home-usage__content > .ts-home-usage__list {
	margin-top: 15px;
	padding-top: 30px;
	border-top: 1px solid var(--ts-divider);
}

.ts-page-home .ts-home-usage__media {
	width: 42%;
}

.ts-page-home .wp-block-post-content .ts-home-usage__img {
	aspect-ratio: 1 / 0.8;
}

@media (max-width: 1024px) {
	.ts-page-home .ts-home-usage__content {
		gap: 10px;
		width: 100%;
		padding: 10px;
	}

	.ts-page-home .ts-home-usage__content > .ts-home-usage__text {
		font-size: 16px;
	}

	.ts-page-home .ts-home-usage__content > .ts-home-usage__list {
		padding-top: 20px;
	}

	.ts-page-home .ts-home-usage__media {
		width: 100%;
	}

	.ts-page-home .wp-block-post-content .ts-home-usage__img {
		aspect-ratio: 1 / 0.5;
	}
}

@media (max-width: 767px) {
	.ts-page-home .wp-block-post-content .ts-home-usage__img {
		aspect-ratio: 1 / 0.75;
	}
}

/* ==========================================================================
   S05. Od szczepu do produktu — ciemna sekcja, nachodzące zdjęcia, etapy
   ========================================================================== */

.ts-page-home .ts-home-tech__media {
	display: flex;
	flex-direction: column;
	width: 49%;
	padding: 10px 20px 10px 10px;
}

.ts-page-home .wp-block-post-content .ts-home-tech__img1 {
	margin-right: 50px;
	aspect-ratio: 1 / 0.73;
}

.ts-page-home .wp-block-post-content .ts-home-tech__img2 {
	position: relative;
	z-index: 1;
	align-self: flex-end;
	width: 410px;
	max-width: 80%;
	margin-top: -90px;
	overflow: hidden;
	border: 8px solid var(--wp--preset--color--primary);
	border-radius: calc(var(--ts-radius-card) + 8px);
}

.ts-page-home .wp-block-post-content .ts-home-tech__img2 img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 0.62;
	border-radius: var(--ts-radius-card);
	object-fit: cover;
}

.ts-page-home .ts-home-tech__badge {
	z-index: 2;
	bottom: 50px;
	left: 60px;
}

.ts-page-home .ts-home-tech__content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 51%;
	padding: 10px 10px 10px 40px;
}

.ts-page-home .ts-home-tech__content > .ts-home-tech__steps {
	margin-top: 25px;
}

/* Lista etapów: numer w medalionie (dekoracja — kolejność niesie <ol>), strzałka ↓ między etapami (CSS) */
.ts-page-home .ts-home-steps {
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-page-home .ts-home-steps__item {
	position: relative;
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	column-gap: 25px;
	align-items: start;
	margin: 0;
}

.ts-page-home .ts-home-steps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 26px;
	line-height: 1;
}

.ts-page-home .ts-home-steps__item:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 68px;
	bottom: -22px;
	left: 29.5px;
	width: 1px;
	background-color: rgba(255, 255, 255, 0.35);
}

.ts-page-home .ts-home-steps__item:not(:last-child)::after {
	content: "";
	position: absolute;
	bottom: -21px;
	left: 26px;
	width: 7px;
	height: 7px;
	border-right: 1px solid rgba(255, 255, 255, 0.6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	transform: rotate(45deg);
}

.ts-page-home .ts-home-steps__body {
	padding-top: 6px;
}

.ts-page-home .ts-home-steps__title {
	margin: 0 0 6px;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.ts-page-home .ts-home-steps__body > p {
	margin: 0;
	color: var(--wp--preset--color--white);
	line-height: 1.6;
}

.ts-page-home .ts-home-tech__content > .ts-home-tech__note {
	margin-top: 20px;
	padding-top: 25px;
	border-top: 1px solid var(--ts-divider-dark);
	color: var(--wp--preset--color--accent-on-dark);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 20px;
	font-style: italic;
	line-height: 1.4;
}

.ts-page-home .ts-home-tech__content > .ts-home-tech__action {
	margin-top: 15px;
}

@media (max-width: 1024px) {
	.ts-page-home .ts-home-tech__media {
		width: 77%;
		padding: 10px;
	}

	.ts-page-home .ts-home-tech__content {
		gap: 10px;
		width: 100%;
		padding: 10px;
	}

	.ts-page-home .ts-home-tech__content > .ts-home-tech__steps {
		margin-top: 20px;
	}

	.ts-page-home .ts-home-steps {
		gap: 25px;
	}

	.ts-page-home .ts-home-steps__item:not(:last-child)::before {
		bottom: -19px;
	}

	.ts-page-home .ts-home-steps__item:not(:last-child)::after {
		bottom: -18px;
	}

	.ts-page-home .ts-home-tech__content > .ts-home-tech__note {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.ts-page-home .ts-home-tech__media {
		width: 100%;
	}

	.ts-page-home .wp-block-post-content .ts-home-tech__img1 {
		margin-right: 30px;
	}

	.ts-page-home .wp-block-post-content .ts-home-tech__img2 {
		width: 250px;
		margin-top: -50px;
		border-width: 5px;
	}

	.ts-page-home .ts-home-tech__badge {
		bottom: 35px;
		left: 20px;
	}

	.ts-page-home .ts-home-steps__item {
		grid-template-columns: 50px minmax(0, 1fr);
		column-gap: 15px;
	}

	.ts-page-home .ts-home-steps__num {
		width: 50px;
		height: 50px;
		font-size: 22px;
	}

	.ts-page-home .ts-home-steps__item:not(:last-child)::before {
		top: 57px;
		left: 24.5px;
	}

	.ts-page-home .ts-home-steps__item:not(:last-child)::after {
		left: 21px;
	}

	.ts-page-home .ts-home-steps__body {
		padding-top: 2px;
	}

	.ts-page-home .ts-home-steps__title {
		font-size: 18px;
	}
}

/* ==========================================================================
   S06. Nauka — nagłówek z akapitem po prawej, dwie karty badań
   ========================================================================== */

.ts-page-home .ts-home-facts .ts-home__inner--stack {
	gap: 40px;
}

.ts-page-home .ts-home-facts__head > .ts-home__head-text {
	padding-right: 0;
}

.ts-page-home .ts-home-facts__head > .ts-home-facts__intro {
	justify-content: flex-start;
	padding-left: 20px;
}

.ts-page-home .ts-home-facts__intro p {
	font-size: 18px;
	line-height: 1.6;
}

.ts-page-home .ts-home-facts__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
}

.ts-page-home .ts-home-facts__card > hr.wp-block-separator {
	margin: 5px 0 15px;
}

.ts-page-home .ts-home-facts__card > .ts-home-facts__note {
	font-size: 16px;
}

@media (max-width: 1024px) {
	.ts-page-home .ts-home-facts .ts-home__inner--stack {
		gap: 20px;
	}

	.ts-page-home .ts-home-facts__head > .ts-home-facts__intro {
		padding-left: 0;
	}

	.ts-page-home .ts-home-facts__intro p {
		font-size: 16px;
	}

	.ts-page-home .ts-home-facts__cards {
		gap: 20px;
	}
}

@media (max-width: 767px) {
	.ts-page-home .ts-home-facts .ts-home__inner--stack {
		gap: 10px;
	}

	.ts-page-home .ts-home-facts__cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   S08. One Health — ciemna sekcja z liśćmi, trzy białe karty perspektyw
   ========================================================================== */

.ts-page-home .ts-home-one-health .ts-home__inner--stack {
	gap: 40px;
}

.ts-page-home .ts-home-one-health__head > .ts-home__head-text {
	width: 100%;
	max-width: 760px;
	padding-right: 0;
}

.ts-page-home .ts-home-one-health__cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.ts-page-home .ts-iconbox.ts-home-one-health__card {
	box-sizing: border-box;
	padding: 30px;
	border-radius: var(--ts-radius-card);
	background-color: var(--wp--preset--color--white);
	--ts-focus: var(--wp--preset--color--primary);
}

body.ts-page-home .ts-home-one-health .ts-iconbox.ts-home-one-health__card > .ts-iconbox__title {
	color: var(--wp--preset--color--primary);
}

.ts-page-home .ts-home-one-health__card > p {
	color: var(--wp--preset--color--body-text);
}

/* Ikony perspektyw: maska z ikon motywu (user, leaf) i rysunku łapy (ten sam co o-nas.css, GPL) */
.ts-page-home .ts-home-icon::before {
	content: "";
	width: 34px;
	height: 34px;
	background-color: currentColor;
	-webkit-mask: var(--ts-home-icon) center / contain no-repeat;
	mask: var(--ts-home-icon) center / contain no-repeat;
}

.ts-page-home .ts-home-icon--people {
	--ts-home-icon: url("../../icons/user.svg");
}

.ts-page-home .ts-home-icon--planet {
	--ts-home-icon: url("../../icons/leaf.svg");
}

.ts-page-home .ts-home-icon--animals {
	--ts-home-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12.6c-2.9 0-6 3.3-6 5.9 0 1.6 1.2 2.5 2.9 2.5 1.3 0 2.1-.7 3.1-.7s1.8.7 3.1.7c1.7 0 2.9-.9 2.9-2.5 0-2.6-3.1-5.9-6-5.9z'/%3E%3Cellipse cx='4.6' cy='10.4' rx='1.7' ry='2.2'/%3E%3Cellipse cx='9' cy='5.6' rx='1.8' ry='2.4'/%3E%3Cellipse cx='15' cy='5.6' rx='1.8' ry='2.4'/%3E%3Cellipse cx='19.4' cy='10.4' rx='1.7' ry='2.2'/%3E%3C/g%3E%3C/svg%3E");
}

.ts-page-home .ts-home-one-health .ts-home__inner--stack > .ts-home-one-health__summary {
	max-width: 900px;
	margin: 10px auto 0;
	color: var(--wp--preset--color--white);
	font-size: 20px;
	line-height: 1.6;
}

.ts-page-home .ts-home-one-health__summary strong {
	color: var(--wp--preset--color--accent-on-dark);
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
}

@media (max-width: 1024px) {
	.ts-page-home .ts-home-one-health .ts-home__inner--stack {
		gap: 20px;
	}

	.ts-page-home .ts-home-one-health__cards {
		gap: 20px;
	}

	.ts-page-home .ts-iconbox.ts-home-one-health__card {
		padding: 20px;
	}

	.ts-page-home .ts-home-icon::before {
		width: 28px;
		height: 28px;
	}

	.ts-page-home .ts-home-one-health .ts-home__inner--stack > .ts-home-one-health__summary {
		font-size: 18px;
	}
}

@media (max-width: 767px) {
	.ts-page-home .ts-home-one-health__cards {
		grid-template-columns: minmax(0, 1fr);
	}

	.ts-page-home .ts-home-one-health .ts-home__inner--stack > .ts-home-one-health__summary {
		font-size: 16px;
		text-align: left;
	}
}

/* ==========================================================================
   S09. Gospodarka cyrkularna — zdjęcie z odznaką | treść
   ========================================================================== */

.ts-page-home .ts-home-circular__media {
	width: 50%;
	padding: 10px 50px 10px 10px;
}

.ts-page-home .wp-block-post-content .ts-home-circular__img {
	aspect-ratio: 1 / 0.78;
}

.ts-page-home .ts-home-circular__badge {
	right: 20px;
	bottom: -20px;
}

.ts-page-home .ts-home-circular__content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 50%;
}

.ts-page-home .ts-home-circular__content > .ts-home-circular__text {
	margin-top: 5px;
}

.ts-page-home .ts-home-circular__content > .ts-home-circular__action {
	margin-top: 20px;
}

@media (max-width: 1024px) {
	.ts-page-home .ts-home-circular__media {
		width: 100%;
		padding: 10px 10px 30px;
	}

	.ts-page-home .wp-block-post-content .ts-home-circular__img {
		aspect-ratio: 1 / 0.5;
	}

	.ts-page-home .ts-home-circular__badge {
		right: 30px;
		bottom: 0;
	}

	.ts-page-home .ts-home-circular__content {
		gap: 10px;
		width: 100%;
	}

	.ts-page-home .ts-home-circular__content > .ts-home-circular__action {
		margin-top: 15px;
	}
}

@media (max-width: 767px) {
	.ts-page-home .wp-block-post-content .ts-home-circular__img {
		aspect-ratio: 1 / 0.75;
	}

	.ts-page-home .ts-home-circular__badge {
		right: 20px;
	}
}

/* ==========================================================================
   S10. Poznaj THESYBIN — treść z listą formatów i przyciskami | zdjęcie
   ========================================================================== */

.ts-page-home .ts-home-platform .ts-home__inner {
	align-items: stretch;
}

.ts-page-home .ts-home-platform__content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 57%;
	padding: 10px 40px 10px 10px;
}

.ts-page-home .ts-home-platform__content > .ts-home-platform__text {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 10px;
}

.ts-page-home .ts-home-platform__text > .ts-home-platform__list {
	margin: 5px 0 10px;
}

.ts-page-home .ts-home-platform__content > .ts-home-platform__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 30px;
	margin-top: 25px;
}

.ts-page-home .ts-home-platform__media {
	width: 43%;
}

.ts-page-home .wp-block-post-content .ts-home-platform__img {
	height: 100%;
	min-height: 480px;
}

@media (max-width: 1024px) {
	.ts-page-home .ts-home-platform__content {
		gap: 10px;
		width: 100%;
		padding: 10px;
	}

	.ts-page-home .ts-home-platform__content > .ts-home-platform__actions {
		gap: 20px 30px;
		margin-top: 20px;
	}

	.ts-page-home .ts-home-platform__media {
		width: 100%;
	}

	.ts-page-home .wp-block-post-content .ts-home-platform__img {
		height: auto;
		min-height: 0;
		aspect-ratio: 1 / 0.5;
	}
}

@media (max-width: 767px) {
	.ts-page-home .ts-home-platform__text > .ts-home-platform__list {
		margin-bottom: 5px;
	}

	.ts-page-home .wp-block-post-content .ts-home-platform__img {
		aspect-ratio: 1 / 0.75;
	}
}

/* ==========================================================================
   S11. Najczęstsze pytania — zdjęcie | akordeon
   ========================================================================== */

.ts-page-home .ts-home-faq__media {
	align-self: stretch;
	width: 50%;
	padding: 10px 50px 10px 10px;
}

.ts-page-home .wp-block-post-content .ts-home-faq__img {
	height: 100%;
	min-height: 520px;
}

.ts-page-home .ts-home-faq__content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 50%;
}

.ts-page-home .ts-home-faq__content > .ts-home-faq__title {
	margin-bottom: 25px;
}

.ts-page-home .ts-home-faq__content > .ts-home-faq__action {
	margin-top: 25px;
}

@media (max-width: 1024px) {
	.ts-page-home .ts-home-faq__media {
		width: 100%;
		padding: 10px;
	}

	.ts-page-home .wp-block-post-content .ts-home-faq__img {
		height: auto;
		min-height: 0;
		aspect-ratio: 1 / 0.5;
	}

	.ts-page-home .ts-home-faq__content {
		gap: 10px;
		width: 100%;
	}

	.ts-page-home .ts-home-faq__content > .ts-home-faq__title {
		margin-bottom: 20px;
	}

	.ts-page-home .ts-home-faq__content > .ts-home-faq__action {
		margin-top: 20px;
	}
}

@media (max-width: 767px) {
	.ts-page-home .wp-block-post-content .ts-home-faq__img {
		aspect-ratio: 1 / 0.75;
	}
}

/* ==========================================================================
   S12. Znajdź swoją ścieżkę — ciemna sekcja, wyśrodkowana treść, butelka przy dolnej krawędzi
   ========================================================================== */

.ts-page-home .ts-home-cta__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 50%;
	padding: 10px 20px 10px 10px;
	text-align: center;
}

.ts-page-home .ts-home-cta__content > .ts-home-cta__eyebrow {
	align-self: center;
}

.ts-page-home .ts-home-cta__title {
	color: var(--wp--preset--color--white);
	font-size: 52px;
	font-weight: 600;
	/* wysokość wiersza w px (em rodzica) dziedziczona przez kursywę 60 px — jak dawna sekcja CTA, +10 % na polskie znaki diakrytyczne */
	line-height: 1.1em;
}

.ts-page-home .ts-home-cta__title em {
	font-size: 60px;
}

.ts-page-home .ts-home-cta__content > .ts-home-cta__text {
	color: var(--wp--preset--color--white);
}

.ts-page-home .ts-home-cta__content > .ts-home-cta__action {
	margin-top: 10px;
}

.ts-page-home .ts-home-cta__media {
	width: 50%;
	margin-bottom: -100px;
	padding: 10px 10px 0;
}

/* Pole 74 % × 500 px; obraz o szerokości kadru */
.ts-page-home .wp-block-post-content .ts-home-cta__img {
	position: relative;
	overflow: hidden;
	width: 74%;
	height: 500px;
	margin-inline: auto;
}

.ts-page-home .wp-block-post-content .ts-home-cta__img img {
	position: absolute;
	top: 0;
	left: 50%;
	width: auto;
	min-width: 100%;
	max-width: none;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transform: translateX(-50%);
}

@media (max-width: 1024px) {
	.ts-page-home .ts-home-cta__content {
		gap: 15px;
		width: 100%;
		padding: 10px;
	}

	.ts-page-home .ts-home-cta__title {
		font-size: 52px;
	}

	.ts-page-home .ts-home-cta__title em {
		font-size: 52px;
	}

	.ts-page-home .ts-home-cta__media {
		width: 53%;
		margin-bottom: -50px;
	}
}

@media (max-width: 767px) {
	/* 40 px od 390 px w górę; przy 320 px mniejszy, żeby „technologię.” mieściło się w wierszu (1.4.10) */
	.ts-page-home .ts-home-cta__title {
		font-size: min(40px, calc(100vw / 9));
	}

	.ts-page-home .ts-home-cta__title em {
		font-size: min(36px, calc(100vw / 10));
	}

	.ts-page-home .ts-home-cta__media {
		width: 100%;
	}

	.ts-page-home .wp-block-post-content .ts-home-cta__img {
		height: 360px;
	}
}

/* ==========================================================================
   S13. Pięć dni z Thesybinem — treść | zdjęcie (układ S02 w lustrze)
   ========================================================================== */

.ts-page-home .ts-home-course__content {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 50%;
	padding: 10px 80px 10px 10px;
}

.ts-page-home .ts-home-course__content > .ts-home-course__text {
	margin-top: 5px;
	font-size: 18px;
	line-height: 1.6;
}

.ts-page-home .ts-home-course__content > .ts-home-course__action {
	margin-top: 20px;
}

.ts-page-home .ts-home-course__media {
	width: 50%;
}

.ts-page-home .wp-block-post-content .ts-home-course__img {
	aspect-ratio: 1 / 0.72;
}

/* Plik 6295 ma u góry jasny pas ~2,3 % wysokości — kadr przesunięty o 3,5 % w górę */
.ts-page-home .wp-block-post-content .ts-home-course__img img {
	top: -3.5%;
	height: 104%;
	min-height: 104%;
}

@media (max-width: 1024px) {
	.ts-page-home .ts-home-course__content {
		gap: 10px;
		width: 100%;
		padding: 10px;
	}

	.ts-page-home .ts-home-course__content > .ts-home-course__text {
		font-size: 16px;
	}

	.ts-page-home .ts-home-course__content > .ts-home-course__action {
		margin-top: 15px;
	}

	.ts-page-home .ts-home-course__media {
		width: 100%;
	}

	.ts-page-home .wp-block-post-content .ts-home-course__img {
		aspect-ratio: 1 / 0.5;
	}
}

@media (max-width: 767px) {
	.ts-page-home .wp-block-post-content .ts-home-course__img {
		aspect-ratio: 1 / 0.75;
	}
}

/* ==========================================================================
   S14. Materiały edukacyjne — nagłówek z przyciskiem, karty e-booków (blok thesybin-leady/ebooki)
   Tylko układ sekcji: trzy karty w rzędzie ≥1025 px (okładka 4:3 nad treścią); tablet i telefon — układ bloku wtyczki.
   ========================================================================== */

.ts-page-home .ts-home-materials .ts-home__inner--stack {
	gap: 50px;
}

.ts-page-home .ts-home-materials__head > .ts-home__head-text {
	width: 60%;
}

.ts-page-home .ts-home-materials__head > .ts-home__head-action {
	width: 40%;
}

.ts-page-home .ts-home-materials__text {
	margin-top: 5px;
}

@media (min-width: 1025px) {
	.ts-page-home .ts-home-materials .tsl-ebooki--karty {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ts-page-home .ts-home-materials .tsl-ebooki--karty .tsl-ebook {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
		gap: 20px;
		padding: 20px;
	}

	.ts-page-home .ts-home-materials .tsl-ebook .tsl-ebook__tytul {
		font-size: 24px;
	}
}

/* Tablet: szersza okładka 4:3 (w kolumnie 200 px bloku dłuższy tytuł na okładce był ucinany) */
@media (min-width: 768px) and (max-width: 1024px) {
	.ts-page-home .ts-home-materials .tsl-ebooki--karty .tsl-ebook {
		grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	}
}

@media (max-width: 1024px) {
	.ts-page-home .ts-home-materials .ts-home__inner--stack {
		gap: 20px;
	}

	.ts-page-home .ts-home-materials__head > :is(.ts-home__head-text, .ts-home__head-action) {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.ts-page-home .ts-home-materials .ts-home__inner--stack {
		gap: 10px;
	}

	/* Telefon: okładka na szerokość karty (w 200 px „neuroróżnorodność” dzieliło się przeniesieniem) */
	.ts-page-home .ts-home-materials .tsl-ebooki--karty .tsl-ebook__okladka {
		max-width: none;
	}
}