/*--------------------------------------------------------------
# Ceník služeb

Karty s cenou, dnes na /masaze/. Stavěné z bloku core/columns:
`<!-- wp:columns {"className":"cenik"} -->` a v každém sloupci jedna
položka. Columns schválně místo vnořených core/group - group si nese
mezistupeň .wp-block-group__inner-container (téma nemá theme.json),
takže by mřížka musela mířit na něj a rozbila by se v den, kdy
theme.json vznikne. Sloupce ten mezistupeň nemají.

Vzhled karty je záměrně tentýž jako u .facts v patičce
(60-komponenty/fakta-a-pravni.css): průsvitné bílé pozadí 4 %, obrys 8 %
a zaoblení --lt-radius. Ať web nemá dvě různé "karty".

KE SPECIFICITĚ: pravidla se píšou dvěma třídami (.cenik .cenik__cena),
ne s prefixem .entry-content, jak to dělá 60-komponenty/tlacitka.css.
Důvod: (0,2,0) přebije `.entry-content p` (0,1,1) ze základu úplně
stejně, ale navíc to platí i v canvasu editoru, kde žádný obal
.entry-content není. Ceník tedy vypadá v editoru jako na webu.
--------------------------------------------------------------*/

.cenik {
	margin: 32px 0;
}

.cenik > .wp-block-column {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--lt-radius);
	padding: 28px 24px;
}

.cenik .cenik__nazev {
	margin: 0 0 12px;
	font-size: 1.25rem;
	line-height: 1.3;
}

/*
 * Cena je jediné místo na stránce, kde se používá akcentní oranžová na
 * text. Je to vědomé - má nést pohled stejně jako tlačítko, ale nesmí
 * vypadat jako odkaz, proto bez podtržení a bez hover stavu.
 */
.cenik .cenik__cena {
	margin: 0;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--barva-akcent);
}

.cenik .cenik__detail {
	margin: 4px 0 0;
	font-size: 0.9rem;
	opacity: 0.7;
}

.cenik .cenik__popis {
	margin: 16px 0 0;
}

/*
 * Poznámka pod ceníkem (dostupnost, objednání na místě). Drží se
 * vizuálně při zemi, aby nekonkurovala cenám ani tlačítku pod ní.
 */
.cenik-poznamka {
	margin: 0 0 24px;
	font-size: 0.9rem;
	opacity: 0.7;
}

@media (max-width: 781px) {
	/*
	 * Pod 782px jádro sloupce skládá pod sebe (wp-block-columns:not(.is-not-stacked-on-mobile)),
	 * ale mezera mezi nimi zůstává na block-gap. Karty by se dotýkaly,
	 * proto odsazení zespoda.
	 */
	.cenik > .wp-block-column + .wp-block-column {
		margin-top: 16px;
	}
}