/* ============================================================
   mod_deer_vibes – sekce „nadpis + lead + N karet"
   Pouze struktura a mechanika. Barvy/typografie = tokeny + utility.
   ============================================================ */

.deer-vibes {
	--vibe-accent: transparent;
	--vibe-card-bg: var(--c-forest-350);
	--vibe-card-border: var(--c-forest-300);
	--vibe-card-radius: var(--radius-sm);
	--vibe-gap: var(--space-4);
	--vibe-pad-y: var(--space-6);
	--vibe-pad-x: 0px;

	position: relative;
	padding: var(--vibe-pad-y) var(--vibe-pad-x);
	isolation: isolate;
}

.deer-vibes__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

/* ---------- Svety (akcent) ---------- */
.deer-vibes[data-world="nest"]  { --vibe-accent: var(--world-nest); }
.deer-vibes[data-world="roots"] { --vibe-accent: var(--world-roots); }
.deer-vibes[data-world="apple"] { --vibe-accent: var(--world-apple); }

/* ---------- Temata sekce ---------- */
.deer-vibes--dark {
	background: var(--c-forest-400);
}

.deer-vibes--plum {
	background: var(--c-forest-300);
	/* plocha karty musi zustat kontrastni i na svetlejsim tmavem pozadi */
	--vibe-card-bg: var(--c-forest-400);
}

.deer-vibes--light {
	background: var(--c-canvas);
	--vibe-card-bg: var(--c-surface);
	--vibe-card-border: color-mix(in srgb, var(--c-forest-400) 10%, transparent);
}

/* theme = none -> pozadi dedi od rodice, plocha karty jemne prosviti */
.deer-vibes--none {
	background: transparent;
}

/* full-bleed pri variante s vnitrnim odsazenim drzi text v mrizce */
.deer-vibes--fullbleed .deer-vibes__inner {
	max-width: var(--vibe-inner-max, 1320px);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

/* ---------- Hlavicka sekce ---------- */
.deer-vibes__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 62ch;
}

.deer-vibes--head-center .deer-vibes__head {
	max-width: 56ch;
	margin-inline: auto;
	text-align: center;
}

.deer-vibes__heading {
	margin: 0;
}

.deer-vibes__lead {
	max-width: 48ch;
}

.deer-vibes--head-center .deer-vibes__lead {
	margin-inline: auto;
}

.deer-vibes__lead > :last-child {
	margin-bottom: 0;
}

/* ---------- Mrizka karet ---------- */
.deer-vibes__grid {
	display: grid;
	gap: var(--vibe-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 576px) {
	.deer-vibes--cols-2 .deer-vibes__grid,
	.deer-vibes--cols-4 .deer-vibes__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.deer-vibes--cols-3 .deer-vibes__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.deer-vibes--cols-3 .deer-vibes__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.deer-vibes--cols-4 .deer-vibes__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Karta ---------- */
.deer-vibes__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
	background: var(--vibe-card-bg);
	border: 1px solid var(--vibe-card-border);
	border-radius: var(--vibe-card-radius);
	overflow: hidden;
}

.deer-vibes__card-heading {
	margin: 0;
}

.deer-vibes__card-text > :last-child {
	margin-bottom: 0;
}

/* karta jako odkaz */
.deer-vibes__card--link {
	text-decoration: none;
	transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.deer-vibes__card--link:hover,
.deer-vibes__card--link:focus-visible {
	border-color: color-mix(in srgb, var(--c-surface) 28%, transparent);
	text-decoration: none;
}

.deer-vibes--light .deer-vibes__card--link:hover,
.deer-vibes--light .deer-vibes__card--link:focus-visible {
	border-color: color-mix(in srgb, var(--c-forest-400) 28%, transparent);
}

.deer-vibes__card--link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring, 0 0 0 3px color-mix(in srgb, var(--c-grain-400) 60%, transparent));
}

/* ---------- Varianty akcentu ---------- */
/* linka nahore karty */
.deer-vibes--accent-bar .deer-vibes__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--vibe-accent);
}

.deer-vibes--accent-bar .deer-vibes__card {
	padding-top: calc(var(--space-4) + 3px);
}

/* nadpis karty v barve sveta – prebiji utility .text-* (!important zamerne) */
.deer-vibes--accent-heading .deer-vibes__card-heading {
	color: var(--vibe-accent) !important;
}

/* ramecek karty v barve sveta */
.deer-vibes--accent-border .deer-vibes__card {
	border-color: color-mix(in srgb, var(--vibe-accent) 55%, transparent);
}

/* akcent az na hover (funguje jen u karet s odkazem) */
.deer-vibes--accent-hover .deer-vibes__card--link:hover,
.deer-vibes--accent-hover .deer-vibes__card--link:focus-visible {
	border-color: var(--vibe-accent);
	background: color-mix(in srgb, var(--vibe-accent) 10%, var(--vibe-card-bg));
}

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