/* ==========================================================================
   city-slideshow.css — Animated City Slideshow + Grid Mode
   Part of the Romain Recovery theme stylesheet.
   ========================================================================== */

/* ==========================================================================
   20. City Slideshow
   ========================================================================== */

/* Container */
.city-slideshow {
	position: relative;
	width: 100%;
	height: 280px;
	border-radius: var(--radius-card);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.2);
	cursor: zoom-in;
}

/* Each slide is stacked, hidden by default */
.city-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	z-index: 0;
}

.city-slide img {
	width: 100%;
	height: 234px; /* 280px total − 46px caption */
	object-fit: cover;
	display: block;
}

.city-slide-caption {
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.88);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	padding: 0 12px;
	gap: 6px;
}

/* Progress bar via ::after — fills while the slide is active */
.city-slide::after {
	content: '';
	position: absolute;
	bottom: 46px; /* sits just above the caption */
	left: 0;
	height: 3px;
	width: 0%;
	background: var(--wp--preset--color--accent);
	z-index: 5;
}

/* ── Slide visibility animations ────────────────────────────────────────── */
/* 5 slides × 4 s each = 20 s total cycle                                   */

.city-slide:nth-child(1)        { animation: cs-slide-1 20s linear infinite; }
.city-slide:nth-child(2)        { animation: cs-slide-2 20s linear infinite; }
.city-slide:nth-child(3)        { animation: cs-slide-3 20s linear infinite; }
.city-slide:nth-child(4)        { animation: cs-slide-4 20s linear infinite; }
.city-slide:nth-child(5)        { animation: cs-slide-5 20s linear infinite; }

.city-slide:nth-child(1)::after { animation: cs-prog-1 20s linear infinite; }
.city-slide:nth-child(2)::after { animation: cs-prog-2 20s linear infinite; }
.city-slide:nth-child(3)::after { animation: cs-prog-3 20s linear infinite; }
.city-slide:nth-child(4)::after { animation: cs-prog-4 20s linear infinite; }
.city-slide:nth-child(5)::after { animation: cs-prog-5 20s linear infinite; }

/* Slide 1: visible 0 % – 20 % (0 s – 4 s) */
@keyframes cs-slide-1 {
	0%,  19.9% { opacity: 1; z-index: 2; }
	20%, 100%  { opacity: 0; z-index: 0; }
}
/* Slide 2: visible 20 % – 40 % */
@keyframes cs-slide-2 {
	0%,  19.9% { opacity: 0; z-index: 0; }
	20%, 39.9% { opacity: 1; z-index: 2; }
	40%, 100%  { opacity: 0; z-index: 0; }
}
/* Slide 3: visible 40 % – 60 % */
@keyframes cs-slide-3 {
	0%,  39.9% { opacity: 0; z-index: 0; }
	40%, 59.9% { opacity: 1; z-index: 2; }
	60%, 100%  { opacity: 0; z-index: 0; }
}
/* Slide 4: visible 60 % – 80 % */
@keyframes cs-slide-4 {
	0%,  59.9% { opacity: 0; z-index: 0; }
	60%, 79.9% { opacity: 1; z-index: 2; }
	80%, 100%  { opacity: 0; z-index: 0; }
}
/* Slide 5: visible 80 % – 100 % */
@keyframes cs-slide-5 {
	0%,  79.9% { opacity: 0; z-index: 0; }
	80%, 100%  { opacity: 1; z-index: 2; }
}

/* ── Progress bar fill animations ───────────────────────────────────────── */

@keyframes cs-prog-1 {
	0%        { width: 0%; }
	19.9%     { width: 100%; }
	20%, 100% { width: 0%; }
}
@keyframes cs-prog-2 {
	0%, 20%   { width: 0%; }
	39.9%     { width: 100%; }
	40%, 100% { width: 0%; }
}
@keyframes cs-prog-3 {
	0%, 40%   { width: 0%; }
	59.9%     { width: 100%; }
	60%, 100% { width: 0%; }
}
@keyframes cs-prog-4 {
	0%, 60%   { width: 0%; }
	79.9%     { width: 100%; }
	80%, 100% { width: 0%; }
}
@keyframes cs-prog-5 {
	0%, 80% { width: 0%; }
	100%    { width: 100%; }
}

/* Accessibility: freeze animation, always show first slide */
@media (prefers-reduced-motion: reduce) {
	.city-slide,
	.city-slide::after {
		animation: none !important;
	}
	.city-slide:nth-child(1) {
		opacity: 1;
		z-index: 2;
	}
}

/* ── Grid reveal on hover ─────────────────────────────────────────────── */

.city-slideshow.is-grid {
	height: auto !important;
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	overflow: visible;
	cursor: zoom-out;
}

.city-slideshow.is-grid .city-slide {
	position: relative !important;
	inset: unset !important;
	opacity: 0;
	animation: cs-grid-card 0.35s ease forwards !important;
	border-radius: var(--radius-sm);
	overflow: hidden;
	z-index: 1 !important;
	box-shadow: 0 4px 16px var(--border-hero);
}

.city-slideshow.is-grid .city-slide:nth-child(1) { animation-delay: 0s !important; }
.city-slideshow.is-grid .city-slide:nth-child(2) { animation-delay: 0.07s !important; }
.city-slideshow.is-grid .city-slide:nth-child(3) { animation-delay: 0.14s !important; }
.city-slideshow.is-grid .city-slide:nth-child(4) { animation-delay: 0.21s !important; }
.city-slideshow.is-grid .city-slide:nth-child(5) { animation-delay: 0.28s !important; }

@keyframes cs-grid-card {
	from { opacity: 0; transform: scale(0.88) translateY(10px); }
	to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.city-slideshow.is-grid .city-slide img {
	height: 120px !important;
}

.city-slideshow.is-grid .city-slide-caption {
	height: 40px;
	font-size: 0.8rem;
}

.city-slideshow.is-grid .city-slide::after {
	display: none !important;
}