/**
 * .showmemore – zbalený obsah s bielym prelínaním dole a tlačidlom
 * „Zobraziť viac / Zobraziť menej" (assets/showmore.js).
 *
 * Použitie: pridajte triedu "showmemore" na ľubovoľný blok obsahu.
 * Vnútri stĺpca .cside (vedľa stĺpca .bside) sa tlačidlo zobrazí len vtedy,
 * keď by bol obsah .cside vyšší ako .bside – zbalí sa presne na vyrovnanie
 * výšok stĺpcov (assets/showmore.js). Inak platí pevný limit.
 * Voliteľné data atribúty:
 *   data-showmore="320"               – pevná zbalená výška v px (má prednosť)
 *   data-more="Zobraziť celý popis"   – text tlačidla v zbalenom stave
 *   data-less="Skryť popis"           – text tlačidla v rozbalenom stave
 *
 * JS pridá triedy len keď je obsah vyšší ako limit – krátky obsah
 * ostáva bez tlačidla aj bez orezania.
 */

.showmemore.gf-showmore {
	position: relative;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

/* Prelínanie dole vo farbe podkladu (bone) – viditeľné len v zbalenom stave. */
.showmemore.gf-showmore::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 96px;
	background: linear-gradient(180deg, rgba(252, 252, 251, 0) 0%, var(--gf-bone-50, #fcfcfb) 85%);
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.25s ease;
}

.showmemore.gf-showmore.is-open::after {
	opacity: 0;
}

/* ---------- Tlačidlo ---------- */

.gf-showmore-toggle-wrap {
	display: flex;
	justify-content: center;
	margin-top: 14px;
}

/* Kvalifikovaný selektor (button.…), aby ho neprefarbili globálne štýly
   tlačidiel témy/Elementoru. */
.gf-showmore-toggle-wrap button.gf-showmore-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 11px 20px;
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	border: 1px solid var(--gf-green-700, #1a9d5a);
	border-radius: 0;
	background: transparent;
	color: var(--gf-green-700, #1a9d5a);
	font-family: var(--gf-font-body, 'DM Sans', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.gf-showmore-toggle-wrap button.gf-showmore-toggle:hover,
.gf-showmore-toggle-wrap button.gf-showmore-toggle:focus-visible {
	background: var(--gf-green-700, #1a9d5a);
	color: #fff;
	outline: none;
}

.gf-showmore-toggle-wrap button.gf-showmore-toggle svg {
	width: 16px;
	height: 16px;
	display: block;
	transition: transform 0.2s ease;
}

.gf-showmore-toggle-wrap button.gf-showmore-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.showmemore.gf-showmore,
	.showmemore.gf-showmore::after,
	.gf-showmore-toggle-wrap button.gf-showmore-toggle svg {
		transition: none;
	}
}