/**
 * PID Image Carousel - Frontend Styles
 *
 * Performance-first CSS with opacity transitions (no layout shifts),
 * lazy-loading support, and accessibility features.
 *
 * CSS Custom Properties (set per-instance via inline styles):
 *   --pid-imgc-height:    Container height (default: 400px)
 *   --pid-imgc-interval:  Slide interval/animation duration
 *   --pid-imgc-radius:    Border radius (default: 8px)
 *
 * Breakpoints (Kadence theme):
 *   Tablet: 1024px
 *   Mobile: 767px
 *
 * @package PID_Image_Carousel
 * @version 1.1.0
 */

/* ==========================================================================
   Reset and Container
   ========================================================================== */

.pid-imgc-carousel {
	--pid-imgc-height: 400px;
	--pid-imgc-interval: 5s;
	--pid-imgc-radius: 8px;

	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;

	/* Ensure carousel respects parent width in flexbox/grid context. */
	box-sizing: border-box;
}

/* ==========================================================================
   Slides Container
   ========================================================================== */

.pid-imgc-slides {
	position: relative;
	width: 100%;
	height: var(--pid-imgc-height);
	overflow: hidden;
	border-radius: var(--pid-imgc-radius);

	/* Fixed height prevents CLS during lazy-load. */
	background-color: #f0f0f0;

	/* Compositing: opacity transitions don't trigger layout. */
	will-change: auto;
}

/* ==========================================================================
   Individual Slides
   ========================================================================== */

.pid-imgc-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
	z-index: 1;
}

.pid-imgc-slide--active {
	opacity: 1;
	z-index: 2;
}

/*
 * NO-JS FALLBACK: Show first slide before JavaScript initialises.
 *
 * Once JS runs, it adds .is-initialized to the carousel container
 * and applies .pid-imgc-slide--active to the current slide, so this
 * rule is safely overridden.
 */
.pid-imgc-carousel:not(.is-initialized) .pid-imgc-slide:first-child {
	opacity: 1;
}

/* ==========================================================================
   Images
   ========================================================================== */

.pid-imgc-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	box-shadow: none;

	/* Prevent theme interference. */
	background-color: transparent;
}

/* ==========================================================================
   Dot Indicators (Keyboard Navigation)
   ========================================================================== */

.pid-imgc-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 10;
	display: flex;
	gap: 14px; /* WCAG 2.5.5: 10px dot + 14px gap = 24px centre-to-centre */
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 20px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.pid-imgc-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease;
	font-size: 0;
	line-height: 0;

	/* Ensure keyboard focus is visible. */
	outline: none;
	position: relative;
}

/* Expand tap target to 24x24px minimum without changing visual dot size.
   Satisfies WCAG 2.5.5 and Lighthouse touch target requirements. */
.pid-imgc-dot::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 24px;
	height: 24px;
}

.pid-imgc-dot:hover,
.pid-imgc-dot:focus {
	background-color: rgba(255, 255, 255, 0.9);
	transform: scale(1.2);
	outline: 2px solid rgba(255, 255, 255, 0.9);
	outline-offset: 2px;
}

.pid-imgc-dot--active {
	background-color: #ffffff;
	transform: scale(1.3);
}

/* ==========================================================================
   Pause/Play Control Button
   ========================================================================== */

.pid-imgc-control {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: none;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.4);
	cursor: pointer;
	transition: background-color 0.3s ease;
	font-size: 0;
	line-height: 0;
	color: white;

	/* SVG icon via ::before. */
	display: flex;
	align-items: center;
	justify-content: center;
	outline: none;
}

.pid-imgc-control:hover,
.pid-imgc-control:focus {
	background-color: rgba(0, 0, 0, 0.6);
	outline: 2px solid rgba(255, 255, 255, 0.8);
	outline-offset: 2px;
}

/* Pause icon (default state). */
.pid-imgc-control::before {
	content: '';
	width: 12px;
	height: 16px;
	background: linear-gradient(
		to right,
		white 0%,
		white 35%,
		transparent 35%,
		transparent 65%,
		white 65%,
		white 100%
	);
}

/* Play icon (when paused). */
.pid-imgc-control.is-paused::before {
	content: '';
	width: 0;
	height: 0;
	border-left: 10px solid white;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	background: none;
	margin-left: 2px;
}

/* ==========================================================================
   Admin Notice
   ========================================================================== */

.pid-imgc-notice {
	padding: 12px 16px;
	background-color: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	color: #856404;
	font-size: 14px;
	font-weight: 500;
}

/* ==========================================================================
   Reduced Motion Support
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.pid-imgc-slide {
		transition: none;
	}

	.pid-imgc-dot,
	.pid-imgc-control {
		transition: none;
	}

	/* Show only first slide, disable transitions. */
	.pid-imgc-slide {
		opacity: 0;
		display: none;
	}

	.pid-imgc-slide:first-child {
		opacity: 1;
		display: block;
	}

	/* Hide interactive controls. */
	.pid-imgc-dots,
	.pid-imgc-control {
		display: none !important;
	}
}

/* ==========================================================================
   Tablet (Kadence: 1024px and below)
   ========================================================================== */

@media (max-width: 1024px) {
	.pid-imgc-slides {
		/* Maintain aspect ratio on tablet. */
		height: var(--pid-imgc-height);
	}

	.pid-imgc-dots {
		bottom: 12px;
		gap: 16px; /* WCAG 2.5.5: 8px dot + 16px gap = 24px centre-to-centre */
		padding: 6px 10px;
	}

	.pid-imgc-dot {
		width: 8px;
		height: 8px;
	}

	.pid-imgc-control {
		width: 36px;
		height: 36px;
		top: 10px;
		right: 10px;
	}
}

/* ==========================================================================
   Mobile (Kadence: 767px and below)
   ========================================================================== */

@media (max-width: 767px) {
	.pid-imgc-carousel {
		/* On mobile, ensure carousel remains full responsive. */
		width: 100%;
	}

	.pid-imgc-slides {
		/* Slightly reduced height for mobile. */
		height: var(--pid-imgc-height);
	}

	/* Smaller, less intrusive dots on mobile. */
	.pid-imgc-dots {
		bottom: 10px;
		gap: 17px; /* WCAG 2.5.5: 7px dot + 17px gap = 24px centre-to-centre */
		padding: 5px 8px;
		background: rgba(0, 0, 0, 0.25);
	}

	.pid-imgc-dot {
		width: 7px;
		height: 7px;
	}

	.pid-imgc-dot:hover,
	.pid-imgc-dot:focus {
		transform: scale(1.15);
	}

	.pid-imgc-dot--active {
		transform: scale(1.25);
	}

	.pid-imgc-control {
		width: 32px;
		height: 32px;
		top: 8px;
		right: 8px;
	}

	.pid-imgc-control::before {
		width: 10px;
		height: 14px;
	}

	.pid-imgc-control.is-paused::before {
		border-left-width: 8px;
		border-top-width: 5px;
		border-bottom-width: 5px;
	}
}

/* ==========================================================================
   Loading and Placeholder States
   ========================================================================== */

.pid-imgc-slide[aria-busy="true"] {
	background: linear-gradient(
		90deg,
		#f0f0f0 0%,
		#e0e0e0 50%,
		#f0f0f0 100%
	);
	background-size: 200% 100%;
	animation: pid-imgc-loading 1.5s ease-in-out infinite;
}

@keyframes pid-imgc-loading {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

/* ==========================================================================
   Dark Mode Support (Optional)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.pid-imgc-slides {
		background-color: #1a1a1a;
	}

	.pid-imgc-dots {
		background: rgba(255, 255, 255, 0.1);
	}

	.pid-imgc-dot {
		background-color: rgba(255, 255, 255, 0.4);
	}

	.pid-imgc-dot:hover,
	.pid-imgc-dot:focus {
		background-color: rgba(255, 255, 255, 0.8);
	}

	.pid-imgc-dot--active {
		background-color: #ffffff;
	}

	.pid-imgc-control {
		background-color: rgba(255, 255, 255, 0.2);
	}

	.pid-imgc-control:hover,
	.pid-imgc-control:focus {
		background-color: rgba(255, 255, 255, 0.4);
	}
}

/* ==========================================================================
   WordPress Group Block Integration
   ========================================================================== */

/* Ensure carousel width works inside nested Group blocks. */
.wp-block-group .pid-imgc-carousel,
.wp-block-group__inner-container .pid-imgc-carousel {
	width: 100%;
	max-width: 100%;
}

/* Handle 50/50 flex layout with proper width distribution. */
.wp-block-group[class*="hero"] .pid-imgc-carousel {
	width: 100%;
	height: auto;
}

/*
 * FIX: Scoped overflow rule.
 *
 * Previously this targeted ALL .wp-block-group__inner-container elements
 * site-wide, which could clip content in unrelated sections.
 * Now scoped to only containers that actually hold a carousel.
 */
.pid-imgc-carousel .pid-imgc-slides {
	overflow: hidden;
}