/**
 * Postranní bannery na detailu hry.
 *
 * Vlevo společná fotografie kandidátů (billboard-470.jpg) se třemi hlavními
 * myšlenkami hnutí, vpravo tvář kandidáta dané hry s jeho vizí pro Olomouc.
 * Zobrazují se jen na širokých obrazovkách; mobil a tablet vidí hru jako dosud.
 *
 * Fotky se berou z ../obrazky/ — zbylé placeholder SVG stačí nahradit skutečnou
 * fotografií (stejný název souboru, případně upravit src v index.html).
 */

/* logo hnutí v hlavičce místo textového nadpisu */
.logo-hnuti {
	display: block;
	height: 32px;
	width: auto;
	margin: 0 auto 12px;
}

/* logo ve hře je odkaz zpět na rozcestník */
.logo-odkaz {
	display: block;
	width: fit-content;
	margin: 0 auto;
}

/* zákonné označení politické reklamy; musí být čitelné na všech zařízeních */
.transparentnost {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 20px 36px;
	font-size: 12px;
	line-height: 1.6;
	color: #7B7378;
	text-align: center;
}
.transparentnost a { color: var(--svestka); }

.bok { display: none; }

@media (min-width: 1200px) {
	.rozlozeni {
		display: grid;
		grid-template-columns: minmax(250px, 330px) minmax(0, 600px) minmax(250px, 330px);
		justify-content: center;
		align-items: start;
		gap: 16px;
		padding: 0 24px;
	}

	.rozlozeni__stred { min-width: 0; }

	.bok {
		display: block;
		position: sticky;
		top: 24px;
		background: #FFFFFF;
	}

	.bok__foto { display: block; width: 100%; object-fit: cover; }
	/* poměr = skutečné rozměry billboard-470.jpg, fotka se nikdy neořezává */
	.bok__foto--billboard { aspect-ratio: 470 / 302; }
	/* Fotka nese atributy width/height, aby stránka při načítání neposkakovala.
	   Bez `height: auto` by ale pevná výška z atributu přebila aspect-ratio
	   a `object-fit: cover` by z fotky uřízl vršek i spodek. */
	.bok__foto--vyhry { aspect-ratio: 760 / 542; height: auto; }
	/* portrét drží přirozený poměr dodané fotky, nic se neořezává */

	.bok__obsah { padding: 18px 12px 20px; text-align: left; }

	/* Řez řídí fonty.css. Condensed unese i tenhle stupeň, protože je úzký —
	   ve verzálkách a v 15 px se ztrácel proti fotce nad sebou. */
	.bok__titulek {
		margin: 0 0 10px;
		font-size: 40px;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--svestka);
	}

	/* vize kandidáta pod jeho fotkou: velká osobní citace */
	.bok__rec {
		margin: 0;
		font-size: 23px;
		font-weight: 600;
		font-style: italic;
		line-height: 1.4;
		color: #2B2230;
	}

	/* tři hlavní myšlenky hnutí pod billboardem */
	/* ---- ceny v boku ---- */

	/*
	 * Kratší verze bloku z rozcestníku. Hlavní cena je jediné tučné místo,
	 * urgence drobná - v úzkém sloupci vedle hry by z víc než jedné věty
	 * byla stěna textu, kterou nikdo nečte.
	 */
	.vyhry-bok__hlavni {
		margin: 0 0 6px;
		font-size: 15px;
		font-weight: 800;
		line-height: 1.25;
		color: var(--svestka, #440099);
	}

	.vyhry-bok__text {
		margin: 0 0 8px;
		font-size: 12.5px;
		line-height: 1.55;
		color: #43393F;
	}

	.vyhry-bok__urgence {
		margin: 0;
		padding-top: 8px;
		border-top: 1px solid #E7E0E9;
		font-size: 11.5px;
		font-weight: 600;
		line-height: 1.5;
		color: #7B7378;
	}

	.bok__myslenky { margin: 0; padding: 0; list-style: none; }
	.bok__myslenky li {
		position: relative;
		padding: 9px 0 9px 22px;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.45;
		border-bottom: 2px solid #EFE9F0;
	}
	.bok__myslenky li:last-child { border-bottom: 0; padding-bottom: 2px; }
	.bok__myslenky li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 15px;
		width: 10px;
		height: 10px;
		background: var(--blankyt);
	}
}