/**
 * WC Obsah balíčka – frontend
 *
 * Sekcia je staticky otvorená. JS len dopĺňa jemné zjavenie pri scrollovaní
 * (.wcpc--js / .is-visible) a tieňovanie scrollovacieho zoznamu.
 */

.wcpc {
	--wcpc-bg: #faf8f4;
	--wcpc-surface: #ffffff;
	--wcpc-ink: #17150f;
	--wcpc-muted: #7a7a7a;
	--wcpc-accent: #b08b46;
	--wcpc-line: #e9e2d5;

	--wcpc-sans: "Jost", sans-serif;
	--wcpc-serif: "Cormorant Garamond", "EB Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
	--wcpc-radius: 24px;
	--wcpc-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--wcpc-speed: 0.8s;

	box-sizing: border-box;
	display: block;
	width: 100%;
	/* Odsadenie rieši téma – plugin ho pridáva len ak si ho nastavíte. */
	padding: var(--wcpc-pad, 0px) 0;
	background: var(--wcpc-bg);
	color: var(--wcpc-ink);
	font-family: var(--wcpc-sans);
}

.wcpc *,
.wcpc *::before,
.wcpc *::after {
	box-sizing: border-box;
}

.wcpc__inner {
	width: 100%;
	max-width: var(--wcpc-max-width, 100%);
	margin: 0 auto;
	padding: 0;
}

/* ---------------------------------------------------------------- Hlavička */

.wcpc__head {
	margin-bottom: clamp(22px, 3vw, 46px);
}

.wcpc__title {
	margin: 0;
	padding: 0;
	font-family: var(--wcpc-serif);
	font-weight: 400;
	font-size: clamp(30px, 4.6vw, 52px);
	line-height: 1.06;
	letter-spacing: 0.005em;
	color: var(--wcpc-ink);
	text-transform: none;
}

/* ------------------------------------------------------------------ Mriežka */

.wcpc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(14px, 1.6vw, 26px);
	align-items: start;
}

@media (min-width: 900px) {
	.wcpc__grid {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.34fr);
	}
}

/* --------------------------------------------------------------- Ľavý panel */

.wcpc__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: clamp(22px, 2.6vw, 44px);
	border-radius: var(--wcpc-radius);
	background: var(--wcpc-surface);
	box-shadow: 0 1px 2px rgba(23, 21, 15, 0.04), 0 24px 48px -34px rgba(23, 21, 15, 0.32);
}

/*
 * Fotografia balíčka. Zámerne úplne jednoduchá – obyčajný obrázok na šírku
 * karty, žiadne absolútne umiestnenie ani pomer strán, aby ju nemohli
 * rozhodiť štýly šablóny.
 */
.wcpc__photo {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	max-width: 520px;
	border-radius: 16px;
}

.wcpc__photo--empty {
	display: grid;
	place-items: center;
	min-height: clamp(220px, 26vw, 360px);
	border: 1px dashed var(--wcpc-line);
	background: var(--wcpc-bg);
	background: color-mix(in srgb, var(--wcpc-bg) 70%, #fff);
}

.wcpc .wcpc__photo-img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	border-radius: 16px;
}

.wcpc__photo-placeholder {
	padding: 12px 18px;
	font-family: var(--wcpc-sans);
	font-size: 10px;
	letter-spacing: 0.2em;
	line-height: 1.6;
	text-align: center;
	text-transform: uppercase;
	color: var(--wcpc-accent);
	opacity: 0.75;
}

.wcpc__rule {
	display: block;
	width: 58%;
	height: 1px;
	margin-top: clamp(20px, 2.6vw, 42px);
	background: var(--wcpc-accent);
}

/* -------------------------------------------------------------- Pravý panel */

.wcpc__panel {
	position: relative;
	min-width: 0;
}

/* Jemné stmavnutie na spodku, keď je zoznam dlhší ako viditeľná plocha. */
.wcpc__panel::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 56px;
	background: linear-gradient(to top, var(--wcpc-bg), transparent);
	content: "";
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.wcpc__panel.is-scrollable:not(.is-end)::after {
	opacity: 1;
}

.wcpc__items {
	display: flex;
	flex-direction: column;
	gap: clamp(9px, 1.1vw, 16px);
	margin: 0;
	padding: 0;
	list-style: none;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--wcpc-line) transparent;
}

/* Pravý stĺpec sa neťahá donekonečna – dlhý zoznam sa scrolluje. */
@media (min-width: 900px) {
	.wcpc__items {
		max-height: var(--wcpc-list-height, clamp(420px, 66vh, 780px));
		overflow-y: auto;
		/* Priestor pre tiene kariet a pre scrollbar (bez záporných marginov, ktoré rozbíjajú šírku stránky). */
		padding: 4px 10px 4px 4px;
	}
}

.wcpc__items::-webkit-scrollbar {
	width: 8px;
}

.wcpc__items::-webkit-scrollbar-track {
	background: transparent;
}

.wcpc__items::-webkit-scrollbar-thumb {
	border: 2px solid transparent;
	border-radius: 999px;
	background: var(--wcpc-line);
	background-clip: padding-box;
}

.wcpc__items:hover::-webkit-scrollbar-thumb {
	background: var(--wcpc-accent);
	background-clip: padding-box;
}

.wcpc__items::before,
.wcpc__items::after {
	content: none;
}

.wcpc__item {
	display: flex;
	align-items: center;
	gap: clamp(13px, 1.6vw, 24px);
	margin: 0;
	padding: clamp(15px, 1.7vw, 26px);
	border-radius: 18px;
	background: var(--wcpc-surface);
	box-shadow: 0 1px 2px rgba(23, 21, 15, 0.035), 0 18px 34px -30px rgba(23, 21, 15, 0.35);
	list-style: none;
	opacity: 1;
	transform: none;
	transition: opacity 0.5s linear, transform 0.65s var(--wcpc-ease), box-shadow 0.35s ease;
	transition-delay: calc(var(--wcpc-i, 0) * 65ms);
}

.wcpc__item:hover {
	box-shadow: 0 1px 2px rgba(23, 21, 15, 0.05), 0 22px 40px -28px rgba(23, 21, 15, 0.45);
}

.wcpc__thumb {
	position: relative;
	flex: 0 0 auto;
	width: clamp(54px, 5.4vw, 78px);
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border: 1px solid var(--wcpc-line);
	border-radius: 12px;
	background-color: var(--wcpc-bg);
	background-image: repeating-linear-gradient(
		45deg,
		color-mix(in srgb, var(--wcpc-line) 55%, transparent) 0,
		color-mix(in srgb, var(--wcpc-line) 55%, transparent) 5px,
		transparent 5px,
		transparent 11px
	);
}

.wcpc .wcpc__thumb-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}

.wcpc__body {
	display: block;
	min-width: 0;
}

.wcpc__item-title {
	display: block;
	font-family: var(--wcpc-serif);
	font-weight: 400;
	font-size: clamp(19px, 1.65vw, 25px);
	line-height: 1.2;
	color: var(--wcpc-ink);
}

.wcpc__item-desc {
	display: block;
	margin-top: 6px;
	font-family: var(--wcpc-sans);
	font-size: clamp(13px, 1vw, 15px);
	line-height: 1.5;
	color: var(--wcpc-muted);
}

.wcpc__item-tag {
	display: block;
	margin-top: 10px;
	font-family: var(--wcpc-sans);
	font-size: 10px;
	letter-spacing: 0.18em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--wcpc-accent);
}

/* ------------------------------------------- Zjavenie sekcie pri scrollovaní */

.wcpc--js:not(.is-visible) .wcpc__item {
	opacity: 0;
	transform: translate(22px, 10px);
}

.wcpc--js:not(.is-visible) .wcpc__rule {
	width: 0;
}

.wcpc__rule {
	transition: width var(--wcpc-speed) var(--wcpc-ease) 0.2s;
}

/* ------------------------------------------------------------- Bez animácií */

.wcpc--no-anim .wcpc__item,
.wcpc--no-anim .wcpc__rule {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

.wcpc--no-anim .wcpc__rule {
	width: 58%;
}

@media (prefers-reduced-motion: reduce) {
	.wcpc__item,
	.wcpc__rule,
	.wcpc__panel::after {
		transition: none !important;
	}

	.wcpc--js:not(.is-visible) .wcpc__item {
		opacity: 1;
		transform: none;
	}

	.wcpc--js:not(.is-visible) .wcpc__rule {
		width: 58%;
	}
}

/* -------------------------------------------------------------------- Mobil */

@media (max-width: 899px) {
	.wcpc__item {
		align-items: flex-start;
	}
}

@media (max-width: 480px) {
	.wcpc__item {
		gap: 12px;
	}

	.wcpc__thumb {
		width: 52px;
	}
}