/* ===== Homepage Campaign Carousel =====
   dc_campaign CPT (dcclinic-core) -> dcclinic_render_campaign_carousel()
   Owl Carousel v2 provides the slide/drag mechanics + dots/nav (see
   assets/js/campaign-slider.js for the init options); this file is purely
   the slide layout — reuses --dc-home-* tokens from home-landing.css so the
   carousel matches the rest of the homepage without its own new palette.

   Each slide is just an image + title (see dcclinic_render_campaign_slide())
   — the whole slide is the click target when a Link/Page is set. */

.dc-campaign-carousel-section {
	padding: 0;
	background: var(--dc-home-cream, #f7f4ef);
}

/* Before Owl runs, lay the slides out with plain flexbox + clip the overflow
   so only the first one is visible — a stable, one-time layout rather than
   a display:none toggle that has to race Owl's own DOM rewrap (that race
   was the "flash of every slide stacked, then it jumps" glitch). The moment
   Owl adds .owl-loaded it takes over completely and this block stops
   applying — no conflict with Owl's own (translate3d-based) layout. */
.dc-campaign-carousel:not(.owl-loaded) {
	display: flex;
	overflow: hidden;
}
.dc-campaign-carousel:not(.owl-loaded) .dc-campaign-slide {
	flex: 0 0 100%;
	width: 100%;
}

.dc-campaign-slide {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	max-height: 640px;
	overflow: hidden;
	color: #fff;
	background: var(--dc-home-cream, #fff);
	text-decoration: none;
}

.dc-campaign-slide__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* `contain` (not `cover`): the frame's own aspect-ratio is fixed (very
	   wide/short on desktop, tall on mobile) but an uploaded photo can be any
	   shape — `cover` would crop off whatever doesn't match, worst on
	   desktop's 21:9 box. `contain` always shows the WHOLE image, letting the
	   slide's own dark background fill any leftover space as a letterbox
	   rather than cutting the photo. Never stretched either way. */
	object-fit: contain;
}

.dc-campaign-slide__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

.dc-campaign-slide__title {
	position: absolute;
	z-index: 1;
	left: 0;
	bottom: 0;
	margin: 0;
	max-width: 720px;
	padding: 0 6% 6%;
	font-size: clamp(1.4rem, 3.6vw, 2.5rem);
	font-weight: 700;
	line-height: 1.3;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* -- Owl nav-theme: prev/next + dots, matching the DC Clinic gold palette --
   A solid dark chip (not a translucent white one) so the controls stay
   legible whether they're sitting over a photo OR the slide's own cream
   letterbox background (object-fit: contain can put either behind them) —
   translucent-white-on-cream would have been nearly invisible. */
.dc-campaign-carousel.owl-carousel .owl-nav {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
	z-index: 2;
}
.dc-campaign-carousel.owl-carousel .owl-nav button.owl-prev,
.dc-campaign-carousel.owl-carousel .owl-nav button.owl-next {
	pointer-events: auto;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 16px;
	border-radius: 50%;
	background: rgba(43, 43, 43, 0.55) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	color: #fff !important;
	font-size: 22px;
	line-height: 1;
	transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.dc-campaign-carousel.owl-carousel .owl-nav button:hover,
.dc-campaign-carousel.owl-carousel .owl-nav button:focus-visible {
	background: var(--dc-home-gold, #ac8d62) !important;
	transform: scale(1.06);
}
.dc-campaign-carousel.owl-carousel .owl-nav button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.dc-campaign-carousel.owl-carousel .owl-nav button:active {
	transform: scale(0.96);
}
/* Owl adds .disabled at the ends when loop is off (e.g. only 1 campaign) —
   without this the button looked identical whether it did anything or not. */
.dc-campaign-carousel.owl-carousel .owl-nav button.disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.dc-campaign-carousel.owl-carousel .owl-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
}
.dc-campaign-carousel.owl-carousel .owl-dot {
	padding: 6px 4px !important; /* generous tap target beyond the visible dot */
}
.dc-campaign-carousel.owl-carousel .owl-dot span {
	width: 9px;
	height: 9px;
	margin: 0;
	background: rgba(43, 43, 43, 0.35);
	border: 1.5px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	display: block;
	transition: background 0.2s ease, transform 0.2s ease;
}
.dc-campaign-carousel.owl-carousel .owl-dot.active span,
.dc-campaign-carousel.owl-carousel .owl-dot:hover span {
	background: var(--dc-home-gold, #ac8d62);
	border-color: var(--dc-home-gold, #ac8d62);
	transform: scale(1.2);
}
.dc-campaign-carousel.owl-carousel .owl-dot:focus-visible span {
	outline: 2px solid var(--dc-home-gold, #ac8d62);
	outline-offset: 2px;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
	.dc-campaign-slide {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 767px) {
	.dc-campaign-slide {
		aspect-ratio: 4 / 5;
		max-height: none;
	}
	.dc-campaign-slide__title {
		padding-bottom: 56px; /* clears the dots */
	}
	.dc-campaign-slide__overlay {
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
	}
	.dc-campaign-carousel.owl-carousel .owl-nav {
		display: none; /* touch swipe only on mobile, per spec */
	}
}