/*
 * Sdílené komponenty (spec §6).
 *
 * Používají se napříč šablonami. Cokoliv, co je jen pro jednu stránku, patří
 * do pages.css.
 */

/* ------------------------------------------------------- nadpis sekce §6 */

/*
 * Nadpis a za ním vodorovná linka, která vyplní zbytek řádku. Specifikace to
 * označuje za hlavní rytmický prvek stránky -- proto je to komponenta a ne
 * ad-hoc značka, aby u každé sekce vypadal stejně.
 */
.rs-sectionhead {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 22px var(--rs-gutter) 10px;
}

.rs-sectionhead__title {
	margin: 0;
	font-family: var(--rs-font-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--rs-text);
}

.rs-sectionhead__rule {
	flex-grow: 1;
	height: 1px;
	background: var(--rs-line);
}

.rs-sectionhead__more {
	flex-shrink: 0;
	font-family: var(--rs-font-display);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--rs-red);
}

/* ------------------------------------------------------- placeholder §5,§6 */

/*
 * Plocha s vodoznakem ruky. Ukáže se, než se načte fotka, a zůstane u článku,
 * který úvodní fotku nemá. Nikdy nepřekrývá načtenou fotku (spec §5).
 */
.rs-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rs-surface-2);
	border-radius: var(--rs-radius);
	overflow: hidden;
}

/*
 * Dvě třídy schválně. Fotka v placeholderu má vyplnit jeho plochu, a to i
 * uvnitř .rs-prose, kde platí img { height: auto } pro obrázky v textu --
 * to je (0,1,1) a jednu třídu by přebilo.
 */
.rs-ph .rs-ph__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Jediná výjimka z ořezu: hlavní fotka v galerii se vejde celá (spec §6). */
.rs-ph--contain .rs-ph__img {
	object-fit: contain;
}

/* ------------------------------------------------------------- chip §6 */

.rs-chip {
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 13px;
	border: 1px solid var(--rs-line);
	border-radius: 18px;
	background: var(--rs-surface);
	font-family: var(--rs-font-display);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.6px;
	color: var(--rs-text);
}

/*
 * Klikací chip je 36 vysoký, což je pod dotykovým minimem. Neviditelná oblast
 * kolem něj ho dotáhne na 44, aniž by se rozvržení pohnulo (spec §6, §14.7).
 */
a.rs-chip::before,
button.rs-chip::before {
	content: "";
	position: absolute;
	inset: -4px;
}

a.rs-chip,
button.rs-chip {
	position: relative;
}

.rs-chip--info {
	height: 24px;
	padding: 0 9px;
	border: 0;
	border-radius: 12px;
	background: var(--rs-surface-2);
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--rs-muted-2);
}

.rs-chip--outline {
	height: 34px;
	padding: 0 12px;
	border-radius: 17px;
	background: none;
	font-size: 12px;
	letter-spacing: 0.8px;
	color: var(--rs-muted);
}

/*
 * Štítek je o 2 px nižší než základní chip, takže mu inset -4 na 44 nestačí
 * (změřeno: 34 + 8 = 42). Vlastní inset -5 => 44 přesně.
 */
a.rs-chip--outline::before,
button.rs-chip--outline::before {
	inset: -5px;
}

/* ------------------------------------------------------- odznak rubriky §6 */

.rs-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	/* Vlevo míň, protože tam sedí ruka. */
	padding: 5px 9px 5px 7px;
	background: var(--rs-red);
	color: #FFFFFF;
	font-family: var(--rs-font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	/* Bez zaoblení, záměrně. */
	border-radius: 0;
}

/* ---------------------------------------------------------- tlačítka §6 */

.rs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--rs-radius);
	background: var(--rs-red);
	color: #FFFFFF;
	font-family: var(--rs-font-display);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	cursor: pointer;
}

.rs-btn--outline {
	background: none;
	border: 1px solid var(--rs-red);
	/* Ne --rs-red: ta na tmavém pozadí nemá kontrast 4,5:1 (spec §2). */
	color: var(--rs-red-light);
}

.rs-btn--round {
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--rs-line);
	border-radius: 50%;
	background: var(--rs-surface);
	color: var(--rs-text);
}

/* ------------------------------------------------------------- hledání */

.rs-search {
	padding: 12px var(--rs-gutter) 16px;
}

/* Popisek jen pro odečítač obrazovky -- vedle placeholderu by byl navíc. */
.rs-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.rs-search__row {
	display: flex;
	gap: 8px;
}

.rs-search__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--rs-tap);
	padding: 0 12px;
	background: var(--rs-surface);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius);
	color: var(--rs-text);
	font-family: var(--rs-font-body);
	/* Pod 16 px iOS při fokusu zoomuje a rozhodí celé rozvržení. */
	font-size: 16px;
}

.rs-search__input::placeholder {
	color: var(--rs-muted);
}

.rs-search__submit {
	flex-shrink: 0;
}

/*
 * Pole hledání rozbalené v hlavičce. Bere celý řádek pod ní, takže se hlavička
 * musí umět zalomit -- proto flex-basis 100 % a order na konec.
 */
.rs-headersearch {
	flex: 0 0 100%;
	order: 9;
	margin: 0 calc(-1 * var(--rs-gutter));
	border-top: 1px solid var(--rs-line-inset);
}

.rs-headersearch[hidden] {
	display: none;
}

.rs-header:has(.rs-headersearch:not([hidden])) {
	flex-wrap: wrap;
	height: auto;
	min-height: var(--rs-header-h);
}

/* ---------------------------------------------------------------- hláška */

/*
 * Krátká zpráva po akci, kterou není jinak vidět -- například "Odkaz
 * zkopírován" po sdílení. Bez ní tlačítko sdílení vypadá pořád stejně
 * rozbitě, jako když neexistovala obsluha.
 */
.rs-toast {
	position: fixed;  /* §14.1 OK: hláška po akci čtenáře, sama zmizí za 2,6 s */
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom));
	z-index: 90;
	transform: translateX(-50%);
	max-width: calc(100vw - 2 * var(--rs-gutter));
	padding: 10px 16px;
	background: var(--rs-surface);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius);
	font-family: var(--rs-font-display);
	font-size: 13px;
	letter-spacing: 0.4px;
	color: var(--rs-text);
	text-align: center;
	box-shadow: 0 8px 28px -12px rgba(0, 0, 0, 0.9);
}

/* ------------------------------------------------------ reklamní slot §6 */

/*
 * Výška je rezervovaná vždy. Reklama nesmí posunout text, který už někdo čte
 * (spec §14.8), a nesmí přetéct šířku obsahu (§14.2).
 */
.rs-ad {
	padding: 18px var(--rs-gutter) 4px;
}

/*
 * Label REKLAMA.
 *
 * Spec dává na tenhle label --rs-faint (§2, tabulka typografie v §3), ale
 * #56565F na --rs-ground je 2,67:1 a §15 vyžaduje 4,5:1 pro text pod 24 px.
 * Ta dvě místa specifikace si odporují a §15 je přejímací kritérium, takže
 * vyhrává ono -- stejné rozhodnutí jako u --rs-red u rubrikových labelů.
 *
 * Navíc je to tady věcně správně: označení reklamy má být čitelné. Pravidla
 * partnerského programu Seznamu chtějí reklamu jasně odlišenou od obsahu,
 * a label, který není vidět, to nesplňuje.
 *
 * --rs-muted na --rs-ground = 7,22:1 (změřeno v prohlížeči).
 */
.rs-ad__label {
	margin-bottom: 6px;
	font-family: var(--rs-font-display);
	font-size: 9px;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--rs-muted);
}

.rs-ad__slot {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	overflow: hidden;
	background: var(--rs-surface);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius);
	font-family: var(--rs-font-display);
	font-size: 11px;
	letter-spacing: 1.4px;
	color: var(--rs-muted);  /* totéž co u labelu: --rs-faint nedá 4,5:1 */
}

/*
 * Zóny Seznamu: mobilní na mobilu, desktopové na desktopu.
 *
 * Tohle není styl přejatý z FlyMagu, ale způsob, jakým jsou na tomhle webu
 * zacílené smluvní zóny -- třídy .mobile-ads a .desktop-ads si nese samo
 * jejich HTML, ať už je vkládá widget, Ad Inserter nebo autor do článku.
 * FlyMag přepíná na 970 px a ta hranice se tu drží, i když zlom šablony je
 * 768: posouvat ji by znamenalo měnit, která zóna se komu ukáže, a to je věc
 * smlouvy, ne vzhledu.
 *
 * Bez toho pravidla se mobilní zóna ssp-zone-116275, kterou Ad Inserter
 * vkládá do výpisu na titulce, vykreslovala i na 1 440 px (změřeno 282 × 215)
 * a rozbíjela pás panelů -- seděla v jedné buňce mřížky a čtvrtý článek
 * přetekl na druhý řádek.
 */
@media (min-width: 970px) {
	.mobile-ads {
		display: none;
	}

	/*
	 * Schovat samotnou zónu nestačí. Ad Inserter ji balí do vlastního
	 * .code-block a ten v mřížce dál drží buňku -- změřeno: pás panelů měl
	 * pořád dva řádky, jen s prázdným místem po zóně. Schovává se proto celý
	 * obal, ale jen když v něm není nic jiného.
	 */
	.code-block:has(.mobile-ads):not(:has(.desktop-ads)) {
		display: none;
	}
}

@media (max-width: 969px) {
	.desktop-ads {
		display: none;
	}

	.code-block:has(.desktop-ads):not(:has(.mobile-ads)) {
		display: none;
	}
}

/*
 * Blok, který se vykresluje, ať v pásu zabere celý řádek místo toho, aby
 * v něm udělal díru.
 */
.rs-list > .code-block,
.rs-grid > .code-block {
	grid-column: 1 / -1;
}

.rs-ad__slot--home { height: 104px; }
.rs-ad__slot--article { height: 92px; }
.rs-ad__slot--rail { height: 250px; }

/* ---------------------------------------------------- partnerská dlaždice */

.rs-partner {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background: var(--rs-surface);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius);
	font-family: var(--rs-font-display);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.6px;
	text-align: center;
	color: var(--rs-muted-2);
}

/* ------------------------------------------------------------- hover §13 */

/*
 * Jen na zařízeních s kurzorem. Přebarví se titulek, fotka se lehce zesvětlí.
 * Nic se nezvětšuje ani neposouvá.
 */
@media (hover: hover) {
	a:hover .rs-item__title,
	a:hover .rs-card__title {
		color: var(--rs-red-light);
	}

	a:hover .rs-ph__img {
		filter: brightness(1.06);
	}
}