/**
 * Chevron frames for Home New — Elementor column background images.
 *
 * Background is usually on `.elementor-widget-wrap` (Elementor column style).
 * CSS Classes on the Column:
 *   drc-chevron drc-chevron--right
 *   drc-chevron drc-chevron--left
 */

.drc-chevron.elementor-column,
.drc-chevron.elementor-section,
.drc-chevron.e-con,
.drc-chevron.elementor-inner-section {
	--drc-point: clamp(80px, 20%, 160px);
	--drc-gap: 6px;
	--drc-stroke: 10px;
	--drc-accent: #d9300b;
	--drc-inset-y: 20px;

	position: relative !important;
	overflow: visible !important;

	border: 0 !important;
	padding: 0 !important;
	background-color: transparent !important;
	background-image: none !important;
	background-clip: border-box !important;
	filter: none !important;
	clip-path: none !important;
}

/*
 * Stroke layers are the SAME overall shape/size as the photo (even gap),
 * only wider on the pointed side. A vertical mask hides the top/bottom
 * 20px so those ends sit under the photo without distorting the shape.
 */
.drc-chevron.elementor-column::before,
.drc-chevron.elementor-section::before,
.drc-chevron.e-con::before,
.drc-chevron.elementor-inner-section::before,
.drc-chevron.elementor-column::after,
.drc-chevron.elementor-section::after,
.drc-chevron.e-con::after,
.drc-chevron.elementor-inner-section::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--drc-inset-y),
		#000 var(--drc-inset-y),
		#000 calc(100% - var(--drc-inset-y)),
		transparent calc(100% - var(--drc-inset-y)),
		transparent 100%
	);
	mask-image: linear-gradient(
		to bottom,
		transparent 0,
		transparent var(--drc-inset-y),
		#000 var(--drc-inset-y),
		#000 calc(100% - var(--drc-inset-y)),
		transparent calc(100% - var(--drc-inset-y)),
		transparent 100%
	);
}

.drc-chevron.elementor-column::before,
.drc-chevron.elementor-section::before,
.drc-chevron.e-con::before,
.drc-chevron.elementor-inner-section::before {
	background: var(--drc-accent);
	z-index: 0;
}

.drc-chevron.elementor-column::after,
.drc-chevron.elementor-section::after,
.drc-chevron.e-con::after,
.drc-chevron.elementor-inner-section::after {
	background: #fff;
	z-index: 1;
}

/* RIGHT: same height as photo, only extend past the point */
.drc-chevron--right::before {
	left: 0;
	right: calc(-1 * (var(--drc-gap) + var(--drc-stroke)));
}

.drc-chevron--right::after {
	left: 0;
	right: calc(-1 * var(--drc-gap));
}

/* LEFT: same height as photo, only extend past the point */
.drc-chevron--left::before {
	right: 0;
	left: calc(-1 * (var(--drc-gap) + var(--drc-stroke)));
}

.drc-chevron--left::after {
	right: 0;
	left: calc(-1 * var(--drc-gap));
}

/* Photo on top so masked stroke ends read as flowing underneath */
.drc-chevron > .elementor-widget-wrap,
.drc-chevron > .elementor-container,
.drc-chevron > .e-con-inner {
	position: relative !important;
	z-index: 2;
}

/* ----- Point RIGHT (same path on photo + stroke = even gap) ----- */
.drc-chevron--right::before,
.drc-chevron--right::after,
.drc-chevron--right > .elementor-widget-wrap,
.drc-chevron--right > .elementor-container,
.drc-chevron--right > .e-con-inner {
	clip-path: polygon(
		0% 0%,
		calc(100% - var(--drc-point)) 0%,
		100% 50%,
		calc(100% - var(--drc-point)) 100%,
		0% 100%
	);
}

/* ----- Point LEFT ----- */
.drc-chevron--left::before,
.drc-chevron--left::after,
.drc-chevron--left > .elementor-widget-wrap,
.drc-chevron--left > .elementor-container,
.drc-chevron--left > .e-con-inner {
	clip-path: polygon(
		var(--drc-point) 0%,
		100% 0%,
		100% 100%,
		var(--drc-point) 100%,
		0% 50%
	);
}

@media (max-width: 767px) {
	.drc-chevron.elementor-column,
	.drc-chevron.elementor-section,
	.drc-chevron.e-con,
	.drc-chevron.elementor-inner-section {
		--drc-point: clamp(48px, 22%, 90px);
		--drc-gap: 4px;
		--drc-stroke: 3px;
		--drc-inset-y: 16px;
	}
}