/* PMCC Photo Carousel
 * Self-contained styles. Namespaced under .pmcc-carousel to avoid theme clashes.
 */

.pmcc-carousel {
	--pmcc-height: 480px;
	--pmcc-radius: 16px;
	--pmcc-accent: #ffffff;
	--pmcc-fade: 900ms;
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	border-radius: var(--pmcc-radius);
	background: #0c0f14;
	box-shadow: 0 24px 60px -22px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.25);
	-webkit-user-select: none;
	user-select: none;
}

/* Viewport clips the slides; the carousel itself can show an outer thumb strip. */
.pmcc-carousel .pmcc-viewport {
	position: relative;
	width: 100%;
	height: var(--pmcc-height);
	overflow: hidden;
	border-radius: var(--pmcc-radius);
}

.pmcc-carousel .pmcc-track {
	position: relative;
	width: 100%;
	height: 100%;
	outline: none;
}

/* ----- Slide base ----- */
.pmcc-carousel .pmcc-slide {
	position: absolute;
	inset: 0;
	margin: 0;
}

.pmcc-carousel .pmcc-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transform: scale(1.02);
}

/* ===== Transition: FADE (default) ===== */
.pmcc-trans-fade .pmcc-slide,
.pmcc-trans-zoom .pmcc-slide {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pmcc-fade) ease, visibility 0s linear var(--pmcc-fade);
	will-change: opacity;
}
.pmcc-trans-fade .pmcc-slide.is-active,
.pmcc-trans-zoom .pmcc-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 2;
	transition: opacity var(--pmcc-fade) ease, visibility 0s;
}

/* ===== Transition: ZOOM (fade + scale entrance) ===== */
.pmcc-trans-zoom .pmcc-slide img {
	transform: scale(1.14);
	transition: transform 1100ms cubic-bezier(.22,.61,.36,1);
}
.pmcc-trans-zoom .pmcc-slide.is-active img {
	transform: scale(1.02);
}

/* ===== Transition: SLIDE (horizontal track) ===== */
.pmcc-trans-slide .pmcc-track {
	display: flex;
	transition: transform 700ms cubic-bezier(.4,.0,.2,1);
	will-change: transform;
}
.pmcc-trans-slide .pmcc-slide {
	position: relative;
	inset: auto;
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
}

/* ===== Ken Burns (gentle drift) — opt-in via .pmcc-has-kenburns ===== */
/* Skip Ken Burns in zoom mode so the two scale effects don't fight. */
.pmcc-has-kenburns.pmcc-trans-fade .pmcc-slide.is-active img,
.pmcc-has-kenburns.pmcc-trans-slide .pmcc-slide.is-active img {
	animation: pmcc-kenburns-a 9s ease-out forwards;
}
/* Alternate the drift direction by slide position for variety. */
.pmcc-has-kenburns .pmcc-slide:nth-child(2n).is-active img { animation-name: pmcc-kenburns-b; }
.pmcc-has-kenburns .pmcc-slide:nth-child(3n).is-active img { animation-name: pmcc-kenburns-c; }

@keyframes pmcc-kenburns-a {
	from { transform: scale(1.04) translate(0, 0); }
	to   { transform: scale(1.15) translate(-2%, -2%); }
}
@keyframes pmcc-kenburns-b {
	from { transform: scale(1.15) translate(2%, 1%); }
	to   { transform: scale(1.04) translate(0, 0); }
}
@keyframes pmcc-kenburns-c {
	from { transform: scale(1.06) translate(2%, -1%); }
	to   { transform: scale(1.16) translate(-1%, 2%); }
}

@media (prefers-reduced-motion: reduce) {
	.pmcc-carousel .pmcc-slide { transition: opacity 200ms linear; }
	.pmcc-carousel .pmcc-slide.is-active img,
	.pmcc-carousel .pmcc-slide img { animation: none !important; transform: scale(1.02) !important; }
	.pmcc-trans-slide .pmcc-track { transition: none; }
}

/* ===== Transition: TICKER (continuous scrolling strip) ===== */
/* Full-bleed: always span the entire screen width, breaking out of any
 * (boxed) container it is placed in. */
.pmcc-trans-ticker {
	--pmcc-gap: 5px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
	border-radius: 0;
	box-shadow: none;
	background: #000;
}
.pmcc-trans-ticker .pmcc-viewport {
	overflow: hidden;
	border-radius: 0;
	background: #000;
	box-sizing: border-box;
	border-top: var(--pmcc-gap) solid #000;
	border-bottom: var(--pmcc-gap) solid #000;
}
.pmcc-trans-ticker .pmcc-ticker-track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	height: 100%;
	gap: var(--pmcc-gap);
	will-change: transform;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-play-state: running;
}
.pmcc-trans-ticker .pmcc-ticker-track.pmcc-rev { animation-direction: reverse; }
.pmcc-trans-ticker .pmcc-ticker-item {
	flex: 0 0 auto;
	height: 100%;
	border-radius: 0;
	overflow: hidden;
}
.pmcc-trans-ticker .pmcc-ticker-item img {
	height: 100%;
	width: auto;
	display: block;
	object-fit: cover;
	transform: none;
}
/* Pause on hover so visitors can look. */
.pmcc-trans-ticker:hover .pmcc-ticker-track { animation-play-state: paused; }

@keyframes pmcc-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--pmcc-shift, 0px))); }
}

@media (prefers-reduced-motion: reduce) {
	.pmcc-trans-ticker .pmcc-ticker-track { animation: none !important; transform: none !important; }
	.pmcc-trans-ticker .pmcc-viewport { overflow-x: auto; }
}

/* Shorter ticker strip on mobile. Overrides the inline --pmcc-height var by
 * setting the viewport height directly. */
@media (max-width: 768px) {
	.pmcc-trans-ticker .pmcc-viewport { height: 200px; }
}

/* ===== Caption ===== */
.pmcc-carousel .pmcc-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	margin: 0;
	padding: 64px 28px 26px;
	color: #fff;
	font-size: clamp(1.05rem, 1.7vw, 1.5rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.3;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.65);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.32) 45%, transparent 100%);
	pointer-events: none;
}
.pmcc-carousel .pmcc-caption span {
	display: inline-block;
	position: relative;
	transform: translateY(14px);
	opacity: 0;
	transition: opacity 700ms ease 260ms, transform 700ms cubic-bezier(.22,.61,.36,1) 260ms;
}
.pmcc-carousel .pmcc-caption span::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 0;
	height: 3px;
	border-radius: 3px;
	background: var(--pmcc-accent);
	transition: width 600ms ease 600ms;
}
.pmcc-carousel .pmcc-slide.is-active .pmcc-caption span { opacity: 1; transform: translateY(0); }
.pmcc-carousel .pmcc-slide.is-active .pmcc-caption span::after { width: 48px; }

/* ===== Arrows ===== */
.pmcc-carousel .pmcc-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%) scale(.92);
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	cursor: pointer;
	color: #fff;
	background: rgba(20, 22, 28, 0.32);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transition: opacity 300ms ease, background 200ms ease, transform 220ms cubic-bezier(.22,.61,.36,1), border-color 200ms ease;
}
.pmcc-carousel .pmcc-arrow svg { width: 22px; height: 22px; display: block; }
.pmcc-carousel:hover .pmcc-arrow,
.pmcc-carousel:focus-within .pmcc-arrow { opacity: 1; transform: translateY(-50%) scale(1); }
.pmcc-carousel .pmcc-arrow:hover {
	background: rgba(255, 255, 255, 0.96);
	color: #14161c;
	border-color: transparent;
	transform: translateY(-50%) scale(1.08);
}
.pmcc-carousel .pmcc-arrow:focus-visible { opacity: 1; outline: 3px solid #4f9cff; outline-offset: 2px; }
.pmcc-carousel .pmcc-prev { left: 18px; }
.pmcc-carousel .pmcc-next { right: 18px; }
@media (hover: none) {
	.pmcc-carousel .pmcc-arrow { opacity: 1; transform: translateY(-50%) scale(1); }
}

/* ===== HUD (play/pause + counter), top-right glass pill ===== */
.pmcc-carousel .pmcc-hud {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px;
	border-radius: 999px;
	color: #fff;
	background: rgba(20, 22, 28, 0.38);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
.pmcc-carousel .pmcc-playpause {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.pmcc-carousel .pmcc-playpause svg { width: 16px; height: 16px; fill: currentColor; display: none; }
.pmcc-carousel .pmcc-playpause.is-playing .pmcc-icon-pause { display: block; }
.pmcc-carousel .pmcc-playpause:not(.is-playing) .pmcc-icon-play { display: block; }
.pmcc-carousel .pmcc-playpause:focus-visible { outline: 2px solid #4f9cff; outline-offset: 3px; border-radius: 4px; }
.pmcc-carousel .pmcc-counter {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	font-variant-numeric: tabular-nums;
	display: inline-flex;
	gap: 3px;
}
.pmcc-carousel .pmcc-counter .pmcc-sep { opacity: 0.55; }
.pmcc-carousel .pmcc-counter .pmcc-total { opacity: 0.7; }

/* ===== Progress bar (autoplay timing) ===== */
.pmcc-carousel .pmcc-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	height: 3px;
	background: rgba(255, 255, 255, 0.18);
	overflow: hidden;
}
.pmcc-carousel .pmcc-progress-bar {
	display: block;
	height: 100%;
	width: 100%;
	transform-origin: left center;
	transform: scaleX(0);
	background: var(--pmcc-accent);
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
.pmcc-carousel .pmcc-progress-bar.is-running {
	animation: pmcc-progress linear forwards;
	animation-duration: var(--pmcc-progress-duration, 5000ms);
}
@keyframes pmcc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
	.pmcc-carousel .pmcc-progress { display: none; }
}

/* ===== Dots ===== */
.pmcc-carousel .pmcc-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	z-index: 4;
	display: flex;
	gap: 9px;
	justify-content: center;
	align-items: center;
}
.pmcc-carousel .pmcc-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
	transition: background 250ms ease, transform 250ms ease, width 250ms ease;
}
.pmcc-carousel .pmcc-dot:hover { background: rgba(255, 255, 255, 0.85); }
.pmcc-carousel .pmcc-dot.is-active { background: #fff; width: 28px; border-radius: 6px; }
.pmcc-carousel .pmcc-dot:focus-visible { outline: 3px solid #4f9cff; outline-offset: 2px; }

/* When a thumbnail strip is shown, nudge dots up so they don't collide. */
.pmcc-carousel.pmcc-has-thumbs .pmcc-dots { display: none; }

/* ===== Thumbnail strip ===== */
.pmcc-carousel .pmcc-thumbs {
	display: flex;
	gap: 8px;
	padding: 12px;
	overflow-x: auto;
	scrollbar-width: thin;
	background: #0c0f14;
	border-bottom-left-radius: var(--pmcc-radius);
	border-bottom-right-radius: var(--pmcc-radius);
}
.pmcc-carousel .pmcc-thumb {
	flex: 0 0 auto;
	width: 92px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.5;
	position: relative;
	transition: opacity 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.pmcc-carousel .pmcc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pmcc-carousel .pmcc-thumb:hover { opacity: 0.85; transform: translateY(-2px); }
.pmcc-carousel .pmcc-thumb.is-active {
	opacity: 1;
	box-shadow: 0 0 0 3px var(--pmcc-accent);
}
.pmcc-carousel .pmcc-thumb:focus-visible { outline: 2px solid #4f9cff; outline-offset: 2px; }

/* ===== Responsive ===== */
@media (max-width: 1024px) { .pmcc-carousel { --pmcc-height: 60vw; } }
@media (max-width: 600px) {
	.pmcc-carousel { --pmcc-height: 64vw; --pmcc-radius: 12px; }
	.pmcc-carousel .pmcc-arrow { width: 40px; height: 40px; }
	.pmcc-carousel .pmcc-arrow svg { width: 18px; height: 18px; }
	.pmcc-carousel .pmcc-prev { left: 10px; }
	.pmcc-carousel .pmcc-next { right: 10px; }
	.pmcc-carousel .pmcc-thumb { width: 70px; height: 46px; }
}