/* Werksmans Campaign Carousel — scoped under .wc-carousel with wc- prefix
   to survive Avada's utility CSS without !important wars. */

.werksmans-carousel.wc-carousel {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	background: #0a0a0a;
	color: #fff;
	font-family: inherit;
	border-radius: 4px;
	min-height: 160px;
}
.werksmans-carousel .wc-viewport {
	position: relative;
	width: 100%;
	background: #0a0a0a;
}

/* ── Size presets ──
   Each preset controls (a) the max-width of the carousel and (b) the
   aspect-ratio of the viewport. Use the `size` shortcode/element attribute. */

/* full — fills the parent column at 100%, banner-tall (default behaviour before 0.7.2) */
.werksmans-carousel.wc-size-full   { max-width: 100%; }
.werksmans-carousel.wc-size-full   .wc-viewport { aspect-ratio: 16 / 6; }

/* wide — capped at 1200px, 16:7 (the new default — reasonable on full-width pages) */
.werksmans-carousel.wc-size-wide   { max-width: 1200px; }
.werksmans-carousel.wc-size-wide   .wc-viewport { aspect-ratio: 16 / 7; }

/* contained — capped at 960px, 16:8 (matches typical theme content widths) */
.werksmans-carousel.wc-size-contained { max-width: 960px; }
.werksmans-carousel.wc-size-contained .wc-viewport { aspect-ratio: 2 / 1; }

/* compact — capped at 720px, 4:3 (sidebar / blog-post placement) */
.werksmans-carousel.wc-size-compact { max-width: 720px; }
.werksmans-carousel.wc-size-compact .wc-viewport { aspect-ratio: 4 / 3; }

/* banner — full-width but short, like a notification bar (3:1 typical) */
.werksmans-carousel.wc-size-banner  { max-width: 100%; }
.werksmans-carousel.wc-size-banner  .wc-viewport { aspect-ratio: 5 / 1; }

/* screen — true viewport-width "breakout" from any column/container padding.
   Uses the negative-margin technique to escape the parent column entirely. */
.werksmans-carousel.wc-size-screen {
	max-width: 100vw;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	border-radius: 0;
}
.werksmans-carousel.wc-size-screen .wc-viewport { aspect-ratio: 16 / 6; }
@media (max-width: 768px) {
	.werksmans-carousel.wc-size-screen .wc-viewport { aspect-ratio: 4 / 3; }
}
.werksmans-carousel .wc-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 600ms ease;
	pointer-events: none;
	display: flex;
	/* Vertical-align the caption to the centre of the slide. */
	align-items: center;
	justify-content: center;
}
/* Full-slide readability scrim so centred text stays legible over any image.
   Absolutely positioned, so it is removed from the slide's flex flow. */
.werksmans-carousel .wc-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(rgba(0,0,0,0.30), rgba(0,0,0,0.48));
	pointer-events: none;
}
.werksmans-carousel .wc-slide.is-active {
	opacity: 1;
	pointer-events: auto;
	z-index: 1;
}
.werksmans-carousel .wc-image,
.werksmans-carousel .wc-image picture,
.werksmans-carousel .wc-slide picture {
	position: absolute;
	inset: 0;
	display: block;
}
.werksmans-carousel .wc-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.werksmans-carousel .wc-caption {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1100px;
	padding: 24px 32px;
	box-sizing: border-box;
}

/* ── Text alignment ── (also flips the slide's flex anchor so caption sits centred) */
.werksmans-carousel.wc-align-left   .wc-caption { text-align: left; }
.werksmans-carousel.wc-align-center .wc-caption { text-align: center; }
.werksmans-carousel.wc-align-right  .wc-caption { text-align: right; }

/* When centred or right-aligned, ensure block-level children (h*, a, etc.)
   collapse to their content width and align with the parent text-align. */
.werksmans-carousel.wc-align-center .wc-caption > * { margin-left: auto; margin-right: auto; }
.werksmans-carousel.wc-align-right  .wc-caption > * { margin-left: auto; margin-right: 0; }
/* Title — rendered above the headline at 2.5× the headline font-size.
   min() keeps it at ~2.5× on desktop while scaling down on narrow viewports. */
.werksmans-carousel .wc-title {
	margin: 0 0 10px 0;
	font-size: min(4em, 9.5vw); /* 2.5 × the 1.6em headline */
	line-height: 1.04;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 2px 6px rgba(0,0,0,0.55);
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
}
.werksmans-carousel .wc-headline {
	margin: 0 0 12px 0;
	font-size: 1.6em;
	line-height: 1.2;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
	/* Never truncate — wrap long headlines onto as many lines as needed. */
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
	white-space: normal;
}
/* Brand-aligned CTA — Werksmans "Disruptor green" #1ce5be / "Shadow green" #18b294 (hover). */
.werksmans-carousel .wc-cta {
	display: inline-block;
	padding: 10px 22px;
	background: #1ce5be;
	color: #000;
	text-decoration: none;
	font-weight: 700;
	border-radius: 2px;
	transition: background 200ms ease, transform 150ms ease;
}
.werksmans-carousel .wc-cta:hover,
.werksmans-carousel .wc-cta:focus {
	background: #18b294;
	color: #000;
	transform: translateY(-1px);
}
.werksmans-carousel .wc-cta-static {
	background: rgba(255,255,255,0.15);
	color: #fff;
	cursor: default;
}

/* ── Image style options ──
   Three modes via the `image_style` attribute, mapped to a modifier class:
     • wc-image-color    — full colour always (no filter)
     • wc-image-hover    — greyscale, hover/focus restores colour (default)
     • wc-image-greyscale — always greyscale, no hover transition

   The .wc-greyscale class is kept as a back-compat alias for wc-image-hover. */
.werksmans-carousel.wc-image-hover .wc-slide img,
.werksmans-carousel.wc-greyscale  .wc-slide img {
	filter: grayscale(100%);
	transition: filter 400ms ease;
}
.werksmans-carousel.wc-image-hover:hover     .wc-slide.is-active img,
.werksmans-carousel.wc-image-hover:focus-within .wc-slide.is-active img,
.werksmans-carousel.wc-greyscale:hover       .wc-slide.is-active img,
.werksmans-carousel.wc-greyscale:focus-within .wc-slide.is-active img {
	filter: grayscale(0%);
}
.werksmans-carousel.wc-image-greyscale .wc-slide img {
	filter: grayscale(100%);
}
/* wc-image-color is the default with no filter — nothing to declare */

/* Arrows */
.werksmans-carousel .wc-prev,
.werksmans-carousel .wc-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	background: rgba(0,0,0,0.45);
	color: #fff;
	border: 0;
	width: 40px;
	height: 40px;
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background 200ms ease;
	padding: 0;
}
.werksmans-carousel .wc-prev:hover,
.werksmans-carousel .wc-next:hover,
.werksmans-carousel .wc-prev:focus-visible,
.werksmans-carousel .wc-next:focus-visible {
	background: rgba(0,0,0,0.75);
	outline: none;
}
.werksmans-carousel .wc-prev { left: 12px; }
.werksmans-carousel .wc-next { right: 12px; }

/* Dots */
.werksmans-carousel .wc-dots {
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	z-index: 3;
	display: flex;
	gap: 6px;
	justify-content: center;
}
.werksmans-carousel .wc-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,0.4);
	cursor: pointer;
	transition: background 200ms ease, transform 200ms ease;
}
.werksmans-carousel .wc-dot[aria-selected="true"] {
	background: #1ce5be;
	transform: scale(1.25);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.werksmans-carousel .wc-slide {
		transition: none;
	}
}

/* Empty state */
.werksmans-carousel[data-wpb-empty="1"] {
	display: none;
}

/* Mobile */
@media (max-width: 768px) {
	.werksmans-carousel .wc-viewport {
		aspect-ratio: 4 / 3;
	}
	.werksmans-carousel .wc-headline {
		font-size: 1.15em;
	}
	.werksmans-carousel .wc-caption {
		padding: 16px 20px;
	}
	.werksmans-carousel .wc-prev,
	.werksmans-carousel .wc-next {
		width: 34px;
		height: 34px;
	}
}