/**
 * Dual Diagonal Section
 * ---------------------
 * Uses BEM naming: .er-dual-diagonal__*
 *
 * The diagonal effect is achieved by stacking two absolutely-positioned
 * panels and clipping each with a CSS clip-path polygon. This keeps the
 * markup simple (two divs) while giving us a crisp, pixel-perfect diagonal.
 *
 * Diagonal line goes from TOP-RIGHT corner down to BOTTOM-LEFT corner,
 * matching the reference design.
 */

/* =========================================================================
   CSS VARIABLES (scoped to the component to avoid collisions)
   ========================================================================= */
.er-dual-diagonal {
	--erdd-accent-pink: #FF8DA1;
	--erdd-accent-green: #2d5a3d;
	--erdd-text-dark: #222;
	--erdd-text-light: #ffffff;
	--erdd-text-muted: rgba(255, 255, 255, 0.85);
	--erdd-divider-width: 3px;
	--erdd-logo-size: 110px;
	--erdd-min-height: 1520px;
	--erdd-panel-padding: clamp(4rem, 8vw, 8rem);
}

/* =========================================================================
   WRAPPER
   ========================================================================= */
.er-dual-diagonal {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: #fff;
}

/* Top gradient overlay — white fade */
.er-dual-diagonal::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 150px;
	background: linear-gradient(to bottom, #ffffff, transparent);
	z-index: 20;
	pointer-events: none;
}

/* Bottom gradient overlay — black fade */
.er-dual-diagonal::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 150px;
	background: linear-gradient(to top, #000000, transparent);
	z-index: 20;
	pointer-events: none;
}

.er-dual-diagonal__inner {
	position: relative;
	width: 100%;
	min-height: var(--erdd-min-height);
}

/* =========================================================================
   PANELS — both stacked absolutely, each clipped to a triangle
   ========================================================================= */
.er-dual-diagonal__panel {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

/* LEFT PANEL — fills the TOP-LEFT triangle.
   Polygon points (x y):
     top-left (0 0) -> top-right (100% 0) -> bottom-left (0 100%) */
.er-dual-diagonal__panel--left {
	background-color: #e9e9e9;
	clip-path: polygon(0 0, 100% 0, 100% 10%, 0 90%);
	z-index: 1;
}

/* RIGHT PANEL — fills the BOTTOM-RIGHT triangle.
   Polygon points (x y):
     top-right (100% 0) -> bottom-right (100% 100%) -> bottom-left (0 100%) */
.er-dual-diagonal__panel--right {
	background-color: #0a0a0a;
	clip-path: polygon(0 90%, 100% 10%, 100% 100%, 0 100%);
	z-index: 1;
}

/* Dark gradient overlay on right panel (toggle-controlled) */
.er-dual-diagonal__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.55) 50%,
			rgba(0, 0, 0, 0.25) 100%);
	pointer-events: none;
}

/* =========================================================================
   DIAGONAL DIVIDER LINE
   ========================================================================= */
.er-dual-diagonal__divider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
	background-color: var(--erdd-accent-pink);
	clip-path: polygon(
		0 calc(90% - 1.5px),
		100% calc(10% - 1.5px),
		100% calc(10% + 1.5px),
		0 calc(90% + 1.5px)
	);
}

/* =========================================================================
   PANEL CONTENT
   ========================================================================= */
.er-dual-diagonal__panel-content {
	position: relative;
	z-index: 3;
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: var(--erdd-panel-padding);
}

/* Left content sits in the top-left area */
.er-dual-diagonal__panel--left .er-dual-diagonal__panel-content {
	padding-top: clamp(3rem, 6vw, 6rem);
}

/* Right content sits in the bottom-right area */
.er-dual-diagonal__panel-content--right {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	text-align: left;
	padding-top: clamp(4rem, 8vw, 8rem);
	padding-bottom: 1rem;
	padding-right: clamp(1.25rem, 3vw, 3rem);
}

.er-dual-diagonal__panel-content--right .er-dual-diagonal__title,
.er-dual-diagonal__panel-content--right .er-dual-diagonal__paragraph {
	max-width: 480px;
	margin-left: auto;
	margin-right: 0;
}


/* =========================================================================
   TYPOGRAPHY
   ========================================================================= */
.er-dual-diagonal__title,
.er-dual-diagonal__subtitle {
	font-family: 'Futura PT', 'Futura', 'Century Gothic', sans-serif;
	font-size: 49px;
	font-weight: 400;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0 0 1rem;
	z-index: 10;
}

.er-dual-diagonal__subtitle {
	margin: 0 0 1.25rem;
}

.er-dual-diagonal__title--main-top {
	width: 100%;
	text-align: center;
	color: var(--erdd-text-dark);
	margin: 0 auto clamp(3rem, 8vw, 8rem);
	z-index: 10;
}

.er-dual-diagonal__title--left {
	color: var(--erdd-text-dark);
}

.er-dual-diagonal__subtitle--left {
	color: var(--erdd-text-dark) !important;
}

.er-dual-diagonal__title--right {
	color: var(--erdd-text-light);
}

.er-dual-diagonal__highlight {
	font-weight: 700;
}

.er-dual-diagonal__highlight--green {
	color: var(--erdd-accent-green);
}

.er-dual-diagonal__highlight--pink {
	color: var(--erdd-accent-pink);
}

.er-dual-diagonal__highlight--bold {
	font-weight: 800;
}

.er-dual-diagonal__paragraph {
	font-size: 18px;
	line-height: 1.6;
	margin: 0;
	max-width: 42ch;
	font-family: 'Inter', sans-serif;
}

.er-dual-diagonal__paragraph--left {
	color: var(--erdd-text-dark);
}

.er-dual-diagonal__paragraph--right {
	color: var(--erdd-text-muted);
}

/* =========================================================================
   INLINE DECORATIVE IMAGES
   ========================================================================= */
.er-dual-diagonal__decorative {
	display: block;
	max-width: 180px;
	height: auto;
	margin-top: 1.5rem;
	pointer-events: none;
	user-select: none;
}

.er-dual-diagonal__decorative--left {
	margin-left: calc(50% - 50vw);
	width: 650px;
	max-width: none;
}

@media (max-width: 1600px) {
	.er-dual-diagonal__decorative--left,
	.er-dual-diagonal__decorative--right { width: 550px; }
}

@media (max-width: 1055px) {
	.er-dual-diagonal__decorative--left,
	.er-dual-diagonal__decorative--right { width: 500px; }
}

.er-dual-diagonal__decorative--right {
	margin-right: calc(50% - 50vw);
	width: 650px;
	max-width: none;
	margin-left: auto;
}

/* =========================================================================
   CENTER CIRCULAR LOGO
   ========================================================================= */
.er-dual-diagonal__logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--erdd-logo-size);
	height: var(--erdd-logo-size);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.er-dual-diagonal__logo-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* =========================================================================
   RESPONSIVE — TABLET (diagonal switches to mobile-style angle)
   ========================================================================= */
@media (max-width: 1024px) {
	.er-dual-diagonal {
		--erdd-min-height: 1500px;
		--erdd-logo-size: 90px;
	}

	.er-dual-diagonal__title,
	.er-dual-diagonal__subtitle {
		font-size: 40px;
	}

	.er-dual-diagonal__title--main-top {
		width: 100%;
		margin: 0 auto 3rem;
		text-align: center;
		padding: 3rem 1.25rem 0;
		z-index: 10;
	}

	.er-dual-diagonal__inner {
		min-height: 1500px;
		display: block;
	}

	/* Divider draws the sloped gap */
	.er-dual-diagonal__divider {
		display: block;
		background: var(--erdd-accent-pink);
		clip-path: polygon(0 calc(60% - 1.5px),
				100% calc(50% - 1.5px),
				100% calc(50% + 1.5px),
				0 calc(60% + 1.5px));
		z-index: 2;
	}

	/* BOTTOM block (Right Panel) */
	.er-dual-diagonal__panel--right {
		position: absolute;
		inset: 0;
		height: 100%;
		min-height: 0;
		margin-top: 0;
		padding-top: 0;
		clip-path: polygon(0 60%, 100% 50%, 100% 100%, 0 100%);
	}

	/* TOP block (Left Panel) */
	.er-dual-diagonal__panel--left {
		position: absolute;
		inset: 0;
		height: 100%;
		min-height: 0;
		clip-path: polygon(0 0, 100% 0, 100% 50%, 0 60%);
		padding-bottom: 0;
	}

	.er-dual-diagonal__panel-content {
		position: relative;
		margin: 0 auto;
		max-width: 80%;
		padding: 2rem 1.25rem;
		text-align: center;
	}

	.er-dual-diagonal__panel--left .er-dual-diagonal__panel-content {
		padding-top: 3rem;
		padding-bottom: 4rem;
	}

	.er-dual-diagonal__panel-content--right {
		position: absolute;
		right: auto;
		bottom: 2rem;
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
		max-width: 80%;
		padding: 4rem 1.25rem 3rem;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.er-dual-diagonal__paragraph {
		font-size: 18px;
		line-height: 1.6;
		margin: 0 auto;
		max-width: 100%;
		font-family: 'Inter', sans-serif;
	}

	.er-dual-diagonal__decorative--left {
		width: 400px;
		max-width: none;
		margin-left: calc(50% - 50vw);
		margin-right: auto;
	}

	.er-dual-diagonal__decorative--right {
		width: 400px;
		max-width: none;
		margin-right: calc(50% - 50vw);
		margin-left: auto;
		order: -1;
		margin-top: 0;
		margin-bottom: 2rem;
	}

	.er-dual-diagonal__logo {
		position: absolute;
		top: 55%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		z-index: 4;
	}
}

/* =========================================================================
   RESPONSIVE — MOBILE (smaller sizes and spacing)
   ========================================================================= */
@media (max-width: 768px) {
	.er-dual-diagonal {
		--erdd-logo-size: 80px;
	}

	.er-dual-diagonal__title,
	.er-dual-diagonal__subtitle {
		font-size: 35px;
	}


}

@media (max-width: 660px) {
	.er-dual-diagonal__decorative--left,
	.er-dual-diagonal__decorative--right { width: 300px; }

	.er-dual-diagonal__panel-content--right {
		padding-top: 1rem;
	}
}

@media (max-width: 600px) {
	.er-dual-diagonal__decorative--left,
	.er-dual-diagonal__decorative--right { width: 250px; }
}

@media (max-width: 480px) {
	.er-dual-diagonal {
		--erdd-logo-size: 70px;
	}

	.er-dual-diagonal__panel--left,
	.er-dual-diagonal__panel--right {
		min-height: 460px;
	}
}

@media (max-width: 470px) {
	.er-dual-diagonal__decorative--left,
	.er-dual-diagonal__decorative--right { width: 220px; }
}

/* Surgical adjustment for smaller desktop viewports */
@media (min-width: 1025px) and (max-width: 1130px) {
	.er-dual-diagonal__decorative--left {
		width: 480px;
		margin-bottom: 100px;
	}
}

/* =========================================================================
   ACCESSIBILITY — reduced motion (no animations in this component, but
   reserve the hook for future hover effects on decorative images).
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.er-dual-diagonal * {
		transition: none !important;
		animation: none !important;
	}
}