/* ===========================
c2 Hero Switcher – style.css
Bigger + better placement for 3-panel left/right
=========================== */

/* Container */
.c2hs { --c2hs-ar:16/9; --c2hs-width:100%; position:relative; }
.c2hs .c2hs__frame { position:relative; width:min(100%, var(--c2hs-width)); aspect-ratio:var(--c2hs-ar); overflow:hidden; isolation:isolate; }

/* Panel wrapper */
.c2hs .c2hs__panel{
	position:absolute; inset:0;
	display:grid; place-items:center; color:inherit;
	background-size:cover; background-repeat:no-repeat;
	overflow:hidden;
}

/* Mask (full size, does the clipping + hits) */
.c2hs .c2hs__mask{
	position:absolute; inset:0; z-index:0;
	pointer-events:auto;
	overflow:hidden;
}

/* Background inside wedge-sized bbox */
.c2hs .c2hs__bgbox{ position:absolute; inset:0; z-index:0; }
.c2hs .c2hs__bg{
	position:absolute; inset:0; z-index:0;
	background-image: var(--c2hs-bg, none);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: var(--c2hs-fx,50%) var(--c2hs-fy,50%);
}

/* Overlay (expects unitless 0–1 in --c2hs-dim) */
.c2hs .c2hs__overlay{
	position:absolute; inset:0;
	background:var(--c2hs-ov,#000);
	opacity:var(--c2hs-dim,.4);
	pointer-events:none; z-index:1;
}

/* ===== Inner content: a bit larger by default ===== */
.c2hs .c2hs__inner{
	position:absolute;
	top: var(--c2hs-y,50%); left: var(--c2hs-x,50%);
	transform: translate(-50%,-50%);
	z-index:2;
	padding:clamp(12px,2.5vw,32px);

	/* bigger than before; capped high, but each layout sets a safe % */
	inline-size: clamp(220px, var(--c2hs-safe-w,72%), 1040px);

	display:grid; place-items:center; text-align:center;
}
.c2hs .c2hs__inner.is-left  { justify-items:start; text-align:left; }
.c2hs .c2hs__inner.is-right { justify-items:end;   text-align:right; }

/* Clickable layer (confined by mask) */
.c2hs .c2hs__hit{ position:absolute; inset:0; z-index:3; text-decoration:none !important; }

/* ===========================
Shapes – apply to MASK (full size)
=========================== */
.c2hs.c2hs--count-1 .c2hs__panel:nth-child(1) .c2hs__mask{ clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%); }
.c2hs.c2hs--count-2 .c2hs__panel:nth-child(1) .c2hs__mask{ clip-path: polygon(0% 0%,50% 0%,50% 100%,0% 100%); }
.c2hs.c2hs--count-2 .c2hs__panel:nth-child(2) .c2hs__mask{ clip-path: polygon(50% 0%,100% 0%,100% 100%,50% 100%); }
.c2hs.c2hs--count-3 .c2hs__panel:nth-child(1) .c2hs__mask{ clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 100%); }
.c2hs.c2hs--count-3 .c2hs__panel:nth-child(2) .c2hs__mask{ clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 50%); }
.c2hs.c2hs--count-3 .c2hs__panel:nth-child(3) .c2hs__mask{ clip-path: polygon(0% 100%, 100% 100%, 50% 50%); }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(1) .c2hs__mask{ clip-path: polygon(0% 0%, 50% 50%, 0% 100%); }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(2) .c2hs__mask{ clip-path: polygon(100% 0%, 100% 100%, 50% 50%); }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(3) .c2hs__mask{ clip-path: polygon(0% 0%, 100% 0%, 50% 50%); }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(4) .c2hs__mask{ clip-path: polygon(0% 100%, 100% 100%, 50% 50%); }

/* ===========================
Shapes – apply directly to PANEL (saved HTML has no .c2hs__mask)
=========================== */
.c2hs.c2hs--count-1 .c2hs__panel:nth-child(1){ clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%); }
.c2hs.c2hs--count-2 .c2hs__panel:nth-child(1){ clip-path: polygon(0% 0%,50% 0%,50% 100%,0% 100%); }
.c2hs.c2hs--count-2 .c2hs__panel:nth-child(2){ clip-path: polygon(50% 0%,100% 0%,100% 100%,50% 100%); }
.c2hs.c2hs--count-3 .c2hs__panel:nth-child(1){ clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 100%); }
.c2hs.c2hs--count-3 .c2hs__panel:nth-child(2){ clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 50%); }
.c2hs.c2hs--count-3 .c2hs__panel:nth-child(3){ clip-path: polygon(0% 100%, 100% 100%, 50% 50%); }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(1){ clip-path: polygon(0% 0%, 50% 50%, 0% 100%); }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(2){ clip-path: polygon(100% 0%, 100% 100%, 50% 50%); }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(3){ clip-path: polygon(0% 0%, 100% 0%, 50% 50%); }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(4){ clip-path: polygon(0% 100%, 100% 100%, 50% 50%); }

/* ===========================
BG bounding boxes – apply to B G B O X
=========================== */
.c2hs.c2hs--count-2 .c2hs__panel:nth-child(1) .c2hs__bgbox{ left:0;   top:0; width:50%; height:100%; }
.c2hs.c2hs--count-2 .c2hs__panel:nth-child(2) .c2hs__bgbox{ left:50%;  top:0; width:50%; height:100%; }

.c2hs.c2hs--count-3 .c2hs__panel:nth-child(1) .c2hs__bgbox{ left:0;   top:0; width:50%; height:100%; }
.c2hs.c2hs--count-3 .c2hs__panel:nth-child(2) .c2hs__bgbox{ left:50%;  top:0; width:50%; height:100%; }
.c2hs.c2hs--count-3 .c2hs__panel:nth-child(3) .c2hs__bgbox{ left:0;  top:50%; width:100%; height:50%; }

.c2hs.c2hs--count-4 .c2hs__panel:nth-child(1) .c2hs__bgbox{ left:0;   top:0;  width:50%; height:100%; }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(2) .c2hs__bgbox{ left:50%;  top:0;  width:50%; height:100%; }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(3) .c2hs__bgbox{ left:0;   top:0;  width:100%; height:50%; }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(4) .c2hs__bgbox{ left:0;  top:50%; width:100%; height:50%; }

/* ===========================
Bigger “safe” anchors
=========================== */

/* 1 panel */
.c2hs.c2hs--count-1 .c2hs__panel:nth-child(1){ --c2hs-x:50%; --c2hs-y:50%; --c2hs-safe-w:92%; }

/* 2 panels */
.c2hs.c2hs--count-2 .c2hs__panel:nth-child(1){ --c2hs-x:25%; --c2hs-y:48%; --c2hs-safe-w:50%; }
.c2hs.c2hs--count-2 .c2hs__panel:nth-child(2){ --c2hs-x:75%; --c2hs-y:48%; --c2hs-safe-w:50%; }

/* 3 panels — 🔥 tuned: higher + wider + closer to outer sides */
.c2hs.c2hs--count-3 .c2hs__panel:nth-child(1){ --c2hs-x:25%; --c2hs-y:40%; --c2hs-safe-w:50%; } /* left */
.c2hs.c2hs--count-3 .c2hs__panel:nth-child(2){ --c2hs-x:75%; --c2hs-y:40%; --c2hs-safe-w:50%; } /* right */
.c2hs.c2hs--count-3 .c2hs__panel:nth-child(3){ --c2hs-x:50%; --c2hs-y:82%; --c2hs-safe-w:72%; } /* bottom */

/* 4 panels (unchanged, but you can bump similarly if wanted) */
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(1){ --c2hs-x:18%; --c2hs-y:50%; --c2hs-safe-w:44%; }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(2){ --c2hs-x:82%; --c2hs-y:50%; --c2hs-safe-w:44%; }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(3){ --c2hs-x:50%; --c2hs-y:18%; --c2hs-safe-w:68%; }
.c2hs.c2hs--count-4 .c2hs__panel:nth-child(4){ --c2hs-x:50%; --c2hs-y:82%; --c2hs-safe-w:68%; }

/* Hover polish */
.c2hs .c2hs__mask, .c2hs .c2hs__panel{ transition: transform .4s ease, filter .3s ease; }
.c2hs:hover .c2hs__mask, .c2hs:hover .c2hs__panel{ filter: brightness(.98); }
.c2hs:hover .c2hs__mask:hover, .c2hs:hover .c2hs__panel:hover{ transform: scale(1.02); z-index:5; }

/* Buttons & links above overlay */
.c2hs .wp-block-button__link, .c2hs a{ position:relative; z-index:2; }

/* ===========================
Inside Navigation overlay – fill the overlay
=========================== */
.wp-block-navigation__responsive-container-content .c2hs {
	flex: 1 1 0%;
	width: 100%;
	min-height: 0;
}
.wp-block-navigation__responsive-container-content .c2hs .c2hs__frame {
	width: 100%;
	height: 100%;
}

/* =========================================
Stack panels equally below 1024px
========================================= */
@media (max-width: 1024px) {
	/* The frame defines the total hero height on mobile */
	.c2hs .c2hs__frame {
		aspect-ratio: auto !important;
		width: min(100%, var(--c2hs-width));
		height: var(--c2hs-stack-h, 100vh); /* change to 80vh, 120svh, etc. if you like */
		height: var(--c2hs-stack-h, 100svh);
		height: var(--c2hs-stack-h, 100dvh);
		display: flex;
		flex-direction: column;
	}

	/* Each panel becomes a flex row with equal share */
	.c2hs .c2hs__panel {
		position: relative;
		inset: auto;
		display: block;
		flex: 1 1 0%;
		min-height: 0;  /* important to prevent one row hogging height */
		clip-path: none !important;
	}

	/* No wedge shapes when stacked */
	.c2hs .c2hs__mask {
		position: absolute;
		inset: 0;
		clip-path: none !important;
		overflow: hidden;
		pointer-events: auto;
	}

	/* Background bbox fills the row */
	.c2hs .c2hs__bgbox { left: 0; top: 0; width: 100%; height: 100%; }

	/* Center content and give it room */
	.c2hs .c2hs__panel {
		--c2hs-x: 50%;
		--c2hs-y: 50%;
		--c2hs-safe-w: 94%;
	}
	.c2hs .c2hs__inner {
		top: 50%; left: 50%;
		transform: translate(-50%, -50%);
		inline-size: min(94%, 1000px);
		text-align: center;
		justify-items: center;
	}

	/* Optional: dial down hover zoom on small screens */
	.c2hs:hover .c2hs__mask:hover { transform: none; filter: none; }
}