/*--------------------------------------------------------------
# Nejbližší volné termíny

Seznam ul.near > li.near, který na stránku přináší shortcode
[remote_content] z rezervačního systému is2.lecba-tmou.cz. Markup je
vzdálený a nedá se do něj sáhnout, takže veškerá úprava jde přes CSS.

Proč to bylo rozbité: strojový výběr pravidel z Astry se řídil soupisem
tříd z vyrenderovaných stránek a třída `near` v něm chyběla - obsah se
tahá vzdáleně a při sběru soupisu se nevykreslil. Pravidla pro li.near
tak vypadla a řádky zůstaly bez rámečku, bez pozadí a s krémovým textem.

Rámeček přebírá vzhled z Astry (světle šedý box, černý tučný text).
Tlačítko má na Tomášovo přání vzhled .btn-orange, ne původní menší
variantu - proto je řádek vyskládaný flexem, aby velké tlačítko
nerozhazovalo text.
--------------------------------------------------------------*/

.entry-content ul.near {
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-content li.near {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;

	/* Vzhled boxu podle Astry. */
	background-color: #ddd;
	border: 1px solid #000;
	border-radius: 8px;
	color: #000;
	font-weight: 700;
	list-style-type: none;

	padding: 12px 12px 12px 20px;
	margin: 0 0 12px;
}

.entry-content li.near:last-child {
	margin-bottom: 0;
}

/*
 * Tlačítko ve stejném vzhledu jako .btn-orange (viz tlacitka.css):
 * oranžové pozadí, černý text, zaoblení 8 px, tučně, bez podtržení.
 * Astra tu měla menší variantu s bílým textem a podtržením.
 */
.entry-content li.near a,
.entry-content li.near a:visited {
	display: inline-block;
	background-color: var(--barva-akcent);
	color: var(--barva-na-akcentu);
	border: 0;
	border-radius: 8px;
	padding: 10px 20px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

/* Zdrojový text z API chodí malým písmenem. */
.entry-content li.near a::first-letter {
	text-transform: uppercase;
}

/*
 * Hover je stejný jako u .btn-orange v tlacitka.css: pohasnutí a bílý text.
 * Astra tu měla #f09e3f, což je světlejší než základ — tedy rozjasnění
 * místo pohasnutí, navíc s černým textem. Nesedělo to se zbytkem webu.
 */
.entry-content li.near a:hover,
.entry-content li.near a:focus {
	background-color: #b9690a;
	color: #fff;
	text-decoration: none;
}

/*
 * Dvě tlačítka u jednoho termínu.
 *
 * Termín volný na týden i na 3 noci nabízí is2 dvěma tlačítky, aby se
 * nemuselo hádat, kterou délku návštěvníkovi předvybrat. Tlačítka chodí
 * obalená ve <span class="near-actions"> — bez obalu by je flex v li.near
 * rozházel, protože text položky je holý textový uzel a se space-between
 * by se všechny tři položky roztáhly po řádku.
 */
.entry-content li.near .near-actions {
	display: flex;
	flex-wrap: wrap;   /* na úzké obrazovce se tlačítka srovnají pod sebe */
	gap: 10px;
}

/*
 * Kratší varianta zeleně. Hodnoty jsou stejné jako .btn-green
 * v 60-komponenty/tlacitka.css, ať tlačítka sedí se zbytkem webu.
 * Delší varianta žádné pravidlo nepotřebuje — dědí oranžovou
 * z .entry-content li.near a výše.
 */
.entry-content li.near a.near-btn-3,
.entry-content li.near a.near-btn-3:visited {
	background-color: #61ce70;
	color: #000;
}

/* Hover kratší varianty podle .btn-green — rovněž pohasnutí a bílý text. */
.entry-content li.near a.near-btn-3:hover,
.entry-content li.near a.near-btn-3:focus {
	background-color: #52af5f;
	color: #fff;
}