/* ==========================================================================
   mod_webportaly_showcase - Presentation Module Styles (self-contained)
   Covers layouts: features, pricing, team, stats, cta, hero
   All design tokens provide safe fallback values so the module works
   without template-level CSS variables. Templates can override via tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared / Base
   -------------------------------------------------------------------------- */
.wp-showcase {
	margin-bottom: var(--space-xl, 2rem);
	/* Plocha hlavného banneru bez fotky (1.3.2). Téma si ju prefarbí tak, ako prefarbuje
	   ostatné veci modulu, teda na `.theme-x .wp-showcase` alebo konkrétnejšie. */
	--wp-hero-plocha: var(--color-heading, #1a1a1a);
}

.wp-showcase__heading {
	text-align: center;
	margin-bottom: var(--space-sm, 0.5rem);
	font-family: var(--font-heading, inherit);
	font-size: var(--font-size-3xl, 1.75rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-heading, #212529);
}

.wp-showcase__subheading {
	text-align: center;
	color: var(--color-text-muted, #6c757d);
	margin-bottom: var(--space-xl, 2rem);
	max-width: 600px;
	margin-inline: auto;
}

.wp-showcase__grid {
	display: grid;
	grid-template-columns: repeat(var(--showcase-cols, 3), 1fr);
	gap: var(--space-lg, 1.5rem);
}

@media (max-width: 767px) {
	.wp-showcase__grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.wp-showcase__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --------------------------------------------------------------------------
   Features / Advantages
   -------------------------------------------------------------------------- */
.wp-showcase__feature {
	text-align: center;
	padding: var(--space-lg, 1.5rem);
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e9ecef);
	border-radius: var(--card-radius, 12px);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-showcase__feature:hover {
	transform: translateY(-4px);
	box-shadow: var(--card-shadow-hover, 0 8px 24px rgba(0, 0, 0, 0.08));
}

.wp-showcase__icon {
	display: block;
	font-size: 2.5rem;
	margin-bottom: var(--space-md, 1rem);
	line-height: 1;
}

.wp-showcase__feature-title {
	font-family: var(--font-heading, inherit);
	font-size: 1.125rem;
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-heading, #212529);
	margin-bottom: var(--space-sm, 0.5rem);
}

.wp-showcase__feature-desc {
	color: var(--color-text-muted, #6c757d);
	font-size: var(--font-size-sm, 0.875rem);
	line-height: 1.6;
}

.wp-showcase__feature-link {
	display: inline-block;
	margin-top: var(--space-sm, 0.5rem);
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: 500;
	color: var(--color-accent-text, var(--color-accent, var(--color-primary, #1a68d1)));
	text-decoration: none;
}

.wp-showcase__feature-link:hover {
	color: var(--color-accent-text-hover, var(--color-accent-hover, var(--color-primary-hover, #1557ae)));
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.wp-showcase__plan {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--space-xl, 2rem) var(--space-lg, 1.5rem);
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e9ecef);
	border-radius: var(--card-radius, 12px);
	position: relative;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-showcase__plan--highlighted {
	border-color: var(--color-primary, #1a68d1);
	border-width: 2px;
	transform: scale(1.03);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.wp-showcase__plan-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-primary, #1a68d1);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	white-space: nowrap;
}

.wp-showcase__plan-name {
	font-family: var(--font-heading, inherit);
	font-size: 1.25rem;
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-heading, #212529);
	margin-bottom: var(--space-md, 1rem);
}

.wp-showcase__plan-price {
	margin-bottom: var(--space-lg, 1.5rem);
}

.wp-showcase__price-amount {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--color-heading, #212529);
}

.wp-showcase__price-period {
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text-muted, #6c757d);
}

.wp-showcase__plan-features {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-lg, 1.5rem);
	width: 100%;
	text-align: left;
}

.wp-showcase__plan-features li {
	padding: var(--space-xs, 0.375rem) 0;
	border-bottom: 1px solid var(--color-border, #e9ecef);
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text-muted, #6c757d);
}

.wp-showcase__plan-features li:last-child {
	border-bottom: none;
}

.wp-showcase__plan .wp-btn {
	margin-top: auto;
	width: 100%;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */
.wp-showcase__member {
	text-align: center;
	padding: var(--space-lg, 1.5rem);
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e9ecef);
	border-radius: var(--card-radius, 12px);
}

.wp-showcase__member-photo {
	display: block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto var(--space-md, 1rem);
}

.wp-showcase__member-photo--empty {
	background: var(--color-gray-200, #e9ecef);
}

.wp-showcase__member-name {
	font-family: var(--font-heading, inherit);
	font-size: 1.125rem;
	font-weight: var(--font-weight-semibold, 600);
	color: var(--color-heading, #212529);
	margin-bottom: 0.25rem;
}

.wp-showcase__member-position {
	color: var(--color-accent-text, var(--color-accent, var(--color-primary, #1a68d1)));
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: 500;
	margin-bottom: var(--space-sm, 0.5rem);
}

.wp-showcase__member-bio {
	color: var(--color-text-muted, #6c757d);
	font-size: var(--font-size-sm, 0.875rem);
	line-height: 1.6;
}

.wp-showcase__member-links {
	display: flex;
	gap: var(--space-sm, 0.5rem);
	justify-content: center;
	margin-top: var(--space-md, 1rem);
}

.wp-showcase__member-links a {
	color: var(--color-text-muted, #6c757d);
	transition: color 0.2s ease;
}

.wp-showcase__member-links a:hover {
	color: var(--color-primary, #1a68d1);
}

/* Akcent AKO TEXT berie `--color-accent-text` a až potom `--color-accent`.
   Dôvod: značková farba býva svetlá, lebo sa vyberá na plochu (odznak, štítok), a ako písmo
   na bielom je potom nečitateľná. Na sadbových zemiakoch mal pás čísel svetlozelenú #77af2b
   na bielej karte, teda kontrast 2,6 : 1 (zmerané na web10, 2. 11. 2026). Téma, ktorá má
   svetlý akcent, nastaví `--color-accent-text` na tmavší odtieň a tieto miesta ju poslúchnu;
   témam, ktoré ho nenastavia, sa nemení nič.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Stats / Counters
   -------------------------------------------------------------------------- */
.wp-showcase__stats-row {
	display: grid;
	grid-template-columns: repeat(var(--showcase-cols, 4), 1fr);
	gap: var(--space-lg, 1.5rem);
	text-align: center;
	padding: var(--space-xl, 2rem) var(--space-lg, 1.5rem);
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e9ecef);
	border-radius: var(--card-radius, 12px);
}

@media (max-width: 600px) {
	.wp-showcase__stats-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

.wp-showcase__stat-number {
	display: block;
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--color-accent-text, var(--color-accent, var(--color-primary, #1a68d1)));
}

.wp-showcase__stat-label {
	display: block;
	margin-top: var(--space-xs, 0.375rem);
	font-size: var(--font-size-sm, 0.875rem);
	color: var(--color-text-muted, #6c757d);
}

/* --------------------------------------------------------------------------
   CTA Banner (full-width image with overlay)
   -------------------------------------------------------------------------- */
.wp-showcase--cta {
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 360px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4xl, 6rem) var(--space-2xl, 3rem);
	overflow: hidden;
	border-radius: var(--card-radius, 12px);
	margin-bottom: var(--space-xl, 2rem);
}

.wp-showcase__cta-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--cta-overlay, 0.5));
	z-index: 1;
}

.wp-showcase__cta-content {
	position: relative;
	z-index: 2;
	max-width: 640px;
}

.wp-showcase--cta-center .wp-showcase__cta-content {
	text-align: center;
}

.wp-showcase--cta-left .wp-showcase__cta-content {
	text-align: left;
	margin-right: auto;
}

.wp-showcase__cta-label {
	display: inline-block;
	font-size: var(--font-size-sm, 0.875rem);
	font-weight: var(--font-weight-semibold, 600);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: var(--space-sm, 0.5rem);
}

.wp-showcase__cta-title {
	font-family: var(--font-heading, inherit);
	font-size: var(--font-size-4xl, 2.25rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-white, #fff);
	line-height: var(--line-height-tight, 1.2);
	margin-bottom: var(--space-md, 1rem);
}

.wp-showcase__cta-desc {
	font-size: var(--font-size-lg, 1.125rem);
	color: rgba(255, 255, 255, 0.9);
	line-height: var(--line-height-relaxed, 1.7);
	margin-bottom: var(--space-xl, 2rem);
}

.wp-showcase--cta .wp-btn--lg {
	padding: 1rem 2rem;
	font-size: var(--font-size-base, 1rem);
	gap: var(--space-sm, 0.5rem);
}

@media (max-width: 767px) {
	.wp-showcase--cta {
		min-height: 280px;
		padding: var(--space-2xl, 3rem) var(--space-lg, 1.5rem);
	}

	.wp-showcase__cta-title {
		font-size: var(--font-size-2xl, 1.5rem);
	}

	.wp-showcase__cta-desc {
		font-size: var(--font-size-base, 1rem);
	}
}

/* --------------------------------------------------------------------------
   Hero / Slideshow (full-width slides with auto-rotate)
   -------------------------------------------------------------------------- */
.wp-showcase--hero {
	position: relative;
	overflow: hidden;
	margin-bottom: 0;
}

.wp-hero__track {
	position: relative;
	width: 100%;
	height: 560px;
}

.wp-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4xl, 6rem) var(--space-2xl, 3rem);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.8s ease, visibility 0.8s ease;
	z-index: 1;
}

.wp-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
}

.wp-hero__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--cta-overlay, 0.4));
	z-index: 1;
}

.wp-hero__link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

.wp-hero__link-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wp-hero__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -6px;
}

.wp-hero__content {
	position: relative;
	z-index: 2;
	max-width: 720px;
	width: 100%;
}

.wp-hero__slide--center .wp-hero__content {
	text-align: center;
	margin: 0 auto;
}

.wp-hero__slide--left .wp-hero__content {
	text-align: left;
	margin-right: auto;
}

.wp-hero__overline {
	display: inline-block;
	margin-bottom: var(--space-sm, 0.5rem);
	font-size: var(--font-size-xs, 0.75rem);
	font-weight: var(--font-weight-semibold, 600);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-accent-text, var(--color-accent, #C5A059));
}

.wp-hero__title {
	font-family: var(--font-heading, inherit);
	font-size: var(--font-size-5xl, 3rem);
	font-weight: var(--font-weight-bold, 700);
	color: var(--color-white, #fff);
	line-height: var(--line-height-tight, 1.2);
	margin-bottom: var(--space-md, 1rem);
}

.wp-hero__desc {
	font-size: var(--font-size-xl, 1.25rem);
	color: rgba(255, 255, 255, 0.9);
	line-height: var(--line-height-relaxed, 1.7);
	margin-bottom: var(--space-xl, 2rem);
}

.wp-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md, 1rem);
}

.wp-hero__slide--center .wp-hero__buttons {
	justify-content: center;
}

.wp-hero__buttons .wp-btn--lg {
	padding: 1rem 2rem;
	font-size: var(--font-size-base, 1rem);
}

.wp-hero__buttons .wp-btn--light {
	background: transparent;
	color: var(--color-white, #fff);
	border-color: rgba(255, 255, 255, 0.5);
}

.wp-hero__buttons .wp-btn--light:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: var(--color-white, #fff);
	color: var(--color-white, #fff);
}

.wp-hero__nav {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--space-md, 1rem);
}

.wp-hero__arrow {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background: rgba(0, 0, 0, 0.3);
	color: var(--color-white, #fff);
	border: none;
	border-radius: var(--radius-full, 999px);
	backdrop-filter: blur(4px);
	cursor: pointer;
	transition: background var(--transition-fast, 0.15s ease);
}

.wp-hero__arrow:hover {
	background: rgba(0, 0, 0, 0.6);
}

.wp-hero__dots {
	position: absolute;
	bottom: var(--space-lg, 1.5rem);
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: var(--space-sm, 0.5rem);
}

.wp-hero__dot {
	width: 10px;
	height: 10px;
	border-radius: var(--radius-full, 999px);
	background: rgba(255, 255, 255, 0.4);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background var(--transition-fast, 0.15s ease), transform var(--transition-fast, 0.15s ease);
}

.wp-hero__dot.is-active {
	background: var(--color-white, #fff);
	transform: scale(1.3);
}

.wp-hero__dot:hover {
	background: rgba(255, 255, 255, 0.8);
}

@media (max-width: 767px) {
	.wp-hero__track {
		height: 440px;
	}

	.wp-hero__slide {
		padding: var(--space-2xl, 3rem) var(--space-lg, 1.5rem);
	}

	.wp-hero__title {
		font-size: var(--font-size-3xl, 1.875rem);
	}

	.wp-hero__desc {
		font-size: var(--font-size-base, 1rem);
	}

	.wp-hero__arrow {
		width: 2.5rem;
		height: 2.5rem;
	}

	.wp-hero__buttons {
		flex-direction: column;
	}

	.wp-hero__buttons .wp-btn--lg {
		width: 100%;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   Buttons (.wp-btn) — shared across showcase layouts
   -------------------------------------------------------------------------- */
.wp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs, 0.375rem);
	padding: 0.6rem 1.2rem;
	font-size: var(--font-size-base, 1rem);
	font-weight: var(--font-weight-medium, 500);
	border-radius: var(--btn-radius, 4px);
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.15s ease;
	line-height: 1.2;
	white-space: nowrap;
}

.wp-btn--primary {
	background: var(--color-primary, #1a68d1);
	color: var(--color-on-primary, #fff);
	border-color: var(--color-primary, #1a68d1);
}

.wp-btn--primary:hover {
	background: var(--color-primary-hover, #1557ae);
	border-color: var(--color-primary-hover, #1557ae);
	color: var(--color-on-primary, #fff);
	text-decoration: none;
}

.wp-btn--outline {
	background: transparent;
	color: var(--color-primary, #1a68d1);
	border-color: var(--color-primary, #1a68d1);
}

.wp-btn--outline:hover {
	background: var(--color-primary, #1a68d1);
	color: var(--color-on-primary, #fff);
	text-decoration: none;
}

.wp-btn--light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.65);
}

.wp-btn--light:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: #fff;
	color: #fff;
}

.wp-btn--lg { padding: 0.85rem 1.75rem; font-size: 1.05rem; }
.wp-btn--sm { padding: 0.35rem 0.85rem; font-size: var(--font-size-sm, 0.875rem); }
.wp-btn--pill { border-radius: 999px; }

/* ---- 1.2.5 – overline (prvý slide biely/tenký, nosný je H1), zalomenie pri " · " na telefóne ---- */
.wp-hero__overline--first {
	color: rgba(255, 255, 255, 0.82);
	font-weight: var(--font-weight-medium, 500);
}

.wp-hero__br {
	display: none;
}

/* ---- 1.2.5 – hero na celú šírku (šablóna tpleshop .es-hero--fullwidth): obsah drží kontajner stránky,
   šípky dole vedľa bodiek, aby text mohol začínať presne na hrane obsahu ---- */
@media (min-width: 768px) {
	.es-hero--fullwidth .wp-hero__slide {
		padding-inline: max(2rem, calc((100% - var(--container-max, 1640px)) / 2 + 2rem));
		padding-bottom: 4.5rem;
	}

	.es-hero--fullwidth .wp-hero__nav {
		inset: auto 0 0 0;
		height: 3.5rem;
		align-items: center;
		justify-content: center;
		gap: 9rem;
		padding: 0;
	}

	.es-hero--fullwidth .wp-hero__arrow {
		width: 2.5rem;
		height: 2.5rem;
	}

	.es-hero--fullwidth .wp-hero__dots {
		bottom: 1.35rem;
	}
}

/* ---- 1.2.5 – mobil: dráha rastie podľa aktívneho slidu (dlhší text nešiel pod šípky), šípky dole vedľa bodiek ---- */
@media (max-width: 767px) {
	.wp-hero__track {
		height: auto;
		min-height: 440px;
	}

	.wp-hero__slide {
		min-height: 440px;
		height: auto;
		padding-bottom: 4.5rem;
	}

	.wp-hero__slide.is-active {
		position: relative;
	}

	.wp-hero__nav {
		inset: auto 0 0 0;
		height: 3.5rem;
		align-items: center;
		justify-content: center;
		gap: 7.5rem;
		padding: 0;
	}

	.wp-hero__arrow {
		width: 2.25rem;
		height: 2.25rem;
	}

	.wp-hero__dots {
		bottom: 1.4rem;
	}

	.wp-hero__overline--first {
		font-size: 0.7rem;
		letter-spacing: 0.08em;
		line-height: 1.5;
	}

	.wp-hero__sep {
		display: none;
	}

	.wp-hero__br {
		display: block;
	}
}

/* ============================================================
   Layout: boxy – vodorovný pás kariet na výšku (1.3.0)
   Vzor: úvodka vilgain.sk (vybrala klientka sadbových zemiakov).
   Počet kariet na obrazovke nastavuje modul ako `--wp-boxy-pocet-pc`;
   na menších obrazovkách ho prepisujú media queries, preto sú to dve
   premenné – inline štýl z modulu by inak vyhral aj na telefóne.
   ============================================================ */

.wp-showcase--boxy {
	--wp-boxy-pocet: var(--wp-boxy-pocet-pc, 4.5);
	--wp-boxy-medzera: 10px;
	--wp-boxy-radius: 14px;
	--wp-boxy-pomer: 2 / 3;
	/* Tlačidlo je vždy na stmavenej fotke, takže biele s tmavým textom platí v svetlom aj tmavom
	   režime. Sú to premenné preto, aby si ich téma vedela prefarbiť na značku. */
	--wp-boxy-btn-bg: #fff;
	--wp-boxy-btn-bg-hover: #f2f2f2;
	--wp-boxy-btn-text: #111;
	/* Šírka obsahu stránky a jej vnútorný okraj – z tokenov šablóny, s náhradou pre cudzie. */
	--wp-boxy-kontajner: var(--container-max, 1280px);
	--wp-boxy-okraj: var(--container-padding, 1rem);
	/* Ľavý okraj pásu = ľavý okraj obsahu (logo, nadpisy). Pri užšom okne je to len okraj. */
	--wp-boxy-odsadenie: calc(max(0px, (100vw - var(--wp-boxy-kontajner)) / 2) + var(--wp-boxy-okraj));
}

/* Modul býva v pozícii na celú šírku, takže pás začína na okraji okna. Vilgain (a klientka)
   chce ľavý okraj zarovnaný s obsahom a vpravo nechať karty vybiehať – to je to, čo hovorí
   „pás pokračuje“. Keď je modul v pozícii, ktorá kontajner už drží, zvolí sa „na okraj okna“. */
.wp-showcase--boxy-kontajner .wp-boxy__head,
.wp-showcase--boxy-kontajner .wp-boxy__track {
	padding-inline-start: var(--wp-boxy-odsadenie);
}

/* Bez toho by karta po posunutí zastala pod odsadením a vyzerala by orezaná. */
.wp-showcase--boxy-kontajner .wp-boxy__track {
	scroll-padding-inline-start: var(--wp-boxy-odsadenie);
}

/* Posledná karta nemá končiť tesne pri okraji okna. */
.wp-showcase--boxy-kontajner .wp-boxy__track::after {
	content: "";
	flex: 0 0 var(--wp-boxy-okraj);
}

.wp-boxy__head {
	margin-bottom: 1rem;
}

/* Pás bez hlavičky modulu: odstup nad sebou si musí urobiť sám.
   Odstup v toku robí `margin-bottom` na `.wp-showcase`, teda to, čo je NAD daným blokom. Pás
   s prázdnym nadpisom je ale typicky prvý blok stránky (hero s H1 z prvej karty) a nad sebou
   nemá nič, takže sa fotky kariet lepili na spodný okraj hlavičky webu – na počítači aj na
   mobile. S hlavičkou modulu sa to neukázalo, lebo odstup tam vyrobil text.
   Rovnaká hodnota ako odstup pod pásom, nech je blok symetrický. */
.wp-showcase--boxy-bezhlavy {
	padding-top: var(--space-xl, 2rem);
}

.wp-boxy__heading {
	margin: 0 0 .25rem;
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	font-weight: 700;
}

.wp-boxy__subheading {
	margin: 0;
	color: var(--color-text-muted, #666);
}

.wp-boxy__wrap {
	position: relative;
}

.wp-boxy__track {
	display: flex;
	gap: var(--wp-boxy-medzera);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Karta pri posune nesmie končiť tesne pri okraji, nech je vidieť, že pás pokračuje. */
	padding-bottom: 2px;
}

.wp-boxy__track::-webkit-scrollbar {
	display: none;
}

.wp-boxy__card {
	position: relative;
	display: block;
	flex: 0 0 calc((100% - (var(--wp-boxy-pocet) - 1) * var(--wp-boxy-medzera)) / var(--wp-boxy-pocet));
	aspect-ratio: var(--wp-boxy-pomer);
	overflow: hidden;
	border-radius: var(--wp-boxy-radius);
	background: var(--color-gray-800, #2a2a2a);
	color: var(--color-white, #fff);
	text-decoration: none;
	scroll-snap-align: start;
	transition: transform var(--transition-base, .2s ease);
}

a.wp-boxy__card:hover {
	transform: translateY(-2px);
}

/* Farba textu sa pri prejdení myšou NESMIE zmeniť. Karta je `<a>`, takže na ňu sedí všeobecné
   `a:hover { color: var(--color-link-hover) }` zo šablóny – a vo variante „produkt" text farbu
   dedí (`color: inherit`), takže sa prebarví nadpis aj popis. Zmerané sedením ttsport na web19
   (Playwright, computed color): biely nadpis na tmavozelenej ploche mal kontrast 11,38 a pri
   prejdení myšou 1,28, teda nadpis zmizol. Voľbou inej farby odkazu sa to opraviť nedá: tá sa
   volí voči bielej stránke, nie voči ploche karty. Odozva na prejdenie je posun karty a svetlejšie
   tlačidlo, text do toho nemá čo hovoriť. */
a.wp-boxy__card:hover,
a.wp-boxy__card:focus,
a.wp-boxy__card:focus-visible {
	color: var(--color-white, #fff);
}

.wp-boxy__card:focus-visible {
	outline: 3px solid var(--color-accent, #2563EB);
	outline-offset: 2px;
}

.wp-boxy__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow, .4s ease);
}

a.wp-boxy__card:hover .wp-boxy__img {
	transform: scale(1.04);
}

/* Prechod pod textom. Fotka je vždy pod ním, takže farby sú tu naschvál pevné:
   text je biely v svetlom aj tmavom režime. */
.wp-boxy__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, calc(var(--wp-boxy-shade, .45) + .3)) 0%,
		rgba(0, 0, 0, var(--wp-boxy-shade, .45)) 38%,
		rgba(0, 0, 0, 0) 68%
	);
}

.wp-boxy__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .4rem;
}

/* Veľkosť písma kariet je TOKEN s dnešnou hodnotou ako zálohou (1.8.0). Róbert hlásil, že pri
   výreze sa písmo stráca a nadpisy majú byť väčšie; hodnotu rozhodol dizajn a nastavuje ju téma
   klienta, nie modul. Takto sa ostatné weby nezmenia a nevznikne druhá sada pravidiel.
   Platí pre VŠETKY karty boxy vrátane fotkovej s H1, aby nadpisy v jednom páse mali rovnakú
   veľkosť – od 1.7.0 tam fotková a výrezová karta stoja vedľa seba. */
.wp-boxy__title {
	margin: 0;
	/* Nadpisové písmo ako v ostatných rozloženiach. Bez toho dedil nadpis karty TEXTOVÉ písmo –
	   a keďže prvá karta je `<h1>` a ostatné `<p>`, mala prvá karta iné písmo než zvyšok pásu
	   (vidieť na web19, hlásilo sedenie dizajn). Kde je nadpisové písmo rovnaké ako textové
	   (ttsport, sadba = Inter), sa nezmení nič. */
	font-family: var(--font-heading, inherit);
	font-size: var(--wp-boxy-title-size, clamp(1rem, 1.3vw, 1.2rem));
	font-weight: var(--wp-boxy-title-weight, 700);
	line-height: var(--wp-boxy-title-lh, 1.25);
	color: var(--color-white, #fff);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wp-boxy__desc {
	margin: 0;
	font-size: var(--wp-boxy-desc-size, .9rem);
	line-height: 1.35;
	color: var(--color-white, #fff);
	opacity: .92;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wp-boxy__btn {
	display: inline-block;
	margin-top: .3rem;
	padding: .5rem 1.1rem;
	border-radius: 8px;
	background: var(--wp-boxy-btn-bg);
	color: var(--wp-boxy-btn-text);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.2;
}

a.wp-boxy__card:hover .wp-boxy__btn {
	background: var(--wp-boxy-btn-bg-hover);
}

/* Okrúhle šípky dopĺňa JavaScript; bez neho sa pás posúva prstom a klávesnicou. */
.wp-boxy__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--color-border, rgba(0, 0, 0, .1));
	border-radius: 50%;
	background: var(--color-surface, #fff);
	color: var(--color-text, #111);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	cursor: pointer;
}

.wp-boxy__arrow:hover {
	background: var(--color-surface-alt, #f3f3f3);
}

.wp-boxy__arrow--next {
	right: 10px;
}

.wp-boxy__arrow--prev {
	left: 10px;
}

/* Pri zarovnaní na kontajner stojí šípka späť nad odsadením, nie nad prvou kartou. */
.wp-showcase--boxy-kontajner .wp-boxy__arrow--prev {
	left: calc(var(--wp-boxy-odsadenie) - 22px);
}

.wp-boxy__arrow[hidden] {
	display: none;
}

@media (max-width: 1023px) {
	.wp-showcase--boxy {
		--wp-boxy-pocet: 2.5;
	}
}

@media (max-width: 767px) {
	.wp-showcase--boxy {
		--wp-boxy-pocet: 1.2;
	}

	/* Na telefóne sa posúva prstom; šípka by len zakrývala fotku. */
	.wp-boxy__arrow {
		display: none;
	}

	.wp-boxy__body {
		padding: .85rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-boxy__card,
	.wp-boxy__img {
		transition: none;
	}

	a.wp-boxy__card:hover,
	a.wp-boxy__card:hover .wp-boxy__img {
		transform: none;
	}
}

/* ============================================================
   Hlavný banner a výzva BEZ fotky (1.3.2)
   Prekrytie slidu je stmavenie fotky. Keď fotka nie je, stmavuje sa pozadie stránky
   a na bielom z toho vyjde špinavo sivá plocha s bielym textom – nameralo sedenie
   prezute-62 na web11 (2. 11. 2026). Slide preto dostane vlastnú tmavú plochu
   a prekrytie sa vypne. Plochu si téma prefarbí cez `--wp-hero-plocha`.
   ============================================================ */

.wp-hero__slide--bez-obrazka,
.wp-showcase--cta-bez-obrazka {
	background-color: var(--wp-hero-plocha);
}

.wp-hero__slide--bez-obrazka .wp-hero__overlay,
.wp-showcase--cta-bez-obrazka .wp-showcase__cta-overlay {
	background: transparent;
}

/* ============================================================
   Varianta pásu „produkt na tónovanej ploche" (1.6.0)
   ============================================================
   Vzor a rozmery pripravilo sedenie dizajn (schválil Róbert 9. 11. 2026): namiesto fotky na celej
   karte je VÝREZ PRODUKTU s priehľadným pozadím na ploche v tóne značky, text pod ním na čistej
   ploche. Pôvodný vzhľad s fotkou zostáva nedotknutý – prepína sa parametrom modulu, nie druhým
   súborom rozloženia (dva súbory s tou istou kostrou sa pri prvej oprave rozídu).

   Farby sú TOKENY, nie hodnoty: hexy značky patria do témy klienta (`themes/ttsport.css`,
   `themes/ekos.css`), modul dá len mapovanie tónu a neutrálnu zálohu – inak by v module, ktorý
   beží aj na magazínoch, stáli farby jedného e-shopu.

   V tmavom režime sa tóny NEMENIA: karta je grafika značky, nie plocha stránky. */

.wp-boxy__card--produkt {
	/* `minmax(0, 1fr)` v riadku aj v stĺpci je tu nutné: bez neho veľký obrázok roztiahne
	   mriežku podľa svojej vlastnej veľkosti a pretečie kartu (zmerané sedením dizajn). */
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	grid-template-columns: minmax(0, 1fr);
	background: var(--k-bg, var(--color-surface-alt, #eef1f5));
	color: var(--k-fg, var(--color-text, #111));
	border-radius: var(--k-radius, 8px);
	box-shadow: none;
}

/* Stmavenie fotky v tomto variante nemá čo stmavovať – text leží na ploche, nie na obrázku. */
.wp-boxy__card--produkt::after {
	content: none;
}

.wp-boxy__card--produkt .wp-boxy__img {
	position: absolute;
	/* OKRAJ 24 px okolo výrezu. Bez neho sa produkt dotýka hrany karty a široké veci sa orežú
	   (sedenie dizajn to vykreslilo nad úvodkou web19: loptička zľava, drevo zhora, raketa
	   zprava, stôl až za okrajom), a `drop-shadow` sa nemá kam rozliať. Vo vzore bolo 26 px. */
	inset: 1.5rem 1.5rem auto;
	width: calc(100% - 3rem);
	height: calc(62% - 1.5rem);
	object-fit: contain;
	/* Tieň kreslí CSS, nie fotka: výrez z archívu je bez tieňa, aby sa dal použiť na každom tóne. */
	filter: drop-shadow(0 16px 14px rgb(0 0 0 / .28));
}

.wp-boxy__card--produkt .wp-boxy__body {
	/* `relative` a `z-index` nie sú kozmetika: pri presahu výrezu do rohu obrázok zasahuje až
	   k textu a bez vrstvenia by ho prekryl. `z-index` bez `position` nerobí nič. */
	position: relative;
	z-index: 1;
	grid-row: 2;
	padding: 1rem;
}

.wp-boxy__card--produkt .wp-boxy__title,
.wp-boxy__card--produkt .wp-boxy__desc {
	color: inherit;
}

.wp-boxy__card--produkt .wp-boxy__desc {
	/* Popis na tóne značky ide v plnej sýtosti. Priesvitnosť ubrala kontrast práve tam, kde ho
	   je najmenej: na svetlozelenej #77af2b (zmerané sedením dizajn nad web10). Pri fotke
	   priesvitnosť zostáva, tam text leží na stmavenej fotke. */
	opacity: 1;
}

/* Tlačidlo má VLASTNÚ farbu písma. Na svetlom tóne by inak zostalo biele na svetlom podklade
   a splynulo s plochou (pasca z merania sedenia dizajn). */
.wp-boxy__card--produkt .wp-boxy__btn {
	background: var(--k-btn-bg, var(--color-primary, #1a1a1a));
	color: var(--k-btn-fg, var(--color-on-primary, #fff));
}

/* To isté pre tónovanú kartu: tu je farba textu z tónu, nie biela. Pravidlo musí stáť ZA
   základným (rovnaká špecificita, rozhoduje poradie v súbore). */
a.wp-boxy__card--produkt:hover,
a.wp-boxy__card--produkt:focus,
a.wp-boxy__card--produkt:focus-visible {
	color: var(--k-fg, var(--color-text, #111));
}

a.wp-boxy__card--produkt:hover .wp-boxy__btn {
	background: var(--k-btn-bg, var(--color-primary, #1a1a1a));
	filter: brightness(1.08);
}

/* Tóny kariet. Hodnoty dodáva téma klienta v `--k-<tón>-*`; tu sú len neutrálne zálohy, aby
   variant vyzeral rozumne aj na webe bez témy. */
.wp-boxy__card--ton-tmavy {
	--k-bg: var(--k-tmavy-bg, #1f2937);
	--k-fg: var(--k-tmavy-fg, #ffffff);
	--k-btn-bg: var(--k-tmavy-btn-bg, #ffffff);
	--k-btn-fg: var(--k-tmavy-btn-fg, #111111);
}

.wp-boxy__card--ton-stredny {
	--k-bg: var(--k-stredny-bg, #3f4a5a);
	--k-fg: var(--k-stredny-fg, #ffffff);
	--k-btn-bg: var(--k-stredny-btn-bg, #ffffff);
	--k-btn-fg: var(--k-stredny-btn-fg, #111111);
}

.wp-boxy__card--ton-svetly {
	--k-bg: var(--k-svetly-bg, #eef1f5);
	--k-fg: var(--k-svetly-fg, #111111);
	--k-btn-bg: var(--k-svetly-btn-bg, #111111);
	--k-btn-fg: var(--k-svetly-btn-fg, #ffffff);
}

/* Výrez do ROHU: produkt vysunutý za hranu karty. Pre veci bez výrazného tvaru (zemiak,
   cesnak, cibuľa) je lepšie dať ich veľké a nechať ich orezať hranou než ich posadiť do stredu
   ako výstavný kus. Karta má `overflow: hidden`, takže VON neprečnieva nič.

   Presah je dielom VLASTNEJ veľkosti obrázka, nie karty – a to je oprava, nie štýl. Pevný rám
   (`top/right/width/height` s `object-fit: contain`) držal rovnaké miesto každému produktu, takže
   vysoké veci v ňom ostali maličké a posunuté za hranu takmer celé: z vreca hnojiva prúžok,
   z misky jahôd polovica. Zmerané sedením dizajn na šiestich finálnych výrezoch sadby
   (9. 11. 2026). Preto:

     * `width` podľa `--pomer` (šírka/výška súboru, vypisuje ho modul – pozri `_rozmer.php`):
       rám má proporcie PRODUKTU, takže `object-fit: fill` nič nedeformuje ani nenechá
       prázdne pole, ktoré by posúvalo obrázok od hrany,
     * `transform` posúva v percentách obrázka, takže vysoký aj široký produkt sa vysunie
       rovnakým dielom seba.

   Keď modul `--pomer` nevypíše (súbor sa nedá prečítať), záloha 1 drží obrázok v kvadráte.
   Hodnoty sú rovnaké na PC aj na mobile. */
.wp-boxy__card--roh .wp-boxy__img {
	inset: auto;
	top: 0;
	right: 0;
	/* Hodnoty vybral Róbert („ešte väčší presah", 8. 11. 2026) a dizajn ich premeral nad živým
	   web10 na všetkých šiestich výrezoch: odstup výrezu od nadpisu je najmenej 35 px na počítači
	   a 42 px na mobile, bez prekryvu.

	   `max-width: none` NIE JE kozmetika: šablóna dáva obrázkom `max-width: 100%`, takže šírka
	   nad 100 % sa ticho zastaví na hrane karty. V 1.7.0 to nevadilo (`min(100%, …)` sto percent
	   nikdy neprekročilo), ale pri tomto presahu by sa zväčšili len vysoké výrezy a široké
	   (zemiaky, cesnak) by ostali na 100 % – teda presne tie, pre ktoré je roh určený. */
	max-width: none;
	width: min(135%, calc(var(--pomer, 1) * 125%));
	height: auto;
	object-fit: fill;
	transform: translate(30%, -18%);
}

@media (max-width: 575.98px) {
	/* LEN stredové umiestnenie: rohový presah má rovnaké percentá na PC aj na mobile, a keby
	   sem spadol, prebilo by ho to rovnakou špecificitou podľa poradia v súbore – presah by
	   zmizol práve na telefóne, kde si to nikto nevšimne. */
	.wp-boxy__card--produkt:not(.wp-boxy__card--roh) .wp-boxy__img {
		inset: 1.25rem 1.25rem auto;
		width: calc(100% - 2.5rem);
		height: calc(58% - 1.25rem);
	}

	.wp-boxy__card--produkt .wp-boxy__body {
		padding: .75rem;
	}
}