/*
 * assets/css/static-pages.css — komponenty statických stránek (typ 6).
 *
 * Načítá se JEN na stránkách, které je používají. `main.css` je zrcadlo
 * mirroru a měří se proti němu parita, takže rozvržení bloků, které
 * originál nemá (showreel, podpis zakladatele), do něj nepatří —
 * týž princip jako u search.css a blog-related.css.
 *
 * Root font-size webu je 10 px (1rem = 10 px), stejně jako v main.css.
 * Barvy jsou změřené z main.css: #f5074c červená, #1c2727 antracit.
 */

/* ─────────────────────────────── showreel ─────────────────────────────── */

/*
 * Fasáda místo `<iframe>`: vložený přehrávač táhne ~1 MB skriptů z Googlu
 * při každém načtení, i když ho nikdo nespustí. `aspect-ratio` drží místo
 * dopředu, takže se stránka po načtení obrázku neposune (CLS).
 */
.za-showreel {
	position: relative;
	max-width: 96rem;
	margin: 0 auto;
}

.za-showreel-button {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #1c2727;
	cursor: pointer;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

.za-showreel-poster,
.za-showreel iframe {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}

.za-showreel-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8rem;
	height: 8rem;
	margin: -4rem 0 0 -4rem;
	border-radius: 50%;
	background: #f5074c;
	transition: transform 200ms;
}

.za-showreel-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	width: 0;
	height: 0;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 1.6rem 0 1.6rem 2.6rem;
	border-color: transparent transparent transparent #ffffff;
}

.za-showreel-button:hover .za-showreel-play,
.za-showreel-button:focus-visible .za-showreel-play {
	transform: scale(1.08);
}

/* Popisek pod přehrávačem je pro čtečky i pro myš — tlačítko samo je jen
   obrázek, takže bez něj by odkaz neměl viditelný text. */
.za-showreel-label {
	display: block;
	margin-top: 1.2rem;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 700;
	color: #1c2727;
}

/* ──────────────────────────────── O nás ───────────────────────────────── */

/*
 * Jeden čitelný sloupec, ne dva. Finální struktura (Jirka 25. 8.) je JEDEN
 * příběhový oblouk se subnadpisy; dvousloupcová sazba by u souvislého
 * vyprávění nutila oči skákat nahoru a dolů mezi sloupci.
 */
.za-onas-text {
	max-width: 78rem;
	margin: 0 auto;
}

/*
 * V dvousloupcovém rozvržení (Jirka 26. 8.) šířku určuje `.col-md-6`
 * z mirroru — vlastní strop by sloupec zúžil podruhé a text by se lámal
 * doprostřed poloviny stránky.
 */
.za-onas-text-col,
.row .za-onas-text {
	max-width: none;
}

/*
 * [Jirka 26. 8. večer] Slité odstavce na typ 6 stránkách (Fullservis,
 * Ubytování, Catering, Doprava, Kulturní program, Kariéra…): originál
 * odděluje odstavce `<br><br>` uvnitř JEDNOHO `<p>`, jenže wpautop je
 * při renderu rozláme na skutečné `<p>` — a mirrorové `p{margin:0}` je
 * pak slepí na nulovou mezeru. Obsah v DB je s originálem bajtově shodný,
 * rozdíl vzniká až v kaskádě. Dřívější poznámka „ostatní stránky si nesou
 * tvar originálu" stála na předpokladu, že mirror CSS + shodná data =
 * shodný render; wpautop ten předpoklad ruší. Mezera na živém webu =
 * jeden prázdný řádek = line-height: změřeno 23 px, od 1400 px šířky
 * 24 px. Px záměrně — živý web line-height NEškáluje s root font-size.
 */
.text-container p {
	margin-bottom: 23px;
}

.text-container p:last-child {
	margin-bottom: 0;
}

@media (min-width: 1400px) {
	.text-container p {
		margin-bottom: 24px;
	}
}

/*
 * Mirrorové `main.css` má `p{margin:0}` — Jirkův text O nás má odstavce
 * jako opravdové `<p>`, takže bez tohohle pravidla se slily do jednoho
 * bloku. Musí zůstat AŽ ZA obecným `.text-container p` výš: stejná
 * specificita, pozdější pravidlo vyhrává a O nás drží odladěných 1.8rem.
 */
.za-onas-text p {
	margin-bottom: 1.8rem;
}

.za-onas-text p:last-child {
	margin-bottom: 0;
}

.za-onas-text h2 {
	margin-top: 4rem;
}

.za-onas-text h2:first-child {
	margin-top: 0;
}

.za-onas-team {
	margin: 3rem 0;
}

.za-onas-team img {
	display: block;
	width: 100%;
	height: auto;
}

.za-onas-founder {
	display: flex;
	align-items: center;
	gap: 2.4rem;
}

.za-onas-founder-photo {
	flex-shrink: 0;
	width: 12rem;
	height: 12rem;
	border-radius: 50%;
	overflow: hidden;
}

.za-onas-founder-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.za-onas-founder-name {
	display: block;
	font-size: 1.8rem;
	color: #1c2727;
}

.za-onas-founder-role {
	display: block;
	margin-top: 0.4rem;
	font-size: 1.5rem;
	color: #5f6368;
}

.za-onas-cta {
	text-align: center;
}

@media (max-width: 575px) {
	.za-onas-founder {
		flex-direction: column;
		text-align: center;
	}
}