/* Фоны и токены тонов — тут, не инлайном (WP срезает inline-background у обёртки).
   Палитра — рабочая палитра плагина: чернильный #131B2B, пудровый #FBEAF4,
   розовый #FF9CCD, яркий розовый #EC4899. */
.wp-block-fleur-dessert-showcase {
	--ds-bg: rgb(19, 27, 43);
	--ds-heading: rgb(253, 245, 250);
	--ds-note: rgb(255, 156, 205);
	--ds-intro: rgba(253, 245, 250, 0.72);
	--ds-rule: rgba(253, 245, 250, 0.28);
	--ds-divider: rgba(253, 245, 250, 0.12);
	--ds-alt: rgba(253, 245, 250, 0.035);
	--ds-glow: rgb(236, 72, 153);
	--ds-glow-op: 0.16;
	--ds-shadow: rgba(0, 0, 0, 0.38);
	--ds-shadow-hover: rgba(0, 0, 0, 0.5);
	background: var(--ds-bg) !important;
}
.wp-block-fleur-dessert-showcase.fleur-ds--berry {
	--ds-bg: rgb(157, 23, 77);
}
/* На ягодном розовое свечение сливается с фоном — берём светлее и чуть плотнее. */
.wp-block-fleur-dessert-showcase.fleur-ds--berry {
	--ds-glow: rgb(255, 156, 205);
	--ds-glow-op: 0.2;
}
/* Пудровый — светлая полоса: переворачиваем токены, иначе кремовые заголовки исчезнут. */
.wp-block-fleur-dessert-showcase.fleur-ds--band {
	--ds-bg: rgb(251, 234, 244);
	--ds-heading: rgb(19, 27, 43);
	--ds-note: rgb(236, 72, 153);
	--ds-intro: rgba(46, 38, 55, 0.78);
	--ds-rule: rgba(19, 27, 43, 0.22);
	--ds-divider: rgba(19, 27, 43, 0.1);
	--ds-alt: rgba(255, 255, 255, 0.62);
	--ds-shadow: rgba(19, 27, 43, 0.16);
	--ds-shadow-hover: rgba(19, 27, 43, 0.24);
}
.wp-block-fleur-dessert-showcase.fleur-ds--band {
	--ds-glow: rgb(255, 156, 205);
	--ds-glow-op: 0.5;
}
/* Зебра: полосы модулей чередуют пудровый и чернильный во всю ширину.
   Тёмные ряды получают свои токены обратно. */
.wp-block-fleur-dessert-showcase.fleur-ds--zebra {
	--ds-bg: rgb(251, 234, 244);
	--ds-heading: rgb(19, 27, 43);
	--ds-note: rgb(236, 72, 153);
	--ds-intro: rgba(46, 38, 55, 0.78);
	--ds-rule: rgba(19, 27, 43, 0.22);
	--ds-divider: transparent;
	--ds-alt: transparent;
	--ds-shadow: rgba(19, 27, 43, 0.16);
	--ds-shadow-hover: rgba(19, 27, 43, 0.24);
}
.wp-block-fleur-dessert-showcase.fleur-ds--zebra {
	--ds-glow: rgb(255, 156, 205);
	--ds-glow-op: 0.5;
}
.wp-block-fleur-dessert-showcase.fleur-ds--zebra .fleur-ds__group--alt {
	background: rgb(19, 27, 43);
	--ds-heading: rgb(253, 245, 250);
	--ds-note: rgb(255, 156, 205);
	--ds-rule: rgba(253, 245, 250, 0.28);
	--ds-shadow: rgba(0, 0, 0, 0.38);
	--ds-shadow-hover: rgba(0, 0, 0, 0.5);
}

.wp-block-fleur-dessert-showcase .fleur-ds__glow {
	/* Раньше тут был filter: blur(70px) — дорогой проход на каждом кадре.
	   Радиальный градиент даёт то же мягкое пятно бесплатно. */
	background: radial-gradient(closest-side, var(--ds-glow), transparent);
	filter: none;
	opacity: var(--ds-glow-op);
}

/* ── Группы по модулям (v0.3.0) ────────────────────────────────────────── */
/* Каждый модуль — своя полоса: явный заголовок, счётчик десертов, линия до края.
   Чётные полосы получают лёгкую подложку, чтобы ряды не слипались между собой. */
.wp-block-fleur-dessert-showcase .fleur-ds__group {
	position: relative;
	padding: 6px 0 10px;
}
.wp-block-fleur-dessert-showcase .fleur-ds__group--alt {
	background: var(--ds-alt);
}
.wp-block-fleur-dessert-showcase .fleur-ds__group + .fleur-ds__group {
	border-top: 1px solid var(--ds-divider);
}
.wp-block-fleur-dessert-showcase .fleur-ds__group-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	max-width: 1080px;
	margin: 0 auto;
	padding: 30px 28px 0;
	text-align: left;
}
.wp-block-fleur-dessert-showcase .fleur-ds__group-name {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.1;
	margin: 0;
	color: var(--ds-heading);
}
.wp-block-fleur-dessert-showcase .fleur-ds__group-note {
	flex: 0 0 auto;
	font-family: 'Caveat', cursive;
	font-size: 20px;
	line-height: 1;
	color: var(--ds-note);
	transform: rotate(-1.5deg);
}
.wp-block-fleur-dessert-showcase .fleur-ds__group-rule {
	flex: 1 1 auto;
	height: 1px;
	min-width: 24px;
	background: linear-gradient(to right, var(--ds-rule), transparent);
}

/* ── Мобайл: горизонтальная лента со свайпом ───────────────────────────── */
.wp-block-fleur-dessert-showcase .fleur-ds__stage {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 12px 28px 26px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.wp-block-fleur-dessert-showcase .fleur-ds__stage::-webkit-scrollbar {
	display: none;
}

/* Статичная кнопка-стрелка на правом краю ленты: тап листает ряд на одну карточку
   (view.js); прячется, когда ряд долистан до конца или влез целиком. Без анимации
   (фидбек Ильи 2026-07-30). */
.wp-block-fleur-dessert-showcase .fleur-ds__hint {
	display: none;
	position: absolute;
	right: 10px;
	top: calc(50% + 26px);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgb(255, 255, 255);
	border: 0;
	padding: 0;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(19, 27, 43, 0.22);
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.wp-block-fleur-dessert-showcase .fleur-ds__hint.is-hidden {
	opacity: 0;
	visibility: hidden;
}
/* Тап оставлял чёрное фокус-кольцо вокруг кнопки (та же грабля, что в программе и FAQ). */
.wp-block-fleur-dessert-showcase .fleur-ds__hint:focus { outline: none; }
.wp-block-fleur-dessert-showcase .fleur-ds__hint:focus-visible { outline: 2px solid #EC4899; outline-offset: 2px; }
@media (max-width: 1023px) {
	.wp-block-fleur-dessert-showcase .fleur-ds__hint { display: flex; }
}

/* ── Мобильная лента: аффорданс свайпа (фидбек Ильи 2026-07-30) ─────────── */
@media (max-width: 1023px) {
	/* Правый край ленты тает — видно, что контент продолжается. Маска, а не
	   градиент-оверлей: работает на любом фоне полосы (пудровый / белая подложка). */
	.wp-block-fleur-dessert-showcase .fleur-ds__stage {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
	}
	/* Тень 22/44px на светлой полосе читалась грязным пятном под карточкой.
	   Селектор со __stage — иначе базовое правило «Полароид» ниже по файлу побеждает. */
	.wp-block-fleur-dessert-showcase .fleur-ds__stage .fleur-ds__card {
		box-shadow: 0 8px 20px var(--ds-shadow);
	}
}

/* Полароид */
.wp-block-fleur-dessert-showcase .fleur-ds__card {
	position: relative;
	flex: 0 0 226px;
	margin: 0;
	scroll-snap-align: center;
	background: rgb(255, 255, 255);
	border-radius: 14px;
	padding: 10px 10px 12px;
	box-shadow: 0 22px 44px var(--ds-shadow);
	transition: transform 0.35s ease;
}
.wp-block-fleur-dessert-showcase .fleur-ds__photo {
	display: block;
	width: 100%;
	/* height: auto обязателен: wp_get_attachment_image печатает height="953" атрибутом,
	   и без CSS-высоты он побеждает aspect-ratio — карточки растягивались втрое (инцидент 2026-07-30). */
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 8px;
	background: rgb(251, 234, 244);
}
.wp-block-fleur-dessert-showcase .fleur-ds__photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Caveat', cursive;
	font-size: 20px;
	color: rgb(192, 106, 138);
}
.wp-block-fleur-dessert-showcase .fleur-ds__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 4px 2px;
	text-align: center;
}
.wp-block-fleur-dessert-showcase .fleur-ds__caption {
	font-family: 'Caveat', cursive;
	font-size: 22px;
	line-height: 1.05;
	color: rgb(19, 27, 43);
}
.wp-block-fleur-dessert-showcase .fleur-ds__sub {
	font-family: 'Manrope', system-ui, sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: rgb(156, 131, 147);
}

/* «Скотч» на верхнем крае */
.wp-block-fleur-dessert-showcase .fleur-ds__tape {
	position: absolute;
	top: -10px;
	left: 50%;
	width: 74px;
	height: 22px;
	transform: translateX(-50%) rotate(-3deg);
	background: rgba(255, 156, 205, 0.45);
	border-left: 1px dashed rgba(255, 255, 255, 0.55);
	border-right: 1px dashed rgba(255, 255, 255, 0.55);
	z-index: 2;
}

/* Наклоны — живой «разворот», а не сетка */
.wp-block-fleur-dessert-showcase .fleur-ds__card:nth-child(5n + 1) { transform: rotate(-3.2deg); }
.wp-block-fleur-dessert-showcase .fleur-ds__card:nth-child(5n + 2) { transform: rotate(2.4deg); }
.wp-block-fleur-dessert-showcase .fleur-ds__card:nth-child(5n + 3) { transform: rotate(-1.6deg); }
.wp-block-fleur-dessert-showcase .fleur-ds__card:nth-child(5n + 4) { transform: rotate(3.1deg); }
.wp-block-fleur-dessert-showcase .fleur-ds__card:nth-child(5n + 5) { transform: rotate(-2.2deg); }

/* ── Десктоп: коллаж внахлёст, разные уровни, hover-выпрямление ───────── */
@media (min-width: 1024px) {
	.wp-block-fleur-dessert-showcase .fleur-ds__stage {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
		row-gap: 46px;
		overflow: visible;
		max-width: 1080px;
		margin: 0 auto;
		padding: 26px 40px 40px;
	}
	.wp-block-fleur-dessert-showcase .fleur-ds__card {
		flex: 0 0 236px;
		margin: 0 -16px;
	}
	.wp-block-fleur-dessert-showcase .fleur-ds__card:nth-child(5n + 1) { transform: rotate(-3.2deg) translateY(26px); z-index: 1; }
	.wp-block-fleur-dessert-showcase .fleur-ds__card:nth-child(5n + 2) { transform: rotate(2.4deg)  translateY(0);    z-index: 3; }
	.wp-block-fleur-dessert-showcase .fleur-ds__card:nth-child(5n + 3) { transform: rotate(-1.6deg) translateY(38px); z-index: 2; }
	.wp-block-fleur-dessert-showcase .fleur-ds__card:nth-child(5n + 4) { transform: rotate(3.1deg)  translateY(6px);  z-index: 4; }
	.wp-block-fleur-dessert-showcase .fleur-ds__card:nth-child(5n + 5) { transform: rotate(-2.2deg) translateY(30px); z-index: 2; }
	.wp-block-fleur-dessert-showcase .fleur-ds__card:hover {
		transform: rotate(0deg) translateY(-8px) scale(1.03);
		z-index: 9;
	}
	.wp-block-fleur-dessert-showcase .fleur-ds__title {
		font-size: 42px !important;
	}
	.wp-block-fleur-dessert-showcase .fleur-ds__intro {
		font-size: 16px !important;
	}

	/* Внутри полосы модуля коллаж плотнее сверху (заголовок уже отбил ряд),
	   но снизу нужен запас: карточки съезжают вниз до +38px и иначе лезут в соседний ряд. */
	.wp-block-fleur-dessert-showcase .fleur-ds__group .fleur-ds__stage {
		padding: 22px 40px 62px;
	}
	/* Один модуль = один ряд (правка Ильи 2026-07-30): переносов нет, карточки
	   делят ширину поровну и ужимаются под количество (5 тортов ≈ 205px, 3 рулета = 236px). */
	.wp-block-fleur-dessert-showcase .fleur-ds__group .fleur-ds__stage {
		flex-wrap: nowrap;
	}
	.wp-block-fleur-dessert-showcase .fleur-ds__group .fleur-ds__card {
		flex: 1 1 0;
		max-width: 236px;
		min-width: 0;
	}
	.wp-block-fleur-dessert-showcase .fleur-ds__group-head {
		padding: 40px 44px 0;
	}
	.wp-block-fleur-dessert-showcase .fleur-ds__group-name {
		font-size: 30px;
	}
	.wp-block-fleur-dessert-showcase .fleur-ds__group-note {
		font-size: 22px;
	}
}