/*
 * TheSybin — strona „Technologia” (/technologia/, nowa), faza LP: sekcje S1–S7 wg docs/TRESCI-MAPA.md §4.3 (dokument LP L116–L145).
 * Język wizualny stron O nas i głównej: kontener 1300 px, padding 100/50 px, rytm tła biała ↔ kremowa ↔ ciemna, zdjęcia r 20,
 * odznaki C10, liście C20, karty jak features-grid (bez hovera), tabela jak „Wartości odżywcze” produktu (wiersze-karty ≤767).
 * Komponenty (etykieta, nagłówek, przyciski, icon box, karty, separator, odznaka, liście) — components.css; tu siatka sekcji,
 * numery etapów 01–08 (dekoracja), spis sekcji, lista a–e, schemat, tabela.
 * Znaczniki: patterns/technologia-*.php. Odstępstwa: docs/odstepstwa/technologia.md. Progi: tablet ≤1024, telefon ≤767.
 */

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

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

/* Baner (plik 6299, filtr thesybin_page_hero_context): jasny pas ~8 px przy górnej krawędzi pliku widoczny nad nagłówkiem —
   obraz powiększony o 3 % od dołu, pas poza banerem (core/cover: overflow: clip) */
.ts-page-technologia .ts-page-hero .wp-block-cover__image-background {
	transform: scale(1.03);
	transform-origin: 50% 100%;
}

.ts-page-technologia .wp-block-post-content > .ts-technologia-section {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 100px max(10px, calc((100% - 1300px) / 2));
	/* Obracana odznaka (C10) w trakcie ruchu nie poszerza strony (1.4.10) */
	overflow-x: clip;
}

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

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

.ts-page-technologia .ts-technologia-section :where(.wp-block-image) img {
	display: block;
}

.ts-page-technologia .ts-technologia-section :is(.ts-technologia-intro__photo, .ts-technologia-process__img1, .ts-technologia-process__img2, .ts-technologia-circular__photo, .ts-technologia-ip__photo) {
	overflow: hidden;
	border-radius: var(--ts-radius-card);
}

.ts-page-technologia .ts-technologia-section :is(.ts-technologia-intro__photo, .ts-technologia-process__img1, .ts-technologia-process__img2, .ts-technologia-circular__photo, .ts-technologia-ip__photo) img {
	width: 100%;
	height: auto;
	object-fit: cover;
}

.ts-page-technologia :is(.ts-technologia-process__badge, .ts-technologia-circular__badge, .ts-technologia-ip__badge) {
	position: absolute;
	z-index: 2;
	line-height: 0;
	pointer-events: none;
}

/* Numer etapu z dokumentu LP (01–08): medalion, dekoracja (aria-hidden) — kolejność niesie nagłówek */
.ts-page-technologia .ts-technologia-num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	margin: 0;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 50%;
	color: var(--wp--preset--color--accent-text);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	font-style: italic;
	line-height: 1;
}

.ts-page-technologia :is(.ts-surface-dark, .has-primary-background-color) .ts-technologia-num {
	border-color: var(--wp--preset--color--accent-on-dark);
	color: var(--wp--preset--color--accent-on-dark);
}

.ts-page-technologia .ts-technologia-section :where(.ts-heading) em {
	font-weight: 400;
}

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

	.ts-page-technologia .ts-technologia-num {
		width: 48px;
		height: 48px;
		font-size: 19px;
	}
}

/* ==========================================================================
   S1. Wstęp — zdjęcie | nagłówek + „Na tej stronie” (biała)
   ========================================================================== */

.ts-page-technologia .wp-block-post-content > .ts-technologia-intro {
	background-color: var(--wp--preset--color--white);
}

.ts-page-technologia .ts-technologia-intro__media {
	box-sizing: border-box;
	width: 45%;
	padding: 10px 50px 10px 10px;
}

.ts-page-technologia .ts-technologia-intro__photo img {
	aspect-ratio: 1 / 1.02;
}

.ts-page-technologia .ts-technologia-intro__content {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 35px;
	width: 55%;
	padding: 10px;
}

.ts-page-technologia .ts-technologia-toc {
	padding-top: 30px;
	border-top: 1px solid var(--ts-divider);
}

.ts-page-technologia .ts-technologia-toc__title {
	margin: 0 0 15px;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 18px;
	font-style: italic;
	line-height: 1.3;
}

.ts-page-technologia .ts-technologia-toc__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ts-page-technologia .ts-technologia-toc__list > li {
	margin: 0;
	border-bottom: 1px solid var(--ts-divider);
}

.ts-page-technologia .ts-technologia-toc__list a {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding: 8px 0;
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.ts-page-technologia .ts-technologia-toc__num {
	flex: none;
	min-width: 26px;
	color: var(--wp--preset--color--accent-text);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 18px;
	font-style: italic;
	font-weight: 400;
}

.ts-page-technologia .ts-technologia-toc__list a:is(:hover, :focus-visible) .ts-technologia-toc__label {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

@media (max-width: 1024px) {
	.ts-page-technologia .wp-block-post-content > .ts-technologia-intro {
		row-gap: 20px;
	}

	.ts-page-technologia .ts-technologia-intro__media {
		width: 100%;
		padding: 10px;
	}

	.ts-page-technologia .ts-technologia-intro__photo img {
		aspect-ratio: 1 / 0.5;
	}

	.ts-page-technologia .ts-technologia-intro__content {
		gap: 25px;
		width: 100%;
	}

	.ts-page-technologia .ts-technologia-toc {
		padding-top: 20px;
	}
}

@media (max-width: 767px) {
	.ts-page-technologia .ts-technologia-intro__photo img {
		aspect-ratio: 1 / 0.66;
	}

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

/* ==========================================================================
   S2. Szczep · Właściwości szczepu · Fermentacja — 3 karty 3/2/1 (kremowa)
   ========================================================================== */

.ts-page-technologia .ts-technologia-strain__grid {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	width: 100%;
	padding: 10px;
}

.ts-page-technologia .ts-technologia-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 40px;
	border: 1px solid var(--ts-divider);
	border-radius: var(--ts-radius-card);
	background-color: var(--wp--preset--color--white);
}

/* Numer w złotym kółku (tekst #102B28 na #BE8A3D — D1-A) */
.ts-page-technologia .ts-technologia-card > .ts-technologia-num {
	width: 60px;
	height: 60px;
	margin-bottom: 15px;
	border-color: var(--wp--preset--color--accent);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 24px;
}

.ts-page-technologia .ts-technologia-card__title {
	color: var(--wp--preset--color--primary);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

.ts-page-technologia .ts-technologia-card__text {
	font-size: 16px;
	line-height: 1.7;
}

@media (max-width: 1024px) {
	.ts-page-technologia .ts-technologia-strain__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Trzecia karta na całą szerokość (bez pustej kolumny) */
	.ts-page-technologia .ts-technologia-card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.ts-page-technologia .ts-technologia-card {
		gap: 10px;
		padding: 30px;
	}

	.ts-page-technologia .ts-technologia-card > .ts-technologia-num {
		width: 50px;
		height: 50px;
		margin-bottom: 10px;
		font-size: 20px;
	}

	.ts-page-technologia .ts-technologia-card__title {
		font-size: 22px;
	}
}

@media (max-width: 767px) {
	.ts-page-technologia .ts-technologia-strain__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.ts-page-technologia .ts-technologia-card {
		padding: 20px;
	}

	.ts-page-technologia .ts-technologia-card__title {
		font-size: 20px;
	}
}

/* ==========================================================================
   S3. Od szczepu do formulacji — ciemna: dwa nachodzące zdjęcia z odznaką | lista a–e
   ========================================================================== */

.ts-page-technologia .ts-technologia-process__media {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 48%;
	padding: 10px 30px 10px 10px;
}

.ts-page-technologia .wp-block-post-content .ts-technologia-process__img1 {
	margin-right: 60px;
}

.ts-page-technologia .ts-technologia-process__img1 img {
	aspect-ratio: 1 / 0.73;
}

/* Pliki 6299 i 6289 mają jasny pas 2–8 px przy górnej krawędzi — obraz powiększony o 4 % od dołu, pas poza ramką (overflow: hidden) */
.ts-page-technologia .ts-technologia-section :is(.ts-technologia-process__img1, .ts-technologia-intro__photo) img {
	transform: scale(1.04);
	transform-origin: 50% 100%;
}

.ts-page-technologia .wp-block-post-content .ts-technologia-process__img2 {
	position: relative;
	z-index: 1;
	align-self: flex-end;
	width: 62%;
	margin-top: -110px;
	border: 8px solid var(--wp--preset--color--primary);
}

.ts-page-technologia .ts-technologia-process__img2 img {
	aspect-ratio: 1 / 0.64;
}

.ts-page-technologia .ts-technologia-process__badge {
	bottom: 40px;
	left: 40px;
}

.ts-page-technologia .ts-technologia-process__content {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 52%;
	padding: 10px 10px 10px 40px;
}

body.ts-page-technologia .ts-technologia-steps {
	margin: 20px 0 0;
	padding: 0 0 0 44px;
	counter-reset: none;
}

.ts-page-technologia .ts-technologia-steps > li {
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--ts-divider-dark);
	color: var(--wp--preset--color--white);
	font-size: 17px;
	line-height: 1.6;
}

.ts-page-technologia .ts-technologia-steps > li:first-child {
	padding-top: 0;
}

.ts-page-technologia .ts-technologia-steps > li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ts-page-technologia .ts-technologia-steps > li::marker {
	color: var(--wp--preset--color--accent-on-dark);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 22px;
	font-style: italic;
}

.ts-page-technologia .ts-technologia-steps > li strong {
	color: var(--wp--preset--color--white);
	font-size: 18px;
	letter-spacing: 0.04em;
}

.ts-page-technologia .ts-technologia-steps > li [aria-hidden="true"] {
	color: var(--wp--preset--color--accent-on-dark);
}

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

	.ts-page-technologia .ts-technologia-process__media {
		width: min(100%, 680px);
		margin-inline: auto;
		padding: 10px;
	}

	.ts-page-technologia .ts-technologia-process__content {
		gap: 10px;
		width: 100%;
		padding: 10px;
	}

	.ts-page-technologia .ts-technologia-process__badge {
		bottom: 30px;
		left: 25px;
	}

	.ts-page-technologia .ts-technologia-steps > li {
		padding: 14px 0;
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	.ts-page-technologia .wp-block-post-content .ts-technologia-process__img1 {
		margin-right: 30px;
	}

	.ts-page-technologia .wp-block-post-content .ts-technologia-process__img2 {
		width: 70%;
		margin-top: -60px;
		border-width: 5px;
	}

	.ts-page-technologia .ts-technologia-process__badge {
		bottom: 20px;
		left: 12px;
	}

	body.ts-page-technologia .ts-technologia-steps {
		padding-left: 34px;
	}

	.ts-page-technologia .ts-technologia-steps > li strong {
		font-size: 16px;
	}
}

/* ==========================================================================
   S4. Proces, zasoby i gospodarka cyrkularna — treść + schemat | zdjęcie z odznaką (biała, liść lewy)
   ========================================================================== */

.ts-page-technologia .wp-block-post-content > .ts-technologia-circular {
	background-color: var(--wp--preset--color--white);
}

.ts-page-technologia .ts-technologia-circular__content {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 55%;
	padding: 10px 50px 10px 10px;
}

body.ts-page-technologia .ts-technologia-circular__content > .ts-heading {
	margin-bottom: 10px;
}

.ts-page-technologia .ts-technologia-circular__note em {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125em;
	font-style: italic;
}

.ts-page-technologia .ts-technologia-circular__media {
	position: relative;
	box-sizing: border-box;
	width: 45%;
	padding: 10px 10px 50px;
}

.ts-page-technologia .ts-technologia-circular__photo img {
	aspect-ratio: 1 / 1.08;
}

/* Desktop: jak zdjęcie S7 — <img> o szerokości kadru cover (sizes="auto" obrazu leniwego), ramka 1 : 1,08 na <figure> */
@media (min-width: 1025px) {
	.ts-page-technologia .ts-technologia-section .ts-technologia-circular__photo {
		position: relative;
		aspect-ratio: 1 / 1.08;
	}

	.ts-page-technologia .ts-technologia-section .ts-technologia-circular__photo img {
		position: absolute;
		top: 0;
		left: 50%;
		width: auto;
		min-width: 100%;
		max-width: none;
		height: 100%;
		aspect-ratio: 1672 / 941;
		translate: -50% 0;
	}
}

.ts-page-technologia .ts-technologia-circular__badge {
	bottom: 0;
	left: -30px;
}

/* Schemat ZASÓB → BIOTECHNOLOGIA → NOWA WARTOŚĆ: pigułki złote (tekst #102B28), strzałki dekoracyjne */
body.ts-page-technologia .ts-technologia-flow {
	--ts-flow-arrow: 30px;
	--ts-flow-space: 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 14px;
	margin: 15px 0;
	padding: 0;
	list-style: none;
}

.ts-page-technologia .ts-technologia-flow > li {
	position: relative;
	margin: 0;
	padding: 10px 22px;
	border-radius: var(--ts-radius-pill);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--on-accent);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.ts-page-technologia .ts-technologia-flow > li:not(:last-child) {
	margin-right: calc(var(--ts-flow-arrow) + 2 * var(--ts-flow-space));
}

.ts-page-technologia .ts-technologia-flow > li:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: calc(-1 * (var(--ts-flow-arrow) + var(--ts-flow-space)));
	width: var(--ts-flow-arrow);
	height: 14px;
	background-color: var(--wp--preset--color--primary);
	-webkit-mask: url("../../icons/arrow-long-right.svg") center / contain no-repeat;
	mask: url("../../icons/arrow-long-right.svg") center / contain no-repeat;
	transform: translateY(-50%);
}

@media (max-width: 1024px) {
	.ts-page-technologia .wp-block-post-content > .ts-technologia-circular {
		row-gap: 20px;
	}

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

	.ts-page-technologia .ts-technologia-circular__media {
		width: min(100%, 640px);
		margin-inline: auto;
		padding: 10px 10px 40px 40px;
	}

	.ts-page-technologia .ts-technologia-circular__photo img {
		aspect-ratio: 1 / 0.62;
	}

	.ts-page-technologia .ts-technologia-circular__badge {
		left: 0;
	}
}

@media (max-width: 767px) {
	.ts-page-technologia .ts-technologia-circular__media {
		padding: 10px 10px 30px 20px;
	}

	.ts-page-technologia .ts-technologia-circular__photo img {
		aspect-ratio: 1 / 0.8;
	}

	/* Schemat w kolumnie, strzałka w dół */
	body.ts-page-technologia .ts-technologia-flow {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 0;
	}

	.ts-page-technologia .ts-technologia-flow > li:not(:last-child) {
		margin: 0 0 34px;
	}

	.ts-page-technologia .ts-technologia-flow > li:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -24px;
		left: 20px;
		width: 24px;
		height: 12px;
		transform: rotate(90deg);
	}
}

/* ==========================================================================
   S5. One Health — wąski pas wyśrodkowany (kremowa)
   ========================================================================== */

.ts-page-technologia .ts-technologia-one-health__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: min(100%, 860px);
	margin-inline: auto;
	padding: 10px;
	text-align: center;
}

.ts-page-technologia .ts-technologia-one-health__inner > .ts-technologia-num {
	align-self: center;
}

.ts-page-technologia .ts-technologia-one-health__lead {
	color: var(--wp--preset--color--primary);
	font-size: 22px;
	font-weight: 500;
	line-height: 1.6;
}

body.ts-page-technologia .ts-technologia-one-health__icons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 10px;
}

.ts-page-technologia .ts-technologia-icon::before {
	content: "";
	width: 34px;
	height: 34px;
	background-color: currentColor;
	-webkit-mask: var(--ts-technologia-icon) center / contain no-repeat;
	mask: var(--ts-technologia-icon) center / contain no-repeat;
}

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

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

.ts-page-technologia .ts-technologia-icon--animals {
	--ts-technologia-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");
}

@media (max-width: 1024px) {
	.ts-page-technologia .ts-technologia-one-health__inner {
		gap: 15px;
	}

	.ts-page-technologia .ts-technologia-one-health__lead {
		font-size: 19px;
	}
}

@media (max-width: 767px) {
	.ts-page-technologia .ts-technologia-one-health__lead {
		font-size: 17px;
	}

	.ts-page-technologia .ts-technologia-icon.ts-icon-circle--60 {
		width: 50px;
		height: 50px;
	}

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

/* ==========================================================================
   S6. Badania i publikacje — nagłówek | akapit; 2 karty (biała)
   ========================================================================== */

.ts-page-technologia .wp-block-post-content > .ts-technologia-research {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 50px;
	background-color: var(--wp--preset--color--white);
}

.ts-page-technologia .ts-technologia-research__head {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	padding: 10px;
}

.ts-page-technologia .ts-technologia-research__title {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 45%;
	padding-right: 30px;
}

.ts-page-technologia .ts-technologia-research__text {
	box-sizing: border-box;
	width: 55%;
	padding-left: 30px;
	font-size: 18px;
	line-height: 1.7;
}

.ts-page-technologia .ts-technologia-research__cards {
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	padding: 10px;
}

.ts-page-technologia .ts-technologia-research__card {
	padding: 40px;
}

body.ts-page-technologia .ts-technologia-research__card > .wp-block-separator {
	margin: 25px 0 20px;
}

.ts-page-technologia .ts-technologia-research__note {
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 17px;
	line-height: 1.6;
}

@media (max-width: 1024px) {
	.ts-page-technologia .wp-block-post-content > .ts-technologia-research {
		gap: 20px;
	}

	.ts-page-technologia .ts-technologia-research__head {
		row-gap: 15px;
	}

	.ts-page-technologia .ts-technologia-research__title {
		gap: 10px;
		width: 100%;
		padding-right: 0;
	}

	.ts-page-technologia .ts-technologia-research__text {
		width: 100%;
		padding-left: 0;
		font-size: 16px;
	}

	.ts-page-technologia .ts-technologia-research__cards {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.ts-page-technologia .ts-technologia-research__card {
		padding: 30px;
	}

	body.ts-page-technologia .ts-technologia-research__card > .wp-block-separator {
		margin: 20px 0 15px;
	}
}

@media (max-width: 767px) {
	.ts-page-technologia .ts-technologia-research__card {
		padding: 20px;
	}

	.ts-page-technologia .ts-technologia-research__note {
		font-size: 16px;
	}
}

/* ==========================================================================
   S7. Własność intelektualna — nagłówek, tabela, akapit, przyciski | zdjęcie z odznaką (kremowa)
   ========================================================================== */

.ts-page-technologia .wp-block-post-content > .ts-technologia-ip {
	align-items: stretch;
}

.ts-page-technologia .ts-technologia-ip__content {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 66%;
	padding: 10px 40px 10px 10px;
}

body.ts-page-technologia .ts-technologia-ip__content > .ts-technologia-table-wrap {
	margin-top: 20px;
}

body.ts-page-technologia .ts-technologia-ip__note {
	margin-top: 10px;
	font-size: 18px;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

body.ts-page-technologia .ts-technologia-ip__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 40px;
	margin-top: 20px;
}

.ts-page-technologia .ts-technologia-ip__media {
	position: relative;
	box-sizing: border-box;
	width: 34%;
	padding: 10px 10px 10px 30px;
}

.ts-page-technologia .ts-technologia-ip__photo {
	position: relative;
	height: 100%;
	min-height: 440px;
}

.ts-page-technologia .ts-technologia-section .ts-technologia-ip__photo img {
	position: absolute;
	inset: 0;
	height: 100%;
}

/* Desktop: ramka wyższa niż kadr 16:9. Obraz leniwy dostaje od rdzenia sizes="auto" — przeglądarka wybiera plik według szerokości <img>,
   więc <img> ma szerokość kadru cover (wysokość × 16/9, środek), a nie ramki; inaczej pobierała plik 600 px (rozmyty kadr ×1,9). */
@media (min-width: 1025px) {
	.ts-page-technologia .ts-technologia-section .ts-technologia-ip__photo img {
		right: auto;
		left: 50%;
		width: auto;
		min-width: 100%;
		max-width: none;
		aspect-ratio: 16 / 9;
		translate: -50% 0;
	}
}

.ts-page-technologia .ts-technologia-ip__badge {
	top: 40px;
	left: 0;
}

/* Tabela (wygląd tabeli „Wartości odżywcze” produktu — shop-produkt.css) */
.ts-page-technologia .ts-technologia-table-wrap {
	overflow: hidden;
	border: 1px solid var(--ts-cream-line);
	border-radius: 16px;
	background-color: var(--wp--preset--color--white);
}

.ts-page-technologia .ts-technologia-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 16px;
	line-height: 1.55;
}

.ts-page-technologia .ts-technologia-table :is(th, td) {
	padding: 16px 20px;
	border: 0;
	text-align: left;
	vertical-align: top;
}

.ts-page-technologia .ts-technologia-table thead th {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-size: 15px;
	font-weight: 600;
}

.ts-page-technologia .ts-technologia-table thead th:first-child {
	width: 22%;
}

.ts-page-technologia .ts-technologia-table thead th:nth-child(2) {
	width: 30%;
}

.ts-page-technologia .ts-technologia-table tbody tr + tr > * {
	border-top: 1px solid #eee7d6;
}

.ts-page-technologia .ts-technologia-table tbody tr:nth-child(2) {
	background-color: #fbf8f1;
}

.ts-page-technologia .ts-technologia-table tbody th {
	color: var(--wp--preset--color--primary);
	font-weight: 700;
}

.ts-page-technologia .ts-technologia-table td {
	color: var(--wp--preset--color--body-text);
}

.ts-page-technologia .ts-technologia-table td:nth-child(2) {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

@media (max-width: 1024px) {
	.ts-page-technologia .wp-block-post-content > .ts-technologia-ip {
		row-gap: 20px;
	}

	.ts-page-technologia .ts-technologia-ip__content {
		gap: 10px;
		width: 100%;
		padding: 10px;
	}

	.ts-page-technologia .ts-technologia-ip__media {
		width: 100%;
		padding: 10px 10px 10px 50px;
	}

	.ts-page-technologia .ts-technologia-ip__photo {
		height: auto;
		min-height: 0;
	}

	.ts-page-technologia .ts-technologia-section .ts-technologia-ip__photo img {
		position: static;
		height: auto;
		aspect-ratio: 1 / 0.42;
	}

	.ts-page-technologia .ts-technologia-ip__badge {
		top: 30px;
	}

	.ts-page-technologia .ts-technologia-table :is(th, td) {
		padding: 14px 16px;
	}

	body.ts-page-technologia .ts-technologia-ip__note {
		font-size: 16px;
	}
}

/* Telefon: tabela → wiersze-karty (role tabeli zapisane w HTML, nagłówki kolumn w data-label) */
@media (max-width: 767px) {
	.ts-page-technologia .ts-technologia-ip__media {
		padding-left: 30px;
	}

	.ts-page-technologia .ts-technologia-section .ts-technologia-ip__photo img {
		aspect-ratio: 1 / 0.6;
	}

	.ts-page-technologia .ts-technologia-table,
	.ts-page-technologia .ts-technologia-table tbody,
	.ts-page-technologia .ts-technologia-table tr,
	.ts-page-technologia .ts-technologia-table th,
	.ts-page-technologia .ts-technologia-table td {
		display: block;
	}

	.ts-page-technologia .ts-technologia-table thead {
		position: absolute;
		overflow: hidden;
		width: 1px;
		height: 1px;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.ts-page-technologia .ts-technologia-table tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 16px;
	}

	.ts-page-technologia .ts-technologia-table tbody tr + tr > * {
		border-top: 0;
	}

	.ts-page-technologia .ts-technologia-table tbody tr + tr {
		border-top: 1px solid #eee7d6;
	}

	.ts-page-technologia .ts-technologia-table :is(th, td) {
		padding: 0;
	}

	.ts-page-technologia .ts-technologia-table tbody th {
		font-size: 17px;
	}

	.ts-page-technologia .ts-technologia-table td {
		font-size: 15px;
	}

	.ts-page-technologia .ts-technologia-table td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 2px;
		color: var(--ts-muted);
		font-size: 13px;
		font-weight: 400;
		line-height: 1.4;
	}
}