/*
 * Avant template — slideshow.css
 * Phase 5a (2026-05-24): replaced legacy slideshow engine CSS with Swiper-targeted styles.
 * Wraps Swiper 11 markup (.swiper / .swiper-wrapper / .swiper-slide) inside .ph-swiper-slideshow.
 * Height + min-height are set inline in index.php from template params (cam_height, cam_minHeight).
 */

/* ---------- Container ---------- */

.ph-swiper-slideshow {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.ph-swiper-slideshow .swiper-wrapper {
	height: 100%;
}

/* ---------- Slide (background image + optional overlay) ---------- */

.ph-swiper-slideshow .ph-slide {
	position: relative;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	box-sizing: border-box;
}

/* Overlay darkness — applied as ::before so caption text sits above it */
.ph-swiper-slideshow .ph-slide.overlay-darkness-light::before,
.ph-swiper-slideshow .ph-slide.overlay-darkness-medium::before,
.ph-swiper-slideshow .ph-slide.overlay-darkness-heavy::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	z-index: 1;
	pointer-events: none;
}

.ph-swiper-slideshow .ph-slide.overlay-darkness-light::before  { opacity: 0.25; }
.ph-swiper-slideshow .ph-slide.overlay-darkness-medium::before { opacity: 0.45; }
.ph-swiper-slideshow .ph-slide.overlay-darkness-heavy::before  { opacity: 0.65; }

/* ---------- Caption (title / content / cta) ---------- */

.ph-swiper-slideshow .ph-slide-caption {
	position: relative;
	z-index: 2;
	padding: 30px 40px;
	max-width: 60%;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.ph-swiper-slideshow .ph-slide-title {
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.15;
	margin-bottom: 0.5em;
}

.ph-swiper-slideshow .ph-slide-content {
	font-size: 1.1rem;
	line-height: 1.45;
	margin-bottom: 1em;
}

.ph-swiper-slideshow .ph-slide-content :last-child { margin-bottom: 0; }

.ph-swiper-slideshow .ph-slide-cta { margin-top: 1em; }

/* CTA button overrides — let Bootstrap btn-* styles drive the look,
   but force readable padding + drop the text-shadow inside button text. */
.ph-swiper-slideshow .ph-slide-cta .btn {
	padding: 10px 24px;
	font-weight: 600;
	text-shadow: none;
}

/* ---------- Caption positioning (9 grid positions) ---------- */
/* The .ph-slide itself is a flex container — we use align-items + justify-content
   to position the caption block, *and* mirror text-align inside the block. */

.ph-swiper-slideshow .ph-slide                        { align-items: center;     justify-content: flex-start; }

.ph-swiper-slideshow .ph-slide:has(.caption-top-left)      { align-items: flex-start; justify-content: flex-start; }
.ph-swiper-slideshow .ph-slide:has(.caption-top-center)    { align-items: flex-start; justify-content: center; }
.ph-swiper-slideshow .ph-slide:has(.caption-top-right)     { align-items: flex-start; justify-content: flex-end; }
.ph-swiper-slideshow .ph-slide:has(.caption-middle-left)   { align-items: center;     justify-content: flex-start; }
.ph-swiper-slideshow .ph-slide:has(.caption-middle-center) { align-items: center;     justify-content: center; }
.ph-swiper-slideshow .ph-slide:has(.caption-middle-right)  { align-items: center;     justify-content: flex-end; }
.ph-swiper-slideshow .ph-slide:has(.caption-bottom-left)   { align-items: flex-end;   justify-content: flex-start; }
.ph-swiper-slideshow .ph-slide:has(.caption-bottom-center) { align-items: flex-end;   justify-content: center; }
.ph-swiper-slideshow .ph-slide:has(.caption-bottom-right)  { align-items: flex-end;   justify-content: flex-end; }

.ph-swiper-slideshow .ph-slide-caption.caption-top-center,
.ph-swiper-slideshow .ph-slide-caption.caption-middle-center,
.ph-swiper-slideshow .ph-slide-caption.caption-bottom-center { text-align: center; }

.ph-swiper-slideshow .ph-slide-caption.caption-top-right,
.ph-swiper-slideshow .ph-slide-caption.caption-middle-right,
.ph-swiper-slideshow .ph-slide-caption.caption-bottom-right  { text-align: right; }

/* ---------- Swiper nav arrows + pagination dot recolor (match Avant) ---------- */

.ph-swiper-slideshow .swiper-button-prev,
.ph-swiper-slideshow .swiper-button-next {
	color: #fff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.ph-swiper-slideshow .swiper-button-prev:hover,
.ph-swiper-slideshow .swiper-button-next:hover { opacity: 1; }

.ph-swiper-slideshow .swiper-pagination-bullet {
	background: #fff;
	opacity: 0.55;
	width: 10px;
	height: 10px;
}

.ph-swiper-slideshow .swiper-pagination-bullet-active {
	opacity: 1;
}

/* ---------- Responsive shrink ---------- */

@media (max-width: 768px) {
	.ph-swiper-slideshow .ph-slide-caption {
		max-width: 90%;
		padding: 18px 22px;
	}
	.ph-swiper-slideshow .ph-slide-title   { font-size: 1.6rem; }
	.ph-swiper-slideshow .ph-slide-content { font-size: 0.95rem; }
}