/**
 * Makaz — блок „Индивидуални поръчки“ на началната страница.
 * Рисува се от makaz_co_render_home_teaser() (inc/makaz-custom-orders.php).
 *
 * Визуален език като останалите секции на началната: бял фон, кремава карта,
 * тъмни заглавия, бордо само за акценти, бутоните на темата.
 */

.makaz-hco {
	--hco-red: var(--makaz-burgundy, #8c1d1c);
	--hco-ink: #221f1d;
	--hco-cream: var(--makaz-cream, #fbf7f2);
	--hco-line: rgba(140, 29, 28, 0.32);
	--hco-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--hco-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cpath transform='translate(22 22) scale(0.14)' d='M37 0h102l-51.5 63zM0 68h176l-66 84 66 84H0l66-84zM88 241l36 45H51zM239 32h29l-97 123 95 119h-29l-95-119z'/%3E%3Cpath transform='translate(102 102) scale(0.14)' d='M37 0h102l-51.5 63zM0 68h176l-66 84 66 84H0l66-84zM88 241l36 45H51zM239 32h29l-97 123 95 119h-29l-95-119z'/%3E%3C/svg%3E");
	position: relative;
	padding-block: clamp(3rem, 5.5vw, 4.5rem) clamp(4rem, 8vw, 6.5rem);
	/* плавно сливане: бежовото започва почти веднага горе, долу преминава в крема на „Аксесоари“ */
	background: linear-gradient(180deg, #fbf8f4 0%, #f9f4ee 5%, #f7f0e8 14%, #f7f0e8 70%, #fbf7f2 100%);
	overflow-x: clip;
	isolation: isolate;
}

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

/* ——— Кремавата карта ——— */
.makaz-hco__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

/* фин мотив „Маказ“ по цялата ширина вдясно, плавно избледняващ */
.makaz-hco__pattern {
	display: none; /* заменено от пръснатите символи по фона на цялата страница */
	position: absolute;
	inset: calc(-1 * clamp(3rem, 5.5vw, 4.5rem)) calc(50% - 50vw) calc(-1 * clamp(4rem, 8vw, 6.5rem));
	z-index: -1;
	background-color: var(--hco-red);
	opacity: 0.11;
	-webkit-mask:
		linear-gradient(180deg, transparent 8%, #000 32%, #000 68%, transparent 92%),
		linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.55) 55%, #000 85%),
		var(--hco-motif) 0 0 / 150px 150px repeat;
	-webkit-mask-composite: source-in, source-in;
	mask:
		linear-gradient(180deg, transparent 8%, #000 32%, #000 68%, transparent 92%),
		linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.55) 55%, #000 85%),
		var(--hco-motif) 0 0 / 150px 150px repeat;
	mask-composite: intersect, intersect;
	pointer-events: none;
}

/* ——— Текст ——— */
.makaz-hco__copy {
	max-width: 680px;
}

.makaz-home .makaz-hco__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
	color: var(--hco-red);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.025em;
}

.makaz-hco__stitch {
	width: 18px;
	height: 2px;
	flex: none;
	background: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px);
}

.makaz-home .makaz-hco__title {
	max-width: none;
	margin: 0 0 1rem;
	color: var(--hco-ink);
	font-size: clamp(2rem, 3.6vw, 3.2rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: -0.04em;
}

.makaz-hco__title em {
	color: var(--hco-red);
	font-style: italic;
}

.makaz-home .makaz-hco__text {
	max-width: 34rem;
	margin: 0 0 1.75rem;
	color: var(--makaz-muted, #77716c);
	font-size: 0.98rem;
	line-height: 1.75;
	text-wrap: pretty;
}

/* ——— Стъпки ——— */
.makaz-home .makaz-hco__steps {
	--hco-step-gap: 2.25rem;
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: start;
	gap: 0.75rem var(--hco-step-gap);
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.makaz-home .makaz-hco__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin: 0;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.6s ease, transform 0.6s var(--hco-ease);
	transition-delay: calc(0.35s + var(--i, 0) * 0.15s);
}

/* шевът между номерата — „пришива се“ сегмент по сегмент */
.makaz-hco__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 16px;
	left: 42px;
	right: calc(8px - var(--hco-step-gap));
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--hco-line) 0 5px, transparent 5px 10px);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s ease;
	transition-delay: calc(0.5s + var(--i, 0) * 0.15s);
}

.makaz-hco__num {
	display: grid;
	flex: none;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--hco-line);
	border-radius: 50%;
	background: #fff;
	color: var(--hco-red);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.makaz-hco__step:hover .makaz-hco__num {
	border-color: var(--hco-red);
	background: var(--hco-red);
	color: #fff;
}

.makaz-hco__label {
	color: var(--hco-ink);
	font-size: 0.84rem;
	line-height: 1.35;
	white-space: nowrap;
}

.makaz-hco__copy.is-visible .makaz-hco__step {
	opacity: 1;
	transform: none;
}

.makaz-hco__copy.is-visible .makaz-hco__step::after {
	transform: scaleX(1);
}

/* ——— Бутон (основният бутон на темата) ——— */
.makaz-hco__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.makaz-home .makaz-hco__btn {
	gap: 0.6rem;
}

.makaz-hco__btn svg {
	transition: transform 0.3s var(--hco-ease);
}

.makaz-hco__btn:hover svg {
	transform: translateX(4px);
}

/* ——— Тесте снимки („поляроид“) ———
   4 карти × 4s = 16s цикъл: горната излиза надясно и се прибира най-отдолу. */
.makaz-hco__visual {
	position: relative;
	justify-self: center;
	width: min(100%, 262px);
	color: inherit;
	text-decoration: none;
}

/* конец зад тестето — бавно „шие“ */
.makaz-hco__thread {
	position: absolute;
	top: -12%;
	left: -30%;
	z-index: 0;
	width: 158%;
	height: 122%;
	overflow: visible;
	fill: none;
	stroke: var(--hco-line);
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-dasharray: 6 6;
	animation: makaz-hco-thread 2.4s linear infinite;
	pointer-events: none;
}

.makaz-hco__thread path {
	vector-effect: non-scaling-stroke;
}

@keyframes makaz-hco-thread {
	to {
		stroke-dashoffset: -12;
	}
}

.makaz-hco__deck {
	position: relative;
	z-index: 1;
	display: block;
	aspect-ratio: 4 / 5.35;
}

.makaz-hco__card {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	padding: 9px 9px 10px;
	border-radius: 6px;
	background: #fff;
	box-shadow:
		0 1px 2px rgba(34, 31, 29, 0.06),
		0 22px 40px -22px rgba(34, 31, 29, 0.45);
	animation: makaz-hco-deck 16s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	animation-delay: var(--d, 0s);
}

/* ушит кант по ръба на картата */
.makaz-hco__card::before {
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px dashed rgba(140, 29, 28, 0.28);
	border-radius: 4px;
	pointer-events: none;
}

.makaz-hco__photo {
	position: relative;
	z-index: 1;
	display: block;
	flex: 1;
	width: 100%;
	min-height: 0;
	overflow: hidden;
	border-radius: 3px;
	background: #ece7e1;
}

.makaz-hco__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 30%;
}

/* символът на Маказ — фин, приглушен, между две къси шевчета: ┄ ✕ ┄ */
.makaz-hco__label-tag {
	display: flex;
	flex: none;
	align-items: center;
	gap: 7px;
	color: rgba(140, 29, 28, 0.42);
}

.makaz-hco__label-tag::before,
.makaz-hco__label-tag::after {
	content: "";
	width: 16px;
	height: 1px;
	background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 5px);
}

.makaz-hco__mark {
	width: 10px;
	height: 11px;
	fill: currentColor;
}

@keyframes makaz-hco-deck {
	0%,
	17% {
		z-index: 4;
		transform: rotate(-2deg);
	}
	22% {
		z-index: 4;
		transform: translate(85%, -6%) rotate(10deg);
	}
	22.5% {
		z-index: 1;
	}
	25%,
	45% {
		z-index: 1;
		transform: translate(-4px, 4px) rotate(-1deg);
	}
	50%,
	70% {
		z-index: 2;
		transform: translate(-14px, 8px) rotate(-7deg);
	}
	75%,
	95% {
		z-index: 3;
		transform: translate(12px, 6px) rotate(5deg);
	}
	100% {
		z-index: 4;
		transform: rotate(-2deg);
	}
}

/* пауза при посочване с мишката (на телефон не — там снимките се сменят с плъзгане) */
@media (hover: hover) {
	.makaz-hco__visual:hover .makaz-hco__card {
		animation-play-state: paused;
	}
}

/* хоризонталното плъзгане сменя снимките, вертикалното скролва страницата */
.makaz-hco__visual {
	touch-action: pan-y;
}

.makaz-hco__deck.is-static .makaz-hco__card {
	animation: none;
	transform: rotate(-2deg);
}

/* ===================================================================
   Таблет
   =================================================================== */
@media (max-width: 1024px) {
	.makaz-hco__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr);
		gap: 2rem;
	}

	.makaz-home .makaz-hco__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 0.75rem;
		row-gap: 1rem;
	}

	.makaz-hco__step:not(:last-child)::after {
		content: none;
	}

	.makaz-home .makaz-hco__step {
		flex-direction: row;
		align-items: center;
	}

	.makaz-hco__label {
		white-space: normal;
	}
}

/* ===================================================================
   Мобилно: текст отгоре, тестето отдолу
   =================================================================== */
@media (max-width: 767px) {
	.makaz-hco {
		padding-block: 2.75rem 3.5rem;
		/* бежовото започва почти веднага под продуктите */
		background: linear-gradient(180deg, #fbf8f4 0%, #f9f4ee 4%, #f7f0e8 10%, #f7f0e8 84%, #fbf7f2 100%);
	}

	/* на телефон: текст → снимките → бутонът */
	.makaz-hco__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.makaz-hco__copy {
		display: contents;
	}

	.makaz-hco__visual {
		order: 1;
	}

	.makaz-hco__actions {
		order: 2;
		margin-top: 3.6rem; /* повече въздух под тестето снимки (картите са завъртени и имат сянка) */
	}

	.makaz-hco__pattern {
		inset: -2.75rem calc(50% - 50vw) -3.5rem;
		-webkit-mask:
			linear-gradient(180deg, transparent 50%, #000 75%, #000 88%, transparent 98%),
			var(--hco-motif) 0 0 / 130px 130px repeat;
		-webkit-mask-composite: source-in;
		mask:
			linear-gradient(180deg, transparent 50%, #000 75%, #000 88%, transparent 98%),
			var(--hco-motif) 0 0 / 130px 130px repeat;
		mask-composite: intersect;
	}

	.makaz-home .makaz-hco__title {
		font-size: clamp(1.75rem, 7.6vw, 2.15rem);
	}

	.makaz-home .makaz-hco__text {
		margin-bottom: 1.4rem;
		font-size: 0.92rem;
	}

	/* вертикален „шев“, който се пришива веднъж отгоре надолу при появяване */
	.makaz-home .makaz-hco__steps {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 0.85rem;
		margin-bottom: 1.75rem;
	}

	.makaz-hco__steps::before {
		content: "";
		position: absolute;
		top: 16px;
		bottom: 16px;
		left: 15.5px;
		width: 1px;
		background: repeating-linear-gradient(180deg, var(--hco-line) 0 5px, transparent 5px 9px);
		transform: scaleY(0);
		transform-origin: top center;
		transition: transform 1.2s var(--hco-ease) 0.3s;
	}

	.makaz-hco__copy.is-visible .makaz-hco__steps::before {
		transform: scaleY(1);
	}

	.makaz-home .makaz-hco__step {
		position: relative;
		z-index: 1;
		gap: 0.85rem;
	}

	.makaz-hco__num {
		width: 32px;
		height: 32px;
		font-size: 0.7rem;
	}

	.makaz-hco__label {
		font-size: 0.8rem;
	}

	/* на телефон — по цялата ширина (като „Разгледай аксесоарите“) */
	.makaz-home .makaz-hco__btn {
		width: 100%;
		margin-inline: auto;
	}

	.makaz-hco__visual {
		width: min(100%, 200px);
		margin: 0.5rem auto 0.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.makaz-hco__thread,
	.makaz-hco__card {
		animation: none;
	}

	/* статично тесте */
	.makaz-hco__card:nth-child(1) {
		z-index: 4;
		transform: rotate(-2deg);
	}

	.makaz-hco__card:nth-child(2) {
		z-index: 3;
		transform: translate(12px, 6px) rotate(5deg);
	}

	.makaz-hco__card:nth-child(3) {
		z-index: 2;
		transform: translate(-14px, 8px) rotate(-7deg);
	}

	.makaz-hco__step::after,
	.makaz-home .makaz-hco__step {
		transition: none;
	}
}