/**
 * Over Ons — final parity layer (loads after ons-verhaal-mobile.css).
 * React localhost is source of truth; wins over mobile.css tail conflicts.
 *
 * @package Ayat_Food
 */

/* ==========================================================================
   Hero — image, shell, stat visibility (React uses sm: 640px, not lg)
   ========================================================================== */

.ons-verhaal-page .ipekci-ov2-hero__still,
.ons-verhaal-page .pr-cinematic-hero__img {
	filter: brightness(0.42) contrast(1.1) saturate(1.06);
	object-position: 68% center;
}

@media (min-width: 640px) {
	.ons-verhaal-page .ipekci-ov2-hero__still,
	.ons-verhaal-page .pr-cinematic-hero__img {
		object-position: 72% center;
	}
}

.ons-verhaal-page .pr-cinematic-hero__shell,
.ons-verhaal-page .ipekci-ov2-hero__inner {
	display: flex;
	min-height: min(92vh, 900px);
	flex-direction: column;
	justify-content: flex-end;
	padding-top: 7rem;
	padding-bottom: 0;
}

@media (min-width: 640px) {
	.ons-verhaal-page .pr-cinematic-hero__shell,
	.ons-verhaal-page .ipekci-ov2-hero__inner {
		padding-top: 8rem;
	}
}

@media (min-width: 1024px) {
	.ons-verhaal-page .pr-cinematic-hero__shell,
	.ons-verhaal-page .ipekci-ov2-hero__inner {
		padding-top: 9rem;
	}
}

.ons-verhaal-page .ipekci-ov2-hero__row {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-bottom: 2rem;
}

@media (min-width: 1024px) {
	.ons-verhaal-page .ipekci-ov2-hero__row {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		padding-bottom: 3rem;
	}
}

.ons-verhaal-page .pr-cinematic-hero__badges,
.ons-verhaal-page .ipekci-ov2-hero__eyebrow-row {
	margin-top: 1.5rem;
}

@media (min-width: 640px) {
	.ons-verhaal-page .pr-cinematic-hero__badges,
	.ons-verhaal-page .ipekci-ov2-hero__eyebrow-row {
		margin-top: 2rem;
	}
}

/* Hero stat — sm breakpoint like React (not lg) */
.ons-verhaal-page .ons-verhaal-hero__stat--mobile {
	display: inline-flex;
}

.ons-verhaal-page .ons-verhaal-hero__stat--desktop {
	display: none;
}

@media (min-width: 640px) {
	.ons-verhaal-page .ons-verhaal-hero__stat--mobile {
		display: none !important;
	}

	.ons-verhaal-page .ons-verhaal-hero__stat--desktop {
		display: inline-flex !important;
		flex-shrink: 0;
	}
}

/* Luxury glass stat card — override mobile.css flat 1rem radius */
.ons-verhaal-page .ons-verhaal-hero__stat,
.ons-verhaal-page .ons-verhaal-hero__stat-desktop {
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 1.65rem 0.95rem 1.85rem 1.05rem;
	background: linear-gradient(
		165deg,
		rgba(255, 255, 255, 0.09) 0%,
		rgba(8, 8, 8, 0.72) 48%,
		rgba(20, 6, 6, 0.82) 100%
	);
	box-shadow: 0 40px 100px -48px rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}

@media (min-width: 640px) {
	.ons-verhaal-page .ons-verhaal-hero__stat,
	.ons-verhaal-page .ons-verhaal-hero__stat-desktop {
		border-radius: 1.85rem 1rem 2rem 1.15rem;
	}
}

.ons-verhaal-page .ons-verhaal-hero__stat {
	padding: 1.25rem;
}

.ons-verhaal-page .ons-verhaal-hero__stat-desktop {
	min-width: 220px;
	padding: 1.5rem;
}

.ons-verhaal-page .ons-verhaal-hero__stat .ipekci-ov2-hero__stat-value {
	margin-top: 0.5rem;
	font-size: 2.35rem;
}

.ons-verhaal-page .ons-verhaal-hero__stat-desktop .ipekci-ov2-hero__stat-value {
	margin-top: 0.75rem;
	font-size: 3rem;
}

.ons-verhaal-page .ipekci-ov2-hero__stat-label {
	color: rgba(255, 255, 255, 0.5);
}

.ons-verhaal-page .ipekci-ov2-hero__stat-value {
	color: #fff;
}

/* Mobile hero title — React clamp beats premium compact override */
@media (max-width: 767px) {
	.ons-verhaal-page .ons-verhaal-hero__title,
	.ons-verhaal-page .pr-cinematic-hero__title.ons-verhaal-hero__title,
	.ons-verhaal-page .ipekci-ov2-hero__title.product-hero-mobile__title {
		font-size: clamp(1.85rem, 7.2vw, 2.45rem) !important;
		line-height: 1.05 !important;
		letter-spacing: -0.03em !important;
	}
}

/* ==========================================================================
   01 — Service
   ========================================================================== */

.ons-verhaal-page .ipekci-ov2-svc__title {
	color: #fff;
}

@media (max-width: 1023px) {
	.ons-verhaal-page .ons-service-app__title {
		margin-top: 1.25rem;
		font-family: var(--ipek-font-display);
		font-weight: 600;
		line-height: 1.02;
		letter-spacing: -0.03em;
		color: #fff;
	}

	.ons-verhaal-page .ons-service-app__title > span:first-child {
		color: #da292a;
	}

	.ons-verhaal-page .ons-service-app__title > span:last-child {
		color: #fff;
	}

	.ons-verhaal-page .ons-service-app__tagline {
		margin-top: 1rem;
	}
}

/* ==========================================================================
   02 — Halal
   ========================================================================== */

.ons-verhaal-page .ipekci-ov2-halal__lede {
	line-height: 1.9;
}

/* ==========================================================================
   06 — Assortiment + 07 — Careers (ipek-h2 editorial scale)
   ========================================================================== */

.ons-verhaal-page .ipekci-ov2-as__title,
.ons-verhaal-page .ipekci-ov2-careers__title {
	font-size: clamp(1.5rem, 2.4vw, 2.15rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

/* ==========================================================================
   05 — Highlights section rhythm
   ========================================================================== */

.ons-verhaal-page .ipekci-ov2-hl {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

@media (min-width: 640px) {
	.ons-verhaal-page .ipekci-ov2-hl {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
}

@media (min-width: 1024px) {
	.ons-verhaal-page .ipekci-ov2-hl {
		padding-top: 5rem;
		padding-bottom: 5rem;
	}
}


.ons-verhaal-page .ipekci-klant__title {
	margin-top: 1.5rem;
	font-size: clamp(2.25rem, 4.8vw, 3.5rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: #c6a062;
}

@media (max-width: 1023px) {
	.ons-verhaal-page .ons-klant-cta-app__title {
		margin-top: 1rem;
		font-family: var(--ipek-font-display);
		font-size: clamp(1.65rem, 6.4vw, 2.15rem);
		font-weight: 600;
		line-height: 1.02;
		letter-spacing: -0.03em;
		color: #c6a062;
	}
}