/* ============================================================
   mod_bhg_features – výhody / karty (rodina mod_bhg_*)
   Vzniklo z mod_deer_perks 1.9.2 (varianta „icons“) a mod_deer_vibes 1.3.2 (varianta „cards“).

   ARCHITEKTURA:
   - Třídy .bhg-features__* nesou strukturu (rozvržení, rozměry) na běžné specificitě.
   - Výchozí VZHLED (typografie, barvy) je v :where(…) = nulová specificita, takže třídy
     z administrace (card_class, title_class …) i pravidla šablony pro h3/p ho přebijí bez !important.
   - Barvy a písma přes společné proměnné --bhg-* (nastavuje šablona) se zálohou na tokeny DEER
     a pevnou hodnotu – viz weby\postupy\M1. Lokální proměnné --bhg-features-* smí web přepsat.
   ============================================================ */

.bhg-features {
	--bhg-features-accent:     var(--bhg-color-accent, var(--c-grain-400, #b8955a));
	--bhg-features-text:       var(--bhg-color-on-dark-muted, var(--c-forest-100, currentColor));
	/* Neproporcionální písmo má jen ZS (--ff-mono); jinde písmo textu webu */
	--bhg-features-font-mono:  var(--ff-mono, var(--bhg-font-body, var(--ff-body, var(--cassiopeia-font-family-body, inherit))));
	--bhg-features-fs-sm:      var(--bhg-fs-sm, var(--typo-c1-fs, .875rem));
	--bhg-features-lh-sm:      var(--bhg-lh-sm, var(--typo-c1-lh, 1.57));
	--bhg-features-badge-size: 64px;
	--bhg-features-icon-size:  60%;

	/* Karty (varianta cards) */
	--bhg-features-card-bg:     var(--c-forest-350, color-mix(in srgb, currentColor 6%, transparent));
	--bhg-features-card-border: var(--c-forest-300, color-mix(in srgb, currentColor 14%, transparent));
	--bhg-features-card-radius: var(--bhg-radius-card, var(--radius-sm, 0px));
	--bhg-features-card-pad:    var(--bhg-space-4, var(--space-4, 1.5rem));
	--bhg-features-card-gap:    var(--bhg-space-4, var(--space-4, 1.5rem));
	--bhg-features-pad-y:       var(--space-6, clamp(3rem, 1.6rem + 7vw, 6rem));
	--bhg-features-inner-max:   1320px;

	/* Mřížka (varianta icons = rozestupy Bootstrap g-5 / gy-lg-0 z mod_deer_perks) */
	--bhg-features-cols:    1;
	--bhg-features-col-gap: 3rem;
	--bhg-features-row-gap: 3rem;

	position: relative;
}

/* ---------- Akcent ---------- */
/* Motivy (nest/roots/apple): modul vypíše jen data-bhg-theme, barvu motivu nastaví šablona webu
   přes --bhg-color-accent (jednotně pro celou rodinu, viz M1). Bez pravidla v šabloně = akcent webu. */
.bhg-features--accent-none           { --bhg-features-accent: var(--bhg-color-on-dark, var(--c-surface, #f0f3ff)); }
.bhg-features--accent-inherit         { --bhg-features-accent: currentColor; }

/* ---------- Motiv sekce (pozadí) ---------- */
.bhg-features--theme-dark {
	background: var(--bhg-color-surface-dark, var(--c-forest-400, #1f1a24));
}

.bhg-features--theme-plum {
	background: var(--c-forest-300, #392745);
	--bhg-features-card-bg: var(--c-forest-400, color-mix(in srgb, currentColor 6%, transparent));
}

.bhg-features--theme-light {
	background: var(--c-canvas, #f4f1ea);
	--bhg-features-text:        var(--bhg-color-text-muted, var(--color-text-muted, #5c5c5c));
	--bhg-features-card-bg:     var(--c-surface, #fff);
	--bhg-features-card-border: color-mix(in srgb, var(--bhg-color-heading, var(--c-forest-400, #1f1a24)) 10%, transparent);
}

/* Barvy textu u motivů s pozadím. Specificita jedné třídy: přebije pravidla šablony pro h2/h3/p,
   třídy z administrace (načtené později nebo s !important) ji přebijí. Bez pozadí platí jen :where níže. */
.bhg-features--theme-dark,
.bhg-features--theme-plum {
	--bhg-features-text:    color-mix(in srgb, var(--bhg-color-on-dark, var(--c-surface, #f0f3ff)) 78%, transparent);
	--bhg-features-heading: var(--bhg-color-on-dark, var(--c-surface, #f0f3ff));
}

.bhg-features--theme-light {
	--bhg-features-heading: var(--bhg-color-heading, var(--c-forest-400, #1f1a24));
}

:where(.bhg-features:not(.bhg-features--theme-none)) .bhg-features__heading,
:where(.bhg-features--cards:not(.bhg-features--theme-none)) .bhg-features__title {
	color: var(--bhg-features-heading);
}

:where(.bhg-features--icons:not(.bhg-features--theme-none)) .bhg-features__title {
	color: var(--bhg-features-accent);
}

:where(.bhg-features:not(.bhg-features--theme-none)) .bhg-features__text,
:where(.bhg-features:not(.bhg-features--theme-none)) .bhg-features__lead {
	color: var(--bhg-features-text);
}

/* Odsazení sekce: karty vždy, ikony jen s pozadím */
.bhg-features--cards,
.bhg-features--icons:not(.bhg-features--theme-none) {
	padding-block: var(--bhg-features-pad-y);
	isolation: isolate;
}

.bhg-features--fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.bhg-features--fullbleed .bhg-features__inner {
	max-width: var(--bhg-features-inner-max);
	margin-inline: auto;
	padding-inline: var(--bhg-space-4, var(--space-4, 1.5rem));
}

/* ---------- Hlavička sekce ---------- */
.bhg-features__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-5, clamp(25px, 14px + 3.4vw, 48px));
}

.bhg-features__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-3, clamp(8px, 4.7px + 1.1vw, 16px));
	max-width: 62ch;
}

.bhg-features--head-center .bhg-features__head {
	max-width: 56ch;
	margin-inline: auto;
	text-align: center;
}

.bhg-features__heading {
	margin: 0;
}

.bhg-features__lead {
	max-width: 48ch;
}

.bhg-features--head-center .bhg-features__lead {
	margin-inline: auto;
}

.bhg-features__lead > :last-child {
	margin-bottom: 0;
}

/* ---------- Mřížka (flex: neúplná řada jde vystředit) ---------- */
.bhg-features__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bhg-features-row-gap) var(--bhg-features-col-gap);
}

.bhg-features__item {
	flex: 0 0 calc((100% - (var(--bhg-features-cols) - 1) * var(--bhg-features-col-gap)) / var(--bhg-features-cols));
	min-width: 0;
}

/* icons: 2 → 1/2 od 768; 3 → 1/3 od 768; 4 → 2/4 od 768; řádky bez mezery od 992 */
.bhg-features--icons.bhg-features--cols-4 { --bhg-features-cols: 2; }

@media (min-width: 768px) {
	.bhg-features--icons.bhg-features--cols-2 { --bhg-features-cols: 2; }
	.bhg-features--icons.bhg-features--cols-3 { --bhg-features-cols: 3; }
	.bhg-features--icons.bhg-features--cols-4 { --bhg-features-cols: 4; }
}

@media (min-width: 992px) {
	.bhg-features--icons { --bhg-features-row-gap: 0px; }
}

/* Řádkový rozestup jako Bootstrap gutter (záporný okraj mřížky + okraj položek), ne gap:
   záporný okraj se slévá s horním okrajem modulu (např. mt-5) stejně jako u mod_deer_perks. */
.bhg-features--icons .bhg-features__inner {
	display: block;
}

.bhg-features--icons .bhg-features__head {
	margin-bottom: var(--space-5, clamp(25px, 14px + 3.4vw, 48px));
}

.bhg-features--icons .bhg-features__grid {
	row-gap: 0;
	margin-top: calc(-1 * var(--bhg-features-row-gap));
}

.bhg-features--icons .bhg-features__item {
	margin-top: var(--bhg-features-row-gap);
}

.bhg-features--icons.bhg-features--center .bhg-features__grid {
	justify-content: center;
	text-align: center;
}

.bhg-features--icons.bhg-features--start .bhg-features__grid {
	text-align: start;
}

/* cards: 2 → 1/2 od 576; 3 → 1/2 od 768/3 od 992; 4 → 1/2 od 576/4 od 992 */
.bhg-features--cards {
	--bhg-features-col-gap: var(--bhg-features-card-gap);
	--bhg-features-row-gap: var(--bhg-features-card-gap);
}

@media (min-width: 576px) {
	.bhg-features--cards.bhg-features--cols-2,
	.bhg-features--cards.bhg-features--cols-4 { --bhg-features-cols: 2; }
}

@media (min-width: 768px) {
	.bhg-features--cards.bhg-features--cols-3 { --bhg-features-cols: 2; }
}

@media (min-width: 992px) {
	.bhg-features--cards.bhg-features--cols-3 { --bhg-features-cols: 3; }
	.bhg-features--cards.bhg-features--cols-4 { --bhg-features-cols: 4; }
}

/* ---------- Položka ---------- */
.bhg-features__item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.bhg-features--start .bhg-features__item {
	align-items: flex-start;
}

.bhg-features--cards .bhg-features__item {
	position: relative;
	gap: var(--bhg-space-2, var(--space-2, .5rem));
	padding: var(--bhg-features-card-pad);
	background: var(--bhg-features-card-bg);
	border: 1px solid var(--bhg-features-card-border);
	border-radius: var(--bhg-features-card-radius);
	overflow: hidden;
}

.bhg-features--cards.bhg-features--start .bhg-features__item {
	align-items: stretch;
}

.bhg-features--cards.bhg-features--center .bhg-features__item {
	text-align: center;
}

.bhg-features--cards .bhg-features__title {
	margin: 0;
}

.bhg-features--cards .bhg-features__text {
	margin-bottom: 0;
}

.bhg-features__text > :last-child {
	margin-bottom: 0;
}

/* Položka jako odkaz */
.bhg-features__item--link {
	color: inherit;
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease;
}

.bhg-features__item--link:hover,
.bhg-features__item--link:focus-visible {
	color: inherit;
	text-decoration: none;
}

.bhg-features--cards .bhg-features__item--link:hover,
.bhg-features--cards .bhg-features__item--link:focus-visible {
	border-color: color-mix(in srgb, var(--bhg-color-on-dark, var(--c-surface, #f0f3ff)) 28%, transparent);
}

.bhg-features--cards.bhg-features--theme-light .bhg-features__item--link:hover,
.bhg-features--cards.bhg-features--theme-light .bhg-features__item--link:focus-visible {
	border-color: color-mix(in srgb, var(--bhg-color-heading, var(--c-forest-400, #1f1a24)) 28%, transparent);
}

.bhg-features--icons .bhg-features__item--link:hover .bhg-features__title {
	text-decoration: underline;
}

.bhg-features__item--link:focus-visible {
	outline: none;
	box-shadow: var(--bhg-focus-ring, var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--bhg-features-accent) 60%, transparent)));
}

/* ---------- Odznak ----------
   Rozměr se specificitou 0,2,0: v mod_deer_perks se CSS modulu načítalo až za user.css šablony, takže velikost
   odznaku přebila třídy šablony (TP .trust-icon 56 px v badge_class). Přes WAM se CSS modulu načítá dřív. */
.bhg-features .bhg-features__badge {
	width: var(--bhg-features-badge-size);
	height: var(--bhg-features-badge-size);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
}

.bhg-features--number {
	--bhg-features-badge-size: 44px;
}

.bhg-features--number .bhg-features__badge {
	border-radius: 12px;
}

/* ---------- Akcent karet (varianta cards) ---------- */
.bhg-features--accent-bar .bhg-features__item::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--bhg-features-accent);
}

.bhg-features--accent-bar .bhg-features__item {
	padding-top: calc(var(--bhg-features-card-pad) + 3px);
}

.bhg-features--accent-heading .bhg-features__title {
	color: var(--bhg-features-accent) !important; /* přebije třídy barvy textu z administrace */
}

.bhg-features--accent-border .bhg-features__item {
	border-color: color-mix(in srgb, var(--bhg-features-accent) 55%, transparent);
}

.bhg-features--accent-hover .bhg-features__item--link:hover,
.bhg-features--accent-hover .bhg-features__item--link:focus-visible {
	border-color: var(--bhg-features-accent);
	background: color-mix(in srgb, var(--bhg-features-accent) 10%, var(--bhg-features-card-bg));
}

/* ============================================================
   VÝCHOZÍ VZHLED (nulová specificita – přebijí ho třídy z administrace)
   ============================================================ */

:where(.bhg-features__badge) {
	margin-bottom: 1rem;
	color: var(--bhg-features-accent);
	background: color-mix(in srgb, var(--bhg-features-accent) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--bhg-features-accent) 22%, transparent);
}

/* „Barva textu“: bez podbarvení a rámečku odznaku */
:where(.bhg-features--accent-inherit .bhg-features__badge) {
	background: none;
	border: 0;
}

:where(.bhg-features__badge svg) {
	display: block;
	width: auto;
	height: var(--bhg-features-icon-size);
	max-width: 100%;
	max-height: 100%;
}

:where(.bhg-features__num) {
	font-family: var(--bhg-features-font-mono);
	font-size: var(--bhg-features-fs-sm);
	line-height: 1;
	font-weight: var(--bhg-fw-head, var(--typo-w-head, 700));
	letter-spacing: .02em;
}

/* icons: popisek v akcentu, verzálky, neproporcionální písmo */
:where(.bhg-features--icons .bhg-features__title) {
	margin-bottom: .5rem;
	color: var(--bhg-features-accent);
	font-family: var(--bhg-features-font-mono);
	font-size: var(--bhg-features-fs-sm);
	line-height: var(--bhg-features-lh-sm);
	font-weight: var(--typo-w-sub, 600);
	text-transform: uppercase;
	letter-spacing: .12em;
}

:where(.bhg-features--icons .bhg-features__text) {
	margin-bottom: 0;
	max-width: 34ch;
	margin-inline: auto;
	color: var(--bhg-features-text);
	font-size: var(--bhg-features-fs-sm);
	line-height: var(--bhg-features-lh-sm);
	font-weight: var(--bhg-fw-body, var(--typo-w-body, 400));
}

:where(.bhg-features--icons.bhg-features--start .bhg-features__text) {
	margin-inline: 0;
}

@media (prefers-reduced-motion: reduce) {
	.bhg-features__item--link {
		transition: none;
	}
}