/**
 * Custom Carousel — frontend styles.
 * Per-instance colours/sizes come from inline CSS variables (--cc-*).
 */

.cc-carousel {
	/* Minimum breathing room kept between the carousel and the edges of the
	   screen. Overridden per instance by the inline CSS, topped up at runtime
	   by frontend.js when the theme lets the carousel reach the viewport. */
	--cc-edge-gap: 16px;
	box-sizing: border-box;
	background: var(--cc-bg, #fff);
	color: var(--cc-text, #1a1a1a);
}

.cc-carousel *,
.cc-carousel *::before,
.cc-carousel *::after {
	box-sizing: border-box;
}

.cc-carousel .swiper {
	width: 100%;
	/* Never let a slide push the page into a horizontal scroll. */
	max-width: 100%;
}

/* Safety net: whatever the layout mode, an image can never be wider than the
   box it sits in, so it can never reach past the stage — and the stage is kept
   --cc-edge-gap away from the screen edges. */
.cc-carousel img {
	max-width: 100%;
}

/* Mobile fallback. frontend.js measures the carousel and replaces this with the
   exact padding needed; this rule is what keeps the gap when the script cannot
   run (blocked, cached markup, no-JS preview…). */
@media (max-width: 767px) {
	.cc-carousel {
		padding-left: var(--cc-edge-gap, 16px);
		padding-right: var(--cc-edge-gap, 16px);
	}
}

.cc-carousel .cc-slide {
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cc-bg, #fff);
}

.cc-carousel .cc-slide__img {
	display: block;
	width: 100%;
	max-width: 100%;
	border-radius: inherit;
}

/* Image wrapper — positioning context for the copyright overlay. */
.cc-carousel .cc-slide__media {
	position: relative;
	line-height: 0;
	border-radius: inherit;
}

/* Copyright overlay. Placement (top/bottom + left/right) and the CSS
   variables below are set per-instance via inline CSS. */
.cc-carousel .cc-slide__copyright {
	position: absolute;
	z-index: 2;
	max-width: 90%;
	padding: 3px 8px;
	font-size: var(--cc-copyright-size, 12px);
	line-height: 1.3;
	color: var(--cc-copyright-color, #fff);
	background: var(--cc-copyright-bg, rgba(0, 0, 0, 0.5));
	border-radius: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

.cc-carousel .cc-slide__content {
	padding: 16px 4px 4px;
	text-align: var(--cc-text-align, left);
}

.cc-carousel .cc-slide__title {
	margin: 0 0 6px;
	font-size: calc(var(--cc-font-size, 16px) * 1.5);
	font-weight: var(--cc-font-weight, 600);
	line-height: 1.2;
	color: var(--cc-text, #1a1a1a);
}

.cc-carousel .cc-slide__subtitle {
	margin: 0 0 8px;
	font-size: calc(var(--cc-font-size, 16px) * 1.05);
	opacity: 0.8;
}

.cc-carousel .cc-slide__desc {
	font-size: var(--cc-font-size, 16px);
	font-weight: var(--cc-font-weight, 400);
	line-height: 1.5;
}

.cc-carousel .cc-slide__desc p {
	margin: 0 0 0.75em;
}

.cc-carousel .cc-slide__btn {
	display: inline-block;
	margin-top: 14px;
	font-size: var(--cc-font-size, 16px);
	font-weight: 600;
	text-decoration: none;
	color: #fff;
	background: var(--cc-btn, #2563eb);
	transition: background-color 0.2s ease;
}

.cc-carousel .cc-slide__btn:hover,
.cc-carousel .cc-slide__btn:focus {
	background: var(--cc-btn-hover, #1d4ed8);
	color: #fff;
}

/* Navigation arrows. */
.cc-carousel .swiper-button-prev,
.cc-carousel .swiper-button-next {
	color: var(--cc-arrows, #1a1a1a);
}

/* Pagination. */
.cc-carousel .swiper-pagination-bullet-active {
	background: var(--cc-pagination, #2563eb);
}

.cc-carousel .swiper-pagination.swiper-pagination-fraction {
	color: var(--cc-pagination, #2563eb);
	font-weight: 600;
}

/* Focus visibility for accessibility. */
.cc-carousel a:focus-visible,
.cc-carousel .swiper-button-prev:focus-visible,
.cc-carousel .swiper-button-next:focus-visible,
.cc-carousel .swiper-pagination-bullet:focus-visible {
	outline: 2px solid var(--cc-btn, #2563eb);
	outline-offset: 2px;
}

/* Admin-side notice for editors. */
.cc-notice {
	padding: 12px 16px;
	border: 1px dashed #c00;
	border-radius: 6px;
	background: #fff5f5;
	color: #900;
	font-size: 14px;
}