/**
 * Over ons premium parity fixes — React localhost alignment.
 * Loaded after ons-verhaal-premium-b.css on /ons-verhaal.
 *
 * @package Ayat_Food
 * @since   1.5.1
 */

/* ==========================================================================
   Cinematic hero layers — always visible (never gated by scroll motion)
   ========================================================================== */

.ipekci-ov2-wf__hero-bg,
.ipekci-ov2-stats__hero-bg {
	opacity: 1 !important;
	transform: none !important;
}

/* ==========================================================================
   03 — Workflow: hero media wrapper (gradients scoped to image area)
   ========================================================================== */

.ipekci-ov2-wf__hero-bg::before,
.ipekci-ov2-wf__hero-bg::after {
	display: none;
}

.ipekci-ov2-wf__hero-bg img {
	position: static;
	inset: auto;
	left: auto;
	right: auto;
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center 38%;
}

.ipekci-ov2-wf__hero-media picture {
	display: block;
	height: 100%;
	width: 100%;
}

.ipekci-ov2-wf__hero-media picture img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center 38%;
}

.ipekci-ov2-wf__hero-media {
	position: absolute;
	inset-block: 0;
	left: 0;
	right: calc(50% - 50vw);
	overflow: hidden;
}

@media (min-width: 640px) {
	.ipekci-ov2-wf__hero-media {
		left: 4%;
	}
}

@media (min-width: 1024px) {
	.ipekci-ov2-wf__hero-media {
		left: 30%;
	}
}

@media (min-width: 1280px) {
	.ipekci-ov2-wf__hero-media {
		left: 32%;
	}
}

.ipekci-ov2-wf__hero-grad-left {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		#fdfbf7 0%,
		rgba(253, 251, 247, 0.94) 14%,
		rgba(253, 251, 247, 0.55) 30%,
		rgba(253, 251, 247, 0.12) 48%,
		transparent 65%
	);
}

.ipekci-ov2-wf__hero-grad-bottom {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 55%;
	pointer-events: none;
	background: linear-gradient(
		to top,
		#fdfbf7 0%,
		#fdfbf7 18%,
		rgba(253, 251, 247, 0.98) 32%,
		rgba(255, 255, 255, 0.75) 48%,
		rgba(255, 255, 255, 0.25) 62%,
		transparent 82%
	);
}

.ipekci-ov2-wf__hero-glow {
	position: absolute;
	inset-inline: 0;
	bottom: 22%;
	height: 7rem;
	pointer-events: none;
	background: radial-gradient(
		ellipse 90% 100% at 50% 100%,
		rgba(255, 255, 255, 0.92),
		transparent 70%
	);
	filter: blur(2px);
}

/* Connector dots (desktop) */
.ipekci-ov2-wf__connector {
	height: auto;
	background: none;
}

.ipekci-ov2-wf__connector-line {
	display: block;
	height: 1px;
	width: 100%;
	background: rgba(198, 160, 98, 0.45);
	transform-origin: left center;
}

.ipekci-ov2-wf__connector-dot {
	position: absolute;
	top: 50%;
	height: 0.5rem;
	width: 0.5rem;
	transform: translate(-50%, -50%);
	border-radius: 9999px;
	border: 1px solid rgba(198, 160, 98, 0.65);
	background: #fff;
}

/* Step cards — exact React shadow stack */
.ipekci-ov2-wf__step {
	border-radius: 1rem;
	box-shadow:
		0 24px 64px -20px rgba(0, 0, 0, 0.18),
		0 0 0 1px rgba(0, 0, 0, 0.04);
}

.ipekci-ov2-wf__step:hover {
	transform: translateY(-8px);
	box-shadow: 0 36px 88px -22px rgba(0, 0, 0, 0.22);
}

.ipekci-ov2-wf__step-img img {
	max-height: 100%;
	width: auto;
	max-width: 100%;
	min-height: 72px;
	object-fit: contain;
	object-position: bottom;
}

.ipekci-ov2-wf__step-img picture {
	display: flex;
	height: 100%;
	width: 100%;
	align-items: flex-end;
	justify-content: center;
}

/* Hide partial PNG decode flash — show only when fully loaded */
.ipekci-ov-img {
	opacity: 0;
	transition: opacity 0.2s ease;
}

.ipekci-ov-img.is-decoded {
	opacity: 1;
}

/* ==========================================================================
   04 — Stats: hero media wrapper
   ========================================================================== */

.ipekci-ov2-stats__hero-bg::before,
.ipekci-ov2-stats__hero-bg::after {
	display: none;
}

.ipekci-ov2-stats__hero-bg img {
	position: static;
	inset: auto;
	left: auto;
	right: auto;
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center 45%;
	filter: brightness(0.72) contrast(1.08) saturate(1.05);
}

.ipekci-ov2-stats__hero-media picture {
	display: block;
	height: 100%;
	width: 100%;
}

.ipekci-ov2-stats__hero-media picture img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center 45%;
	filter: brightness(0.72) contrast(1.08) saturate(1.05);
}

.ipekci-ov2-stats__hero-media {
	position: absolute;
	inset-block: 0;
	left: 20%;
	right: calc(50% - 50vw);
	overflow: hidden;
}

@media (min-width: 640px) {
	.ipekci-ov2-stats__hero-media {
		left: 28%;
	}
}

@media (min-width: 1024px) {
	.ipekci-ov2-stats__hero-media {
		left: 38%;
	}
}

@media (min-width: 1280px) {
	.ipekci-ov2-stats__hero-media {
		left: 40%;
	}
}

.ipekci-ov2-stats__hero-grad-left {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		#080808 0%,
		rgba(8, 8, 8, 0.94) 18%,
		rgba(8, 8, 8, 0.55) 38%,
		rgba(8, 8, 8, 0.15) 58%,
		transparent 72%
	);
}

.ipekci-ov2-stats__hero-grad-radial {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
		ellipse 70% 55% at 72% 45%,
		rgba(218, 41, 42, 0.12),
		transparent 62%
	);
}

.ipekci-ov2-stats__hero-grad-bottom {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 50%;
	pointer-events: none;
	background: linear-gradient(
		to top,
		#080808 0%,
		#080808 20%,
		rgba(8, 8, 8, 0.92) 38%,
		rgba(8, 8, 8, 0.45) 58%,
		transparent 82%
	);
}

.ipekci-ov2-stats__cinematic::after {
	display: none;
}

/* Stat cards — hover lift matches React (-6px) */
.ipekci-ov2-stats__card:hover {
	transform: translateY(-6px);
}

/* ==========================================================================
   05 — Highlights: card shadow parity
   ========================================================================== */

.ipekci-ov2-hl__card {
	box-shadow: 0 24px 70px -32px rgba(0, 0, 0, 0.65);
}

.ipekci-ov2-hl__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 32px 90px -28px rgba(0, 0, 0, 0.75);
}

.ipekci-ov2-hl__card::before {
	background: linear-gradient(
		180deg,
		rgba(8, 8, 8, 0.15) 0%,
		rgba(8, 8, 8, 0.35) 42%,
		rgba(8, 8, 8, 0.92) 78%,
		#0a0a0a 100%
	);
}

.ipekci-ov2-hl__card::after {
	background: radial-gradient(
		ellipse 80% 60% at 18% 0%,
		rgba(226, 192, 141, 0.08),
		transparent 55%
	);
}

/* ==========================================================================
   01 — Service: card inset highlight
   ========================================================================== */

.ipekci-ov2-svc__card {
	box-shadow:
		0 48px 120px -48px rgba(0, 0, 0, 0.85),
		inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ipekci-ov2-svc__float {
	box-shadow:
		0 32px 80px -32px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   02 — Halal: quote card shadow
   ========================================================================== */

.ipekci-ov2-halal__card {
	box-shadow:
		0 40px 100px -40px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   06 — Assortiment: category card shadow
   ========================================================================== */

.ipekci-ov2-as__cat {
	box-shadow: 0 28px 80px -44px rgba(0, 0, 0, 0.45);
}

.ipekci-ov2-as__cat:hover {
	box-shadow: 0 44px 110px -40px rgba(0, 0, 0, 0.58);
}