/**
 * GTD Slider Responsive Fix
 *
 * Additive, override-only rules for Eventchamp's native homepage
 * slider (`.gt-eventchamp-slider` / Swiper). Loaded AFTER the parent
 * theme's compiled stylesheet, so equal-specificity selectors here
 * win by source order; `!important` is used only where we must beat
 * an inline `style="height:..."` attribute set by the WPBakery
 * element itself, or a fixed pixel value from the parent stylesheet.
 *
 * Goals: no cropped/overflowing content, no unreadable text, usable
 * buttons on touch devices, correct behaviour in portrait/landscape,
 * and a stable height on mobile browsers (address-bar aware, via the
 * --gtd-vh custom property set in slider-responsive.js).
 */

/*======
*
* Baseline Safety (all sizes)
*
======*/
.gt-eventchamp-slider {
	overflow: hidden;
	box-sizing: border-box;
}

.gt-eventchamp-slider,
.gt-eventchamp-slider * {
	box-sizing: border-box;
}

.gt-eventchamp-slider > .gt-swiper-slider,
.gt-eventchamp-slider > .gt-swiper-slider .swiper-wrapper,
.gt-eventchamp-slider > .gt-swiper-slider .swiper-slide {
	overflow: hidden;
}

.gt-eventchamp-slider > .gt-swiper-slider .gt-slide-inner {
	background-position: center center !important;
	background-repeat: no-repeat;
}

.gt-eventchamp-slider .gt-slider-content {
	width: 100%;
	max-width: min(1020px, 92vw);
	padding: 0 20px;
}

.gt-eventchamp-slider .gt-slider-content .gt-title .gt-primary,
.gt-eventchamp-slider .gt-slider-content .gt-title .gt-secondary {
	font-size: clamp(1.75rem, 5vw, 4.231rem);
	word-break: break-word;
}

.gt-eventchamp-slider .gt-slider-content .gt-subtitle {
	font-size: clamp(0.85rem, 2.2vw, 1.385rem);
}

.gt-eventchamp-slider .gt-slider-content .gt-text {
	font-size: clamp(0.85rem, 1.8vw, 1.154rem);
	max-width: 100%;
}

.gt-eventchamp-slider .gt-slider-content .gt-buttons a,
.gt-eventchamp-slider .gt-slider-content .gt-buttons a:visited {
	padding: 10px 24px;
	margin: 8px 10px;
	white-space: nowrap;
}

/* Reliable mobile-safe height: falls back to 100vh when JS has not
   run yet (e.g. very first paint), then is corrected by
   slider-responsive.js via the --gtd-vh custom property. */
.gt-eventchamp-slider {
	min-height: 340px;
}

@media (max-width: 991px) {
	.gt-eventchamp-slider {
		height: calc(var(--gtd-vh, 1vh) * 100) !important;
		min-height: 460px;
		max-height: 760px;
	}
}

@media (max-width: 767px) {
	.gt-eventchamp-slider {
		min-height: 420px;
		max-height: 680px;
	}

	.gt-eventchamp-slider .gt-slider-content .gt-title {
		margin: 16px 0;
	}

	.gt-eventchamp-slider .gt-slider-content .gt-buttons {
		margin: 24px 0 0;
	}

	.gt-eventchamp-slider .gt-slider-control.gt-style-1,
	.gt-eventchamp-slider .gt-slider-control.gt-style-2 {
		width: 40px;
		height: 40px;
		margin: 12px;
	}

	.gt-eventchamp-slider .gt-slider-control.gt-style-1 svg,
	.gt-eventchamp-slider .gt-slider-control.gt-style-2 svg {
		width: 18px;
	}

	.gt-eventchamp-slider .gt-slider-pagination.gt-style-1 {
		bottom: 20px;
	}
}

@media (max-width: 480px) {
	.gt-eventchamp-slider {
		min-height: 380px;
		max-height: 620px;
	}

	.gt-eventchamp-slider .gt-slider-content {
		padding: 0 14px;
	}

	.gt-eventchamp-slider .gt-slider-content .gt-buttons a,
	.gt-eventchamp-slider .gt-slider-content .gt-buttons a:visited {
		width: 100%;
		justify-content: center;
		margin: 6px 0;
	}

	.gt-eventchamp-slider .gt-slider-content .gt-buttons {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Short viewports (typical of phones in landscape orientation): keep
   the slide tall enough for its own content instead of clipping it,
   without exceeding the visible viewport height. */
@media (max-height: 480px) and (orientation: landscape) {
	.gt-eventchamp-slider {
		height: calc(var(--gtd-vh, 1vh) * 100) !important;
		min-height: 320px;
		max-height: 480px;
	}

	.gt-eventchamp-slider .gt-slider-content .gt-title {
		margin: 10px 0;
	}

	.gt-eventchamp-slider .gt-slider-content .gt-text {
		display: none;
	}

	.gt-eventchamp-slider .gt-slider-content .gt-buttons {
		margin: 14px 0 0;
	}

	.gt-eventchamp-slider .gt-slider-control.gt-style-1,
	.gt-eventchamp-slider .gt-slider-control.gt-style-2 {
		width: 34px;
		height: 34px;
		margin: 8px;
		opacity: 0.6;
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.gt-eventchamp-slider .gt-slider-content {
		max-width: 860px;
	}
}

/*======
*
* "Latest Events Slider" ([eventchamp_latest_events_slider], markup
* `.gt-events-slider`) — Render the Photo as a Real <img>, Not a
* CSS background-image
*
* The plugin paints this slider's photo as a bare
* `background-image` with no `background-size` at all (browser
* default is `background-size: auto`), which shows an inconsistent,
* unscaled crop depending on the photo's own dimensions vs. the
* slide's responsive height.
*
* `slider-responsive.js` finds that same photo URL and inserts it as
* a genuine `<img class="gtd-slide-image">` (see
* `gtdConvertEventsSliderImages()`), marking the slide with the
* `.gtd-slide-image-mode` class once done. The <img> itself is kept
* deliberately plain here — no `position: absolute`, no
* `object-fit` — it simply flows at `width: 100%` like a normal
* image, so it always displays at its own correct aspect ratio with
* no cropping/stretching tricks. `overflow: hidden` on
* `.gt-slide-inner` keeps a taller-than-the-slide photo from pushing
* the slide's own height around.
*
* Since the photo now takes up real (in-flow) space instead of being
* an invisible background, the slide's text/button content
* (`.container`, originally just laid out after the photo in normal
* flow) is pulled out of the flow with `position: absolute` and
* stretched to cover the whole slide, so it still overlays cleanly
* on top of the photo exactly like before. The `.gt-opacity` tint
* overlay sits between the two (`z-index: 2`, above the plain-flow
* photo, below the absolutely-positioned content).
*
======*/
.gt-events-slider .gt-slide-inner {
	position: relative;
	overflow: hidden;
}

.gt-events-slider .gt-slide-inner.gtd-slide-image-mode {
	background-image: none !important;
	background-color: #101010;
}

.gt-events-slider .gt-slide-inner .gtd-slide-image {
	display: block;
	width: 100%;
	height: auto;
}

.gt-events-slider .gt-slide-inner .gt-opacity {
	z-index: 2;
}

.gt-events-slider .gt-slide-inner > .container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}