/* ============================================================
   LAGOM PHARMATECH — Homepage sections
   css/pages/homepage.css
   ============================================================ */

/* ============================================================
   1. HERO
   ============================================================ */

.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Video background */
.hero__media {
	position: absolute;
	inset: 0;
	z-index: var(--z-below);
}

.hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Dark gradient overlay */
.hero__overlay {
	position: absolute;
	inset: 0;
	z-index: var(--z-base);
	background: linear-gradient(to right, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0.1) 100%);
}

/* Content nad overlayem */
.hero__content {
	position: relative;
	z-index: var(--z-raised);
	width: 100%;
	padding-block: 160px var(--space-96); /* kompenzace za header */
}

.hero__inner {
	max-width: 660px;
}

.hero__title {
	font-family: var(--font-headings);
	font-size: clamp(var(--text-4xl), 6vw, var(--text-5xl));
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-white);
	text-transform: uppercase;
	margin-bottom: var(--space-24);
}

.hero__text {
	font-size: var(--text-xl);
	line-height: var(--line-height-relaxed);
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: var(--space-32);
}

.hero__actions {
	display: flex;
	align-items: center;
	gap: var(--gap-16);
	flex-wrap: wrap;
}

@media (max-width: 768px) {
	.hero__content {
		padding-block: 120px var(--space-72);
	}

	.hero__title {
		font-size: var(--text-3xl);
	}

	.hero__text {
		font-size: var(--text-base);
	}

	.hero__actions {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ============================================================
		 2. ABOUT WRAPPER
		 Společná sekce pro About Us + Certificates.
		 ============================================================ */

.about-wrapper {
	position: relative;
	background-color: var(--color-white);
	padding-block: var(--section-padding-y);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	clip-path: inset(0 0 -40px 0); /* Ořezání stínu nahoře */
	z-index: 3;
}

/* background pattern */
.about-wrapper__pattern {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: var(--z-below);
	background-image: url("/img/lagom/bg-hexa_pattern.svg");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 1;
	pointer-events: none;
}

/* ============================================================
		 2a. ABOUT US — nadpis sekce + grid
		 ============================================================ */

.about {
	position: relative;
	z-index: var(--z-base);
}

/* Nadpis sekce — centrovaný uppercase */
.section-title {
	font-family: var(--font-headings);
	font-size: var(--text-xl); /* 24px */
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	text-align: center;
	color: var(--color-black);
	margin-bottom: var(--space-48);
}

/* 2-sloupcový grid — oba sloupce stejně široké */
.about__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-24);
	align-items: stretch;
}

/* -------------------------------------------------------
		 Levý box — 3 fotky
	------------------------------------------------------- */
.about__photos {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--gap-16);
	border-radius: var(--radius-xl); /* 24px */
	overflow: hidden;
}

.about__photo {
	overflow: hidden;
	border-radius: var(--radius-lg); /* 16px — vnitřní rohy */
}

/* Velký obrázek přes oba řádky */
.about__photo--large {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.about__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--transition-slow);
}

.about__photo:hover img {
	transform: scale(1.04);
}

/* -------------------------------------------------------
		 Pravý box — zelená karta s obsahem
	------------------------------------------------------- */
.about__card {
	background-color: var(--color-primary);
	border-radius: var(--radius-xl); /* 24px */
	padding: var(--space-32);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-24);
}

/* Logo + název uvnitř karty */
.about__card-brand {
	display: flex;
	align-items: center;
	gap: var(--gap-16);
}

.about__card-logo {
	width: 64px;
	height: 64px;
	background-color: var(--color-white);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.about__card-logo img {
	width: 48px;
	height: 48px;
	object-fit: contain;
}

.about__card-name {
	font-family: var(--font-headings);
	font-size: var(--text-xl);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-black);
	line-height: var(--line-height-snug);
}

.about__card-text {
	font-size: var(--text-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-black);
	max-width: none; /* reset base p max-width */
}

/* CTA tlačítko — secondary (černé) */
.about__card .btn {
	align-self: flex-start;
}

/* ============================================================
		 2b. CERTIFICATES
		 ============================================================ */

.certificates {
	position: relative;
	z-index: var(--z-base);
	margin-top: var(--space-72); /* oddělení od About Us */
}

/* 2-sloupcový grid */
.certificates__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* gap: var(--gap-24); */
	align-items: stretch;
	border-radius: var(--radius-xl);
	overflow: hidden;
}

/* Sdílená karta (bílá s border) */
.certificates__box {
	background-color: var(--color-white);
	border: var(--border-width) solid var(--color-border);
	overflow: hidden;
}

/* -------------------------------------------------------
		 Levý box — obsah: hlavička + checklist + CTA
	------------------------------------------------------- */
.certificates__content {
	padding: var(--space-32);
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	background: var(--color-border);
}

/* Hlavička — nadpis + ikonka  */
.certificates__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--gap-16);
}

.certificates__title {
	font-size: var(--text-md); /* 18px */
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-snug);
	color: var(--color-black);
	max-width: 80%;
}

.certificates__icon {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	border-radius: 12px;
	background: var(--color-white);
	border: 1px solid #e6e6e6;
	color: var(--color-primary);
}

.certificates__icon-img {
	width: 48px;
	height: auto;
	object-fit: contain;
}

/* CTA */
.certificates__content .btn {
	align-self: flex-start;
	margin-top: var(--space-8);
}

/* -------------------------------------------------------
		 Pravý box — obrázek přes celý box
	------------------------------------------------------- */
.certificates__image {
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ============================================================
		 3. RESPONSIVITA — About + Certificates
		 ============================================================ */

@media (max-width: 1024px) {
	.about__card {
		padding: var(--space-32);
	}

	.certificates__content {
		padding: var(--space-32);
	}
}

@media (max-width: 768px) {
	.about__grid {
		grid-template-columns: 1fr;
		gap: var(--gap-24);
		display: flex;
		flex-direction: column;
	}

	.about__photos {
		min-height: 300px;
	}

	.about__card-brand {
		flex-wrap: wrap;
	}

	/* Certificates grid — na mobile: obrázek nahoře, obsah dole */
	.certificates__grid {
		grid-template-columns: 1fr;
		gap: var(--gap-24);
	}

	/* img nahoře je lepší UX */
	.certificates__box--image {
		order: -1;
		min-height: 260px;
	}

	.certificates__content {
		padding: var(--space-24);
	}

	.section-title {
		margin-bottom: var(--space-32);
	}

	.certificates {
		margin-top: var(--space-48);
	}
}

@media (max-width: 480px) {
	.about__card {
		padding: var(--space-24);
	}

	.about__card-name {
		font-size: var(--text-lg);
	}

	.certificates__title {
		font-size: var(--text-base);
		max-width: 100%;
	}

	.certificates__icon {
		display: none; /* na velmi malých obrazovkách hide */
	}
}

/* ============================================================
		 3. SERVICES
		 ============================================================ */

.services-wrapper {
	position: relative;
	background-color: var(--color-white);
	padding-block: var(--section-padding-y);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	clip-path: inset(0 0 -40px 0);
	z-index: 2;
}

/* Dekorativní background pattern */
.services-wrapper__pattern {
	position: absolute;
	inset: 0;
	z-index: var(--z-below);
	background-image: url("/img/lagom/services-pattern.svg");
	background-size: 400px auto;
	background-repeat: repeat;
	opacity: 0.06;
	pointer-events: none;
}

/* Section header — nadpis + subtitle */
.services__header {
	text-align: center;
	margin-bottom: var(--space-48);
}

.services__subtitle {
	margin-top: var(--space-16);
	font-size: var(--text-base);
	color: var(--color-black);
	max-width: 860px;
	margin-inline: auto;
	line-height: var(--line-height-relaxed);
}

/* ============================================================
		 SERVICE CARD
		 ============================================================ */

/* Obalový stack — nalepené karty bez gapů */
.service-cards {
	border-radius: var(--radius-xl); /* 24px — vnější rohy celého stacku */
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

/* Jedna karta — 2col grid */
.service-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	min-height: 420px;
}

/* Oddělovací linka mezi kartami (ne první) */
.service-card + .service-card {
	border-top: 1px solid var(--color-border);
}

/* -------------------------------------------------------
		 Obrázek
	------------------------------------------------------- */
.service-card__media {
	position: relative;
	overflow: hidden;
}

/* Výchozí: img je první sloupec */
.service-card .service-card__media {
	order: 0;
}

/* Reverse: img je druhý sloupec */
.service-card--reverse .service-card__media {
	order: 1;
}

.service-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform var(--transition-slow);
}

.service-card:hover .service-card__img {
	transform: scale(1.04);
}

/* -------------------------------------------------------
		 Šipka přes hranici img/obsah
		 Bílý trojúhelník vychazí z content boxu a překrývá img
	------------------------------------------------------- */
.service-card__media::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: var(--z-raised);

	/* Výchozí (img vlevo) — šipka na pravém okraji img, špička doleva */
	right: -1px;
	border-top: 32px solid transparent;
	border-bottom: 32px solid transparent;
	border-right: 28px solid var(--color-white);
}

/* Reverse (img vpravo) — šipka na levém okraji img, špička doprava */
.service-card--reverse .service-card__media::after {
	right: auto;
	left: -1px;
	border-right: none;
	border-left: 28px solid var(--color-white);
}

/* -------------------------------------------------------
		 Obsah
	------------------------------------------------------- */
.service-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--gap-16);
	padding: var(--space-32);
	background-color: var(--color-white);
	position: relative;
}

/* Výchozí: obsah je druhý sloupec */
.service-card .service-card__body {
	order: 1;
}

/* Reverse: obsah je první sloupec */
.service-card--reverse .service-card__body {
	order: 0;
}

/* Label řádek — "SERVICE" + číslo */
.service-card__label-row {
	display: flex;
	align-items: center;
	gap: var(--gap-8);
}

.service-card__label {
	position: relative;
	font-family: var(--font-headings);
	font-size: var(--text-base);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.service-card__number {
	font-family: var(--font-headings);
	font-size: var(--text-5xl);
	font-weight: var(--font-weight-bold);
	line-height: 1;
	color: var(--color-border);
	letter-spacing: var(--letter-spacing-tight);
	user-select: none;
	pointer-events: none;
	position: absolute;
	top: 8px;
	/* left: var(--space-32); */
	left: 88px;
	z-index: var(--z-base);
}

.service-card--reverse .service-card__number {
	right: auto;
	top: var(--space-24);
}

/* Nadpis */
.service-card__title {
	font-family: var(--font-headings);
	font-size: var(--text-xl);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-black);
	line-height: var(--line-height-snug);
	max-width: 420px;
}

/* Popis */
.service-card__text {
	font-size: var(--text-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-black);
	max-width: 460px;
}

.service-card__text strong {
	color: var(--color-black);
	font-weight: var(--font-weight-semibold);
}

/* CTA */
.service-card__body .btn {
	align-self: flex-start;
	margin-top: var(--space-8);
}

/* ============================================================
		 4. SERVICES RESPONSIVITA
		 ============================================================ */

@media (max-width: 1024px) {
	.service-card__body {
		padding: var(--space-32);
	}

	.service-card__title {
		font-size: var(--text-xl);
	}

	.service-card__number {
		font-size: var(--text-3xl);
		top: var(--space-16);
		right: var(--space-24);
	}

	.service-card--reverse .service-card__number {
		right: auto;
		left: var(--space-24);
	}
}

@media (max-width: 768px) {
	/* Stack pod sebe: img nahoře, obsah dole (context first) */
	.service-card {
		grid-template-columns: 1fr;
		grid-template-rows: 280px auto;
		min-height: unset;
	}

	/* Vždy: obrázek nahoře bez ohledu na reverse */
	.service-card .service-card__media,
	.service-card--reverse .service-card__media {
		order: 0;
		min-height: 260px;
	}

	.service-card .service-card__body,
	.service-card--reverse .service-card__body {
		order: 1;
	}

	/* Šipka na mobile — dolů ze spodního okraje img */
	.service-card__media::after,
	.service-card--reverse .service-card__media::after {
		top: auto;
		bottom: -1px;
		right: 50%;
		left: auto;
		transform: translateX(50%);
		border-top: 28px solid var(--color-white);
		border-right: 32px solid transparent;
		border-bottom: none;
		border-left: 32px solid transparent;
	}

	.service-card__body {
		padding: var(--space-24);
	}

	.service-card__title {
		font-size: var(--text-lg);
	}

	.service-card__number {
		font-size: var(--text-2xl);
		top: var(--space-16);
		right: var(--space-16);
	}

	.service-card--reverse .service-card__number {
		right: var(--space-16);
		left: auto;
	}

	/* Schovat šipku-číslo na mobile — je zbytečné */
	.service-card__number {
		display: none;
	}
}

@media (max-width: 480px) {
	.service-card {
		grid-template-rows: 220px auto;
	}

	.service-card__body {
		padding: var(--space-24) var(--space-16);
		gap: var(--gap-8);
	}
}

/* ============================================================
		 5. LATEST PRODUCTS
		 ============================================================ */

.products {
	position: relative;
	background-color: var(--color-primary);
	padding-block: var(--section-padding-y);
	overflow: hidden;
}

.products--light {
	background-color: var(--color-white);
}

/* Background pattern */
.products__pattern {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: var(--z-base);
	background-image: url("/img/lagom/bg-hexa_pattern.svg");
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 0.05;
	pointer-events: none;
}

/* Section header */
.products__header {
	text-align: center;
	margin-bottom: var(--space-48);
	position: relative;
	z-index: var(--z-base);
}

.products__header .section-title {
	color: var(--color-black);
}

.products__subtitle {
	margin-top: var(--space-16);
	font-size: var(--text-base);
	color: rgba(0, 0, 0, 0.65);
	max-width: 860px;
	margin-inline: auto;
	line-height: var(--line-height-relaxed);
}

/* 3-col grid */
.products__grid {
	position: relative;
	z-index: var(--z-base);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap-24);
}

/* CTA pod gridem */
.products__cta {
	position: relative;
	z-index: var(--z-base);
	display: flex;
	justify-content: center;
	margin-top: var(--space-48);
}

/* ============================================================
		 PRODUCT CARD
		 ============================================================ */

/* Základní styl karet */
.product-card {
	background-color: var(--color-white);
	border-radius: var(--radius-xl); /* 24px */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: none;
	transition:
		box-shadow var(--transition-base),
		transform var(--transition-base);
}

.product-card--shadow {
	box-shadow: var(--shadow-lg);
}

.product-card--clickable:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-4px);
}

/* ── Image header ── */
.product-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	flex-shrink: 0;
}

.product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform var(--transition-slow);
}

.product-card--clickable:hover .product-card__img {
	transform: scale(1.05);
}

/* ── Content ── */
.product-card__content {
	display: flex;
	flex-direction: column;
	gap: var(--gap-16);
	padding: var(--space-24);
	flex: 1;
}

/* Label + název */
.product-card__label {
	font-family: var(--font-headings);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-black);
	margin-bottom: var(--space-4);
}

.product-card__title {
	font-family: var(--font-headings);
	font-size: var(--text-xl);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-primary);
	line-height: var(--line-height-snug);
}

/* Detail sekce */
.product-card__detail-title {
	font-size: var(--text-base);
	font-weight: var(--font-weight-bold);
	color: var(--color-black);
	margin-bottom: var(--space-8);
}

/* ── Footer — 3 stat boxy ── */
.product-card__footer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap-8);
	padding: var(--space-16) var(--space-24) var(--space-24);
	border-top: 1px solid var(--color-border);
	margin-top: auto;
}

/* ============================================================
		 6. PRODUCTS RESPONSIVITA
		 ============================================================ */

@media (max-width: 1024px) {
	.products__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--gap-16);
	}

	.product-card__title {
		font-size: var(--text-lg);
	}

	.product-card__content {
		padding: var(--space-16);
		gap: var(--gap-8);
	}

	.product-card__footer {
		grid-template-columns: 1fr;
		padding: var(--space-12) var(--space-16) var(--space-16);
		gap: var(--gap-8);
	}
}

@media (max-width: 768px) {
	/* 2 karty vedle sebe na tabletu */
	.products__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--gap-16);
	}
}

@media (max-width: 540px) {
	/* 1 karta na mobilu */
	.products__grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin-inline: auto;
	}

	.product-card__title {
		font-size: var(--text-xl);
	}
}

/* ============================================================
		 7. GALLERY
		 ============================================================ */

.gallery {
	position: relative;
	background-color: #f0f2f0; /* jemně šedozelené — odlišení od čistě bílé */
	padding-top: var(--section-padding-y);
	overflow: hidden;
}

/* Background pattern */
.gallery__pattern {
	position: absolute;
	inset: 0;
	z-index: var(--z-below);
	background-image: url("/img/lagom/gallery-pattern.svg");
	background-size: 500px auto;
	background-repeat: repeat;
	opacity: 0.08;
	pointer-events: none;
}

/* Header — centrovaný, v containeru */
.gallery__header {
	text-align: center;
	margin-bottom: var(--space-48);
	position: relative;
	z-index: var(--z-base);
}

.gallery__subtitle {
	margin-top: var(--space-16);
	font-size: var(--text-base);
	color: var(--color-black);
	max-width: 860px;
	margin-inline: auto;
	line-height: var(--line-height-relaxed);
}

/* Grid — fullwidth, bez containeru, 4 sloupce */
.gallery__grid {
	position: relative;
	z-index: var(--z-base);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, 340px);
	/* žádný gap — obrázky nalepené na sebe */
}

/* Jedna buňka */
.gallery__item {
	position: relative;
	overflow: hidden;
	margin: 0;
	cursor: pointer;
}

/* Hover overlay */
.gallery__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(98, 187, 70, 0);
	transition: background-color var(--transition-base);
	z-index: var(--z-raised);
	pointer-events: none;
}

.gallery__item:hover::after {
	background-color: rgba(98, 187, 70, 0.15);
}

/* Obrázek — zoom na hover */
.gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform 500ms ease;
}

.gallery__item:hover .gallery__img {
	transform: scale(1.07);
}

/* ============================================================
		 8. GALLERY RESPONSIVITA
		 ============================================================ */

@media (max-width: 1024px) {
	.gallery__grid {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, 260px);
	}
}

@media (max-width: 768px) {
	/* 2 × 4 grid na tabletu */
	.gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, 240px);
	}
}

@media (max-width: 480px) {
	/* 2 × 4 na malém mobilu, menší výška */
	.gallery__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(4, 180px);
	}

	.gallery__header {
		margin-bottom: var(--space-32);
	}
}

/* ============================================================
		 9. PARTNERS
		 ============================================================ */

.partners {
	background-color: var(--color-white);
	padding-block: var(--section-padding-y);
	overflow: hidden;
}

/* Header */
.partners__header {
	text-align: center;
	margin-bottom: var(--space-48);
}

.partners__subtitle {
	margin-top: var(--space-16);
	font-size: var(--text-base);
	color: var(--color-black);
	max-width: 860px;
	margin-inline: auto;
	line-height: var(--line-height-relaxed);
}

/* -------------------------------------------------------
		 Carousel — CSS infinite marquee, bez JS
	------------------------------------------------------- */

/* Wrapper s fade maskou na krajích */
.partners__track-wrapper {
	position: relative;

	/* Fade efekt na levém a pravém okraji */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

/* Track — flex řádek, animuje se doleva */
.partners__track {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;

	/* CSS animace — loop */
	animation: partners-scroll 18s linear infinite;
}

/* Zastavit animaci při hover nad celým carouselem */
.partners__carousel:hover .partners__track {
	animation-play-state: paused;
}

/* Respektovat preferenci pro redukci pohybu */
@media (prefers-reduced-motion: reduce) {
	.partners__track {
		animation: none;
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
		gap: var(--gap-24);
	}
}

@keyframes partners-scroll {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	} /* posun o přesně polovinu = 1 sada */
}

/* Jednotlivé logo boxy */
.partners__item {
	flex-shrink: 0;
	padding-inline: var(--space-48); /* mezera kolem každého loga */

	/* Svislý separator vpravo */
	border-right: 1px solid var(--color-border);
}

.partners__item:last-child {
	border-right: none;
}

.partners__logo-link {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-16);
	border-radius: var(--radius-md);
	transition:
		background-color var(--transition-fast),
		opacity var(--transition-fast);
}

.partners__logo-link:hover {
	background-color: var(--color-border);
	opacity: 0.85;
}

.partners__logo-link:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

/* Logo obrázek */
.partners__logo-img {
	height: 120px;
	width: auto;
	max-width: 250px;
	object-fit: contain;
	display: block;

	/* Loga greyscale, na hover barevná */
	filter: grayscale(100%);
	opacity: 0.55;
	transition:
		filter var(--transition-base),
		opacity var(--transition-base);
}

.partners__logo-link:hover .partners__logo-img {
	filter: grayscale(0%);
	opacity: 1;
}

/* ============================================================
		 10. PARTNERS RESPONSIVITA
		 ============================================================ */

@media (max-width: 768px) {
	.partners__item {
		padding-inline: var(--space-32);
	}

	.partners__logo-img {
		height: 36px;
		max-width: 120px;
	}
}

@media (max-width: 480px) {
	.partners__item {
		padding-inline: var(--space-24);
	}
}

/* ============================================================
		 SUBPAGE - DOCUMENTS
		 ============================================================ */

.documents {
	position: relative;
	padding-block: var(--section-padding-y);
	overflow: hidden;
}

.documents__pattern {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: var(--z-base);
	background-image: url(/img/lagom/bg-hexa_pattern.svg);
	background-size: cover;
	background-repeat: no-repeat;
	opacity: 1;
	pointer-events: none;
}

.laboratory {
	position: relative;
	padding-block: var(--section-padding-y);
	overflow: hidden;
}

.laboratory .container {
	display: flex;
	flex-direction: column;
	gap: var(--space-72);
}