/**
 * Stránka „Projekty EU" — pruh s trojlogom a tabuľka základných údajov.
 *
 * Načítava sa len na šablóne `page-projekty-eu` (`functions.php`), nie na
 * každej stránke webu: sú to dva selektory, ktoré inde nemajú čo robiť.
 *
 * @package SRZ_Rada
 * @since 1.57.0
 */

/* ============================================
   PRUH S TROJLOGOM
   ============================================ */

/* Logo je povinná publicita — nesmie sa stratiť v okrajoch obsahu, preto má
   vlastný svetlý pruh cez celú šírku obsahového stĺpca. */
.projekty-eu-loga {
	display: flex;
	justify-content: center;
	padding: 18px 20px;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
}

/* `max-width` v px, nie v percentách: pomer strán loga je 387,9 : 30,16,
   takže pri širokom okne by percentuálna šírka vyrobila pruh vysoký ako
   nadpis a logá by pôsobili ako hlavička stránky. `height: auto` drží pomer
   z `viewBox`, takže `width`/`height` na `<img>` slúžia už len na to, aby
   prehliadač pri načítaní nepreskakoval obsah. */
.projekty-eu-loga-obrazok {
	width: 100%;
	max-width: 900px;
	height: auto;
	display: block;
}

/* ============================================
   TABUĽKA ZÁKLADNÝCH ÚDAJOV
   ============================================ */

.page-projekty-eu .projekty-eu-udaje table {
	width: 100%;
	border-collapse: collapse;
}

.page-projekty-eu .projekty-eu-udaje th,
.page-projekty-eu .projekty-eu-udaje td {
	padding: 10px 14px;
	border: 1px solid #e3e3e3;
	text-align: left;
	vertical-align: top;
}

/* Prvý stĺpec je názov údaja — pevná šírka drží hodnoty v druhom stĺpci
   zarovnané pod sebou aj pri rôzne dlhých názvoch. */
.page-projekty-eu .projekty-eu-udaje th {
	width: 38%;
	background: #f6f9f8;
	font-weight: 600;
	color: #01523c;
}

.page-projekty-eu .projekty-eu-uvod {
	font-size: 1.08em;
	line-height: 1.7;
}

/* ============================================
   MOBIL
   ============================================ */

/* Pod 782 px sa tabuľka s dvoma stĺpcami nezmestí bez toho, aby sa hodnoty
   lámali po písmenách. Riadky sa preto rozložia pod seba — názov nad
   hodnotou. `display: block` na bunkách ruší tabuľkové rozloženie, pevná
   šírka prvého stĺpca by mu potom prekážala. */
@media (max-width: 782px) {
	.page-projekty-eu .projekty-eu-udaje tr {
		display: block;
		margin-bottom: 12px;
	}

	.page-projekty-eu .projekty-eu-udaje th,
	.page-projekty-eu .projekty-eu-udaje td {
		display: block;
		width: auto;
	}

	.page-projekty-eu .projekty-eu-udaje th {
		border-bottom: 0;
	}

	.projekty-eu-loga {
		padding: 12px 10px;
	}
}