/**
 * Blok „Napsali o nás“ – světle modrá karta s pásem log médií.
 *
 * Selektory jsou dvojúrovňové, aby přebily typografii Elementor kitu
 * (.elementor-kit-6 h2), která platí i na ručně psané bloky.
 *
 * Pás je nativně scrollovatelný viewport se třemi identickými sadami log
 * (vzor: sekce „Podporujeme“ na elpe.cz). JS ho pomalu posouvá, při najetí
 * myší nebo fokusu zastaví; sady navíc jsou jen proto, aby měl kam jet –
 * čtyři loga by se na širokém monitoru vešla bez pohybu.
 *
 * Každé logo sedí ve vlastní bílé dlaždici – loga mají hodně rozdílné poměry
 * stran i barvy a na společném podkladu by se hádala. Šířku loga v dlaždici
 * nese proměnná --bi-media-w z inline stylu (hodnota je v inc/napsali-o-nas.php).
 *
 * Nájezd: JS přidá třídu `bi-media--anim` jen bloku, který je při načtení pod
 * okrajem okna, a `is-in` ve chvíli, kdy na něj návštěvník doroluje. Bez JS
 * i při prefers-reduced-motion je blok rovnou vidět.
 *
 * Mobile first: základ je mobil ≤767, tablet od 768, desktop od 1131.
 */

.bi-media {
	--bi-media-gap: 12px;
	--bi-media-tile: 170px;

	padding: 40px 16px;
	font-family: Roboto, sans-serif;
	background: transparent;
}

.bi-media .bi-media__card {
	position: relative;
	max-width: 1320px;
	margin: 0 auto;
	padding: 32px 0 36px;
	border-radius: 24px;
	background: #e8eefb;
}

.bi-media .bi-media__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.bi-media .bi-media__title {
	margin: 0;
	padding: 0 20px;
	font-family: industry, sans-serif;
	font-size: clamp(20px, 1.3vw + 15px, 30px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	color: #23254f;
}

/* Tyrkysová linka pod nadpisem – signature akcent značky. */
.bi-media .bi-media__title::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	margin: 14px auto 0;
	border-radius: 2px;
	background: #00f5cb;
}

/* Pás */

.bi-media .bi-media__carousel {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 0 12px;
}

.bi-media .bi-media__viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	cursor: grab;
	/* Jemné rozplynutí u okrajů naznačí, že pás pokračuje. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
	/* Vlastní kompozitní vrstva – iOS jinak při scrollu překresluje masku po částech
	   a pás problikává. `contain` zabrání i řetězení scrollu na stránku. */
	overscroll-behavior-x: contain;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.bi-media .bi-media__viewport::-webkit-scrollbar {
	display: none;
}

.bi-media .bi-media__viewport:focus-visible {
	outline: 2px solid #00f5cb;
	outline-offset: 4px;
	border-radius: 12px;
}

.bi-media .bi-media__track {
	display: flex;
	gap: var(--bi-media-gap);
	width: max-content;
	margin-inline: 0;
	padding: 4px 0;
}

.bi-media .bi-media__group {
	display: flex;
	flex: 0 0 auto;
	gap: var(--bi-media-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Když se loga vejdou bez scrollování (málo log, široký monitor),
   JS přidá .is-static: pás stojí, šipky i rozplynutí zmizí. */
.bi-media .bi-media__carousel.is-static .bi-media__group[aria-hidden] {
	display: none;
}

.bi-media .bi-media__carousel.is-static .bi-media__viewport {
	cursor: default;
	-webkit-mask-image: none;
	mask-image: none;
}

.bi-media .bi-media__carousel.is-static .bi-media__nav {
	display: none;
}

/* Stojící pás = řádek log od levého kraje. Dlaždice pevné šířky by mezi ně
   nasypaly prázdno, takže se zúží na obsah a rozestup dělá větší mezera. */
.bi-media .bi-media__carousel.is-static .bi-media__item {
	flex: 0 0 auto;
}

.bi-media .bi-media__carousel.is-static .bi-media__group {
	gap: clamp(30px, 4vw, 72px);
}

.bi-media .bi-media__carousel.is-static .bi-media__link {
	padding-inline: 0;
}

.bi-media .bi-media__carousel.is-dragging {
	user-select: none;
}

.bi-media .bi-media__carousel.is-dragging .bi-media__viewport {
	cursor: grabbing;
}

.bi-media .bi-media__item {
	display: flex;
	flex: 0 0 var(--bi-media-tile);
	margin: 0;
	padding: 0;
}

.bi-media .bi-media__link {
	display: flex;
	flex: 1;
	-webkit-user-drag: none;
	align-items: center;
	justify-content: center;
	min-height: 88px;
	padding: 16px 14px;
	border: 0;
	border-radius: 16px;
	background: #fff;
	text-decoration: none;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.35s ease;
}

@media (hover: hover) {

	.bi-media .bi-media__link:hover {
		transform: translateY(-4px);
		box-shadow: 0 18px 34px -18px rgba(35, 37, 79, 0.4);
	}
}

.bi-media .bi-media__link:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 18px 34px -18px rgba(35, 37, 79, 0.4);
}

.bi-media .bi-media__link:focus-visible {
	outline: 2px solid #00f5cb;
	outline-offset: 4px;
}

.bi-media .bi-media__logo {
	display: block;
	width: calc(var(--bi-media-w, 160px) * 0.78);
	max-width: 82%;
	height: auto;
	/* Pojistka pro Safari: SVG bez pixelových rozměrů (nebo s procentními)
	   tam nemá vlastní poměr stran a `height: auto` ho umí roztáhnout přes
	   sousední dlaždici. Strop to utne dřív – a `object-fit` hlídá, aby se
	   logo při tom nezmáčklo, jen zmenšilo. */
	max-height: 64px;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

/* Šipky */

.bi-media .bi-media__nav {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: #23254f;
	cursor: pointer;
	transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.bi-media .bi-media__nav:hover,
.bi-media .bi-media__nav:focus-visible {
	transform: scale(1.06);
	background: #23254f;
	color: #fff;
}

.bi-media .bi-media__nav:focus-visible {
	outline: 2px solid #00f5cb;
	outline-offset: 3px;
}

.bi-media .bi-media__nav:disabled {
	opacity: 0.3;
	cursor: default;
	transform: none;
}

/* Nájezd – stav před odrolováním. */

.bi-media.bi-media--anim .bi-media__card {
	opacity: 0;
	transform: translateY(30px);
}

.bi-media.bi-media--anim .bi-media__title,
.bi-media.bi-media--anim .bi-media__item {
	opacity: 0;
	transform: translateY(16px);
}

.bi-media.bi-media--anim.is-in .bi-media__card {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bi-media.bi-media--anim.is-in .bi-media__title {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s ease 0.14s, transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0.14s;
}

.bi-media.bi-media--anim.is-in .bi-media__item {
	opacity: 1;
	transform: none;
	transition:
		opacity 0.5s ease calc(0.24s + var(--i, 0) * 0.08s),
		transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) calc(0.24s + var(--i, 0) * 0.08s);
}

@media (min-width: 768px) {

	.bi-media {
		--bi-media-gap: 16px;
		--bi-media-tile: 220px;

		padding: 56px 24px;
	}


	.bi-media .bi-media__card {
		padding: 44px 0 48px;
		border-radius: 30px;
	}

	.bi-media .bi-media__inner {
		gap: 30px;
	}

	.bi-media .bi-media__carousel {
		gap: 14px;
		padding: 0 20px;
	}

	.bi-media .bi-media__nav {
		width: 46px;
		height: 46px;
	}

	.bi-media .bi-media__link {
		min-height: 104px;
		padding: 20px 18px;
		border-radius: 18px;
	}

	.bi-media .bi-media__logo {
		width: calc(var(--bi-media-w, 160px) * 0.9);
		max-height: 64px;
	}
}

@media (min-width: 1131px) {

	.bi-media {
		--bi-media-gap: 20px;
		--bi-media-tile: 260px;

		padding: 72px 24px;
	}

	.bi-media .bi-media__card {
		padding: 56px 0 60px;
		border-radius: 36px;
	}

	.bi-media .bi-media__inner {
		gap: 36px;
	}

	.bi-media .bi-media__carousel {
		gap: 18px;
		padding: 0 28px;
	}

	.bi-media .bi-media__nav {
		width: 52px;
		height: 52px;
	}

	.bi-media .bi-media__link {
		min-height: 124px;
		padding: 24px 22px;
		border-radius: 20px;
	}

	.bi-media .bi-media__logo {
		width: var(--bi-media-w, 160px);
		max-height: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.bi-media .bi-media__link,
	.bi-media .bi-media__card,
	.bi-media .bi-media__title,
	.bi-media .bi-media__item,
	.bi-media .bi-media__nav {
		transition: none;
	}

	.bi-media .bi-media__link:hover,
	.bi-media .bi-media__link:focus-visible,
	.bi-media .bi-media__nav:hover {
		transform: none;
	}
}

/* ===========================================================================
   Podoba v hero sekci – bez karty a bez pozadí, loga přebarvená na bílou.
   Připojuje se za textový sloupec hero sekce, viz bi_media_hero_after_column()
   v inc/napsali-o-nas.php.
   =========================================================================== */

/* Hero sekce má pevnou výšku a obsah svisle na střed. Kdyby pás log do toho
   centrování vstupoval, text by se posunul dolů (a při vyšším hero ještě víc).
   Proto visí absolutně u spodní hrany hero sekce – nad místem, kam zespodu
   zajíždí následující sekce (-150 px, na mobilu -75 px). */
.bi-media.bi-media--hero {
	--bi-media-tile: 150px;

	width: 100%;
	/* Poslední prvek hero sekce odsazený doraz dolů. Oproti pevnému
	   `position: absolute; bottom: …` to drží i na šířkách, kde text naroste –
	   hero se protáhne, místo aby se loga nasunula na text. */
	margin-top: auto;
	padding: 0;
}

/* Popisek i loga začínají na stejné svislici jako nadpisy hero sekce.
   Text sedí v boxu 1400 px s odsazením 18 px, na užších displejích ho drží
   odsazení hero sekce (25 px) a textového sloupce (25 px na desktopu,
   10 px na tabletu, 15 px na mobilu) – clamp obě situace spojí. */
.bi-media.bi-media--hero .bi-media__card {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 15px;
	border-radius: 0;
	background: transparent;
}

@media (min-width: 768px) {

	.bi-media.bi-media--hero .bi-media__card {
		padding-left: 35px;
	}
}

@media (min-width: 1131px) {

	.bi-media.bi-media--hero .bi-media__card {
		/* Nadpis sedí v boxu 1400 px s odsazením 25 px; dokud je okno užší,
		   drží ho odsazení hero sekce a sloupce dohromady na 50 px. */
		padding-left: max( 25px, calc( 50px - max( 0px, ( 100vw - 1415px ) / 2 ) ) );
	}
}

.bi-media.bi-media--hero .bi-media__inner {
	align-items: stretch;
	gap: 10px;
}

/* Popisek i první logo začínají tam, kde nadpis hero sekce: hero má vlastní
   odsazení 25 px a textový sloupec v něm dalších 25 px. */
.bi-media.bi-media--hero .bi-media__title {
	padding: 0;
	text-align: left;
	font-size: clamp(11px, 0.3vw + 10px, 13px);
	letter-spacing: 0.22em;
	color: rgba(255, 255, 255, 0.7);
}

.bi-media.bi-media--hero .bi-media__carousel {
	padding: 0;
}

/* Loga jdou do ztracena: vlevo krátce (první logo má zůstat čitelné a zarovnané
   s hlavičkou), vpravo dlouze – tam pás pokračuje a mizí do pozadí. */
.bi-media.bi-media--hero .bi-media__viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 220px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 34px, #000 calc(100% - 220px), transparent);
}

/* Bez šipek – pás se ovládá tažením, kolečkem a dotykem. */
.bi-media.bi-media--hero .bi-media__nav {
	display: none;
}

.bi-media.bi-media--hero .bi-media__carousel {
	gap: 0;
}

.bi-media.bi-media--hero .bi-media__title::after,
.bi-media.bi-media--hero .bi-media__title::before {
	display: none;
}

.bi-media.bi-media--hero .bi-media__link {
	min-height: 48px;
	padding: 8px 10px;
	background: transparent;
	box-shadow: none;
}

.bi-media.bi-media--hero .bi-media__logo {
	/* Loga jsou každé jinak barevné – na video pozadí je sjednotíme do bílé. */
	filter: brightness(0) invert(1);
	opacity: 0.68;
	max-height: 48px;
}

/* Loga, která přebarvení nesnesou (text má stejnou barvu jako štítek okolo),
   zůstávají v originálních barvách – viz 'barevne' v bi_media_items(). */
.bi-media.bi-media--hero .bi-media__logo--barevne {
	filter: none;
	opacity: 0.92;
}

@media (hover: hover) {

	.bi-media.bi-media--hero .bi-media__link:hover .bi-media__logo {
		opacity: 1;
	}

	.bi-media.bi-media--hero .bi-media__link:hover {
		transform: translateY(-2px);
		box-shadow: none;
	}
}

.bi-media.bi-media--hero .bi-media__link:focus-visible .bi-media__logo {
	opacity: 1;
}

.bi-media.bi-media--hero .bi-media__link:focus-visible {
	transform: translateY(-2px);
	box-shadow: none;
}

.bi-media.bi-media--hero .bi-media__nav {
	width: 34px;
	height: 34px;
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	box-shadow: none;
}

.bi-media.bi-media--hero .bi-media__nav:hover,
.bi-media.bi-media--hero .bi-media__nav:focus-visible {
	background: #fff;
	color: #23254f;
}

@media (min-width: 768px) {

	.bi-media.bi-media--hero {
		--bi-media-tile: 180px;

		/* Hero má vlevo odsazení 25 px, hlavička centruje svých 1600 px přes
		   celou šířku okna – bez tohohle by pás seděl o 25 px vpravo. */
		margin-left: -25px;
		width: calc(100% + 25px);
	}

	.bi-media.bi-media--hero .bi-media__link {
		min-height: 56px;
	}

	.bi-media.bi-media--hero .bi-media__logo {
		max-height: 52px;
	}
}

@media (min-width: 1131px) {

	.bi-media.bi-media--hero {
		--bi-media-tile: 200px;
	}
}


/* Hero sekce s pásem log.
   Hero má obsah svisle na střed, takže jakákoli změna výšky posouvá nadpis.
   Proto ho tady místo centrování ukotvíme nahoře přesně tam, kde byl (220 px
   od horní hrany hero sekce = 120 px od horní hrany okna, hero je o 100 px
   vytažené nahoru), a přidanou výšku dole dostanou loga.
   Třídu přidává bi_media_hero_taller() jen při vykreslení bloku, takže stránka
   bez něj zůstává beze změny. */

.bi-hero--media {
	--justify-content: flex-start !important;
	--min-height: 840px !important;
	--padding-top: 110px !important;
	--padding-bottom: 190px !important;

	justify-content: flex-start !important;
	min-height: 840px !important;
	/* Mobil: 110 px je přesně tam, kde nadpis sedí i bez bloku – textový sloupec
	   si pod tím nese vlastní odsazení 150 px. Víc = zbytečná díra nad nadpisem. */
	padding-top: 110px !important;
	/* Spodní odsazení musí přeskočit dvě věci: šikmý tvarový předěl na spodní
	   hraně hero sekce (Elementor shape divider, 127 px) a přesah následující
	   sekce (-75 px na mobilu, -150 px jinde). Plus vzduch pod logy. */
	padding-bottom: 190px !important;
}

/* Tablet: textový sloupec je přes celou šířku, text je nižší – hero proto
   nepotřebuje tolik výšky, jinak mezi textem a logy zůstane díra. */
@media (min-width: 768px) {

	.bi-hero--media {
		--min-height: 790px !important;
		--padding-top: 220px !important;
		--padding-bottom: 215px !important;

		min-height: 790px !important;
		padding-top: 220px !important;
		padding-bottom: 215px !important;
	}
}

@media (min-width: 1131px) {

	.bi-hero--media {
		--min-height: 980px !important;

		min-height: 980px !important;
	}
}

/* Na mobilu je v pásu vidět jen pár log najednou, tak ať jsou ta nejznámější
   hned na druhém a třetím místě. Pořadí v `bi_media_items()` (a tím i na
   tabletu a desktopu) zůstává beze změny – tohle je jen vizuální přeskupení.
   Čísla odpovídají pořadí v PHP: 1 Metro, 2 Hrot24, 3 Finmag, 4 iDNES,
   5 CzechCrunch, 6 Peníze.cz, … Týká se jen v1; v2 má vlastní pořadí zvolené
   ručně (CzechCrunch, iDNES, …), a to platí na všech šířkách. */

@media (max-width: 767px) {

	.bi-media--v1 .bi-media__item:nth-child(1) {
		order: 1;
	}

	.bi-media--v1 .bi-media__item:nth-child(4) {
		order: 2;
	}

	.bi-media--v1 .bi-media__item:nth-child(5) {
		order: 3;
	}

	.bi-media--v1 .bi-media__item:nth-child(2) {
		order: 4;
	}

	.bi-media--v1 .bi-media__item:nth-child(3) {
		order: 5;
	}

	.bi-media--v1 .bi-media__item:nth-child(n + 6) {
		order: 6;
	}
}

/* ===========================================================================
   v2 — zkrácený výběr sedmi médií napevno na šířku, bez posunu.
   Vznikla 30. 10. 2026 na Tomášův podnět: šestnáct médií neslo tu samou
   tiskovou zprávu a pás se nikdo nestihl dokoukat. Na webu od 30. 10. 2026 (bi_media_verze() v inc/napsali-o-nas.php).
   =========================================================================== */

.bi-media.bi-media--v2 .bi-media__carousel {
	padding: 0;
}

/* Mobil: řádek se dá posunout prstem, proto rozplynutí vpravo zůstává.
   Od tabletu výš se vejde celý, takže ani scroll, ani maska. */
.bi-media.bi-media--v2 .bi-media__viewport {
	cursor: default;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}

@media (min-width: 768px) {

	.bi-media.bi-media--v2 .bi-media__viewport {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
		transform: none;
	}
}

.bi-media.bi-media--v2 .bi-media__track {
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Na mobilu se sedm log do šířky nevejde a zalomená do čtyř řad by snědla
   půl úvodní obrazovky. Zůstávají proto v jedné řadě, kterou jde prstem
   posunout – nic se ale nehýbe samo. Od tabletu výš se vejdou všechna. */
.bi-media.bi-media--v2 .bi-media__group {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 22px 32px;
	width: max-content;
}

@media (min-width: 768px) {

	.bi-media.bi-media--v2 .bi-media__group {
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 100%;
	}
}

.bi-media.bi-media--v2 .bi-media__item {
	flex: 0 0 auto;
}

.bi-media.bi-media--v2 .bi-media__link {
	min-height: 0;
	padding: 0;
}

/* Logo vyplní svůj rámeček celé – jinak ho `max-width: 82 %` zmenší a zbytek
   místa se rozdělí na obě strany, takže první logo nezačíná na svislici
   popisku. Hodnoty jsou původní šířky × 0,82, aby se velikost nezměnila. */
.bi-media.bi-media--v2 .bi-media__logo {
	width: calc(var(--bi-media-w, 160px) * 0.64);
	max-width: none;
}

.bi-media.bi-media--v2 .bi-media__link {
	justify-content: flex-start;
}

/* CzechCrunch je ze všech výstupů nejsilnější, tak musí být největší.
   Jeho logo je tenký nápis 180 × 21, takže „největší" se měří výškou, ne
   šířkou: při stejné výšce jako ostatní by vypadalo menší. Faktory dávají
   výšku ~22 px na mobilu, ~24 px na tabletu a ~26 px na desktopu. Při
   32 px (× 1,63) už přebíjel celou řadu – tučný nápis je opticky těžší
   než stejně vysoká loga ostatních. */
.bi-media.bi-media--v2 .bi-media__item--hlavni .bi-media__logo {
	width: calc(var(--bi-media-w, 160px) * 1.12);
}

@media (min-width: 768px) {

	.bi-media.bi-media--v2 .bi-media__group {
		gap: 26px 40px;
	}

	.bi-media.bi-media--v2 .bi-media__logo {
		width: calc(var(--bi-media-w, 160px) * 0.74);
	}

	.bi-media.bi-media--v2 .bi-media__item--hlavni .bi-media__logo {
		width: calc(var(--bi-media-w, 160px) * 1.25);
	}
}

@media (min-width: 1131px) {

	.bi-media.bi-media--v2 .bi-media__group {
		flex-wrap: nowrap;
		/* Mezera roste s oknem: na nejužším desktopu (1131 px) se sedm log vejde
		   jen při 28 px, na širokém je vzduchu dost na 72 px. */
		gap: 0 clamp( 28px, calc( ( 100vw - 1000px ) / 10 ), 72px );
	}

	.bi-media.bi-media--v2 .bi-media__logo {
		width: calc(var(--bi-media-w, 160px) * 0.82);
	}

	/* Řada se nezalamuje, takže na nejužším desktopu (1131–1230 px) není pro
	   plnou velikost místo – tam CzechCrunch roste s oknem a nikdy nepřeteče
	   (ostatní loga + mezery ≈ 960 px). Od ~1190 px má plných 227 px. */
	.bi-media.bi-media--v2 .bi-media__item--hlavni .bi-media__logo {
		width: clamp( 168px, calc( 100vw - 965px ), calc( var(--bi-media-w, 160px) * 1.35 ) );
	}
}