/**
 * Torn Paper Event Carousel — front-end styles.
 *
 * Most visual values are driven by Elementor Style-tab controls (injected as
 * inline <style> per widget). The rules here provide the structural layout and
 * the sensible spec defaults so the widget looks right before any customization.
 *
 * CSS custom properties set elsewhere:
 *   --tpc-card-w / --tpc-card-h  (Content > Layout : card width/height)
 *   --tpc-stagger                (Content > Layout : zig-zag raise offset)
 *   --tpc-torn                   (inline on .tpc-swiper : torn PNG url)
 */

/* Wrapper gives breathing room for the raised center card + overflowing caption. */
.tpc-wrapper {
	width: 100%;
}

.tpc-swiper {
	--tpc-card-w: 360px;
	--tpc-card-h: 450px;
	--tpc-stagger: 40px;
	width: 100%;
}

/*
 * IMPORTANT — specificity:
 * Our element carries BOTH classes (tpc-swiper swiper). Elementor's bundled Swiper
 * stylesheet declares `.swiper { padding: 0; overflow: hidden }`. That has the SAME
 * specificity as a bare `.tpc-swiper` rule, so whichever stylesheet loads last wins
 * — and on the live site Elementor's `.swiper` loads AFTER ours, zeroing our padding
 * and clipping the raised cards at the top. We use the two-class selector
 * `.tpc-swiper.swiper` (higher specificity) so these always win regardless of load
 * order.
 *
 * Generous vertical padding gives the raised cards and the overflowing caption room
 * to breathe. overflow:hidden is kept (so peeking side slides are clipped
 * horizontally and never cause page-wide horizontal scroll). The top padding SCALES
 * with the zig-zag offset (--tpc-stagger) + 40px headroom, so a raised card is never
 * clipped at the top no matter how high the offset is set.
 */
.tpc-swiper.swiper {
	padding: calc(var(--tpc-stagger, 40px) + 40px) 10px 90px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Slide + Card                                                        */
/* ------------------------------------------------------------------ */

.tpc-slide {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	height: auto;
	box-sizing: border-box;
	/* Base transition for the smooth raise on slide change. */
	transition: transform 0.45s ease;
}

.tpc-card {
	position: relative;
	width: var(--tpc-card-w);
	max-width: 100%;
	height: var(--tpc-card-h);
	box-sizing: border-box;
	background: #ffffff;
	/* Default box-shadow per spec (also controllable in Style tab). */
	box-shadow: 0 5px 10px 1px rgba(0, 0, 0, 0.10);
	/* Reserved transparent border so hover/active border causes no layout shift.
	   (Style tab "Active/Hover Border" overrides width/color/style.) */
	border: 2px solid transparent;
	/* Caption overflows the bottom, so keep overflow visible. */
	overflow: visible;
	transition: transform 0.45s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* The event image fills the whole card. */
.tpc-card__image {
	position: absolute;
	inset: 0;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #e9e9e9; /* graceful placeholder tint if no image */
	overflow: hidden;
}

/* Optional image overlay tint (Style tab). */
.tpc-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0);
	pointer-events: none;
}

/* ------------------------------------------------------------------ */
/* Caption + torn paper edge                                          */
/* ------------------------------------------------------------------ */

/*
 * The torn paper IS the caption background.
 *
 * The PNG (set via the "Torn Paper Image" control -> --tpc-torn) is a ragged
 * torn TOP edge with a solid white paper body below. We use it as the full
 * background of the caption block, so the title/subtitle sit directly on the
 * white paper and the ragged edge shows the photo through its transparent
 * notches — exactly like the design. There is NO separate white box.
 *
 * Note: the "Caption Box -> Background" Style control defaults to transparent so
 * it does not fill the ragged notches; users can still add a tint there.
 */
.tpc-card__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -24px; /* overflow past the card bottom (Style tab: torn_overlap) */
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	/* Extra top padding keeps the text clear of the ragged edge, on the white body. */
	padding: 64px 40px 16px 40px;
	background-color: transparent;
	background-image: var(--tpc-torn);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 100%; /* stretch the torn paper across the caption */
	text-align: center;
	box-sizing: border-box;
}

.tpc-card__title {
	margin: 0;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 30.8px;
	color: #000000;
}

.tpc-card__subtitle {
	margin: 0;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 0;
	color: #dba63c; /* gold */
}

/* ------------------------------------------------------------------ */
/* Center-raised zig-zag                                              */
/* ------------------------------------------------------------------ */

/* When the zig-zag is on, the cards to the left/right of the active (center)
   card are lifted (marked .tpc-slide-raised in JS), while the active card itself
   stays on the baseline — so the centered card sits low and its neighbours pop up. */
.tpc-has-stagger .swiper-slide {
	transition: transform 0.45s ease;
}

.tpc-has-stagger .swiper-slide.tpc-slide-raised .tpc-card {
	transform: translateY(calc(-1 * var(--tpc-stagger)));
	transform-origin: bottom center;
}

/* ------------------------------------------------------------------ */
/* Pagination dots                                                    */
/* ------------------------------------------------------------------ */

.tpc-swiper .swiper-pagination {
	position: static;
	margin-top: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.tpc-swiper .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	margin: 0 6px;
	background: #d9d9d9;
	opacity: 1;
	transition: background 0.2s ease;
}

.tpc-swiper .swiper-pagination-bullet-active {
	background: #dba63c; /* gold */
}

/* ------------------------------------------------------------------ */
/* Navigation arrows                                                  */
/* ------------------------------------------------------------------ */

.tpc-swiper .swiper-button-prev,
.tpc-swiper .swiper-button-next {
	color: #000000;
}

.tpc-swiper .swiper-button-prev::after,
.tpc-swiper .swiper-button-next::after {
	font-size: 28px;
}

/* ------------------------------------------------------------------ */
/* Editor notices                                                     */
/* ------------------------------------------------------------------ */

.tpc-notice {
	padding: 16px 20px;
	border: 1px dashed #c3c4c7;
	background: #f6f7f7;
	color: #50575e;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	border-radius: 4px;
}

/* ------------------------------------------------------------------ */
/* Small screens                                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	/* Two-class selector so it wins over Elementor's `.swiper { padding: 0 }`. */
	.tpc-swiper.swiper {
		padding: 40px 6px 70px;
	}

	.tpc-card__caption {
		padding-left: 28px;
		padding-right: 28px;
	}

	/* Flatten the zig-zag on phones — single-column view sits even. */
	.tpc-has-stagger .swiper-slide.tpc-slide-raised .tpc-card {
		transform: none;
	}
}