/* ==========================================================================
   TC Custom Widgets – Gallery Slider
   gallery-slider.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Custom Properties
   Default values – all overridable via Elementor style controls on .tc-gs
   -------------------------------------------------------------------------- */
.tc-gs {
	--tc-gs-slide-w:   450px;
	--tc-gs-slide-h:   440px;
	--tc-gs-slide-gap: 20px;
	--tc-gs-tilt-deg:  3deg;
}

/* --------------------------------------------------------------------------
   2. Outer section
   -------------------------------------------------------------------------- */
.tc-gs {
	position: relative;
	width: 100%;
	overflow: hidden; /* clips the half-visible edge slides */

	/* Pushes the overflow boundary out to create headroom and footroom for the animations */
	padding-top: 30px;
	padding-bottom: 30px;

	/* Counteracts the padding footprint so surrounding page layout remains unaffected */
	margin-top: -30px;
	margin-bottom: -30px;
}
/* --------------------------------------------------------------------------
   3. Swiper overrides
   -------------------------------------------------------------------------- */
.tc-gs__swiper {
	width: 100%;
	overflow: visible !important; /* allow edge bleed */
}

.tc-gs .swiper-wrapper {
	align-items: center;
	transition-timing-function: linear !important; /* Forces seamless linear continuous movement */
}

/* --------------------------------------------------------------------------
   4. Slide
   -------------------------------------------------------------------------- */
.tc-gs__slide {
	width: var(--tc-gs-slide-w);
	flex-shrink: 0;
	cursor: pointer;
	transform-origin: center bottom;

	/* Refined, tight resting shadow */
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.04));

	transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
	            opacity 150ms ease,
	            filter 150ms ease;

	user-select: none;
	-webkit-user-select: none;
}

/* EVEN SLIDES: Hover / Focus
   Tilts right -> Tighter shadow shifts elegantly down and to the LEFT (-5px)
   FIX (Change 2): focus now lands on the .tc-gs__link anchor inside the
   slide (that's the actual clickable/focusable element now — see
   gallery-slider.php), not the slide wrapper itself, so this keys off
   :focus-within rather than :focus-visible on .tc-gs__slide directly. */
.tc-gs__slide:hover,
.tc-gs__slide:focus-within {
	transform: rotate(var(--tc-gs-tilt-deg)) scale(1.03);
	filter: drop-shadow(-5px 10px 12px rgba(0, 0, 0, 0.08));
	outline: none;
}

/* ODD SLIDES: Hover / Focus
   Tilts left -> Tighter shadow shifts elegantly down and to the RIGHT (5px) */
.tc-gs__slide:nth-child(odd):hover,
.tc-gs__slide:nth-child(odd):focus-within {
	transform: rotate(calc(var(--tc-gs-tilt-deg) * -1)) scale(1.03);
	filter: drop-shadow(5px 10px 12px rgba(0, 0, 0, 0.08));
}

/* SIBLING DIM EFFECT
   FIX (Finding 4): previously driven by :has(), which forces the browser to
   re-evaluate every sibling on every hover-state change. .is-hovering /
   .is-hovered are now toggled directly in JS (see gallery-slider.js), so
   this is a plain class selector — no relational re-evaluation cost. */
.tc-gs__swiper.is-hovering .tc-gs__slide:not(.is-hovered) {
	opacity: 0.55;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.02)) grayscale(40%) saturate(0.6);
}

/* --------------------------------------------------------------------------
   5. Mask wrapper + image
   -------------------------------------------------------------------------- */
.tc-gs__mask-wrap {
	width: var(--tc-gs-slide-w);
	height: var(--tc-gs-slide-h);
	overflow: hidden; /* Left intact as a fallback for the 'None (square)' layout mode */
	display: block;
	position: relative;
	/* Skeleton tile base colour, visible until the real image loads in.
	   Deliberately a neutral, mostly-transparent light grey — the
	   traditional loading-placeholder look — rather than a brand colour,
	   since this widget can sit on all kinds of section backgrounds
	   across the site and a fixed colour (e.g. the Mallard green tried
	   earlier) only looks right on some of them. The transparency lets
	   whatever's actually behind the tile show through softly instead.
	   Flat fill only — no moving gradient — the loading feel below comes
	   from the opacity/clip-path animation, not a shifting background. */
	background-color: rgba(0, 0, 0, 0.06);
}

/* FIX: Removes the rectangular bounding box layer constraint when an SVG mask is active.
   This forces drop-shadow to outline the organic shape of your SVG instead of a box. */
.tc-gs__mask-wrap.mask {
	overflow: visible;
}

/* FIX (Change 2): the image now sits inside a real <a> (the lightbox
   trigger — see gallery-slider.php) rather than being the direct click
   target itself, so the anchor needs to fill the mask-wrap the same way
   the slide div used to. */
.tc-gs__link {
	display: block;
	width: 100%;
	height: 100%;
}

.tc-gs__link:focus-visible {
	/* Focus styling is drawn one level up via .tc-gs__slide:focus-within
	   (the tilt/shadow treatment below) — suppress the browser's own ring
	   on the anchor itself so it isn't drawn twice. */
	outline: none;
}

.tc-gs__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
	transition: transform 500ms ease, opacity 200ms ease;
}

/* Swiper Lazy module toggles this class off once data-src has loaded into
   src — fade the image in rather than have it pop in abruptly. */
.tc-gs__image.swiper-lazy {
	opacity: 0;
}

.tc-gs__image.swiper-lazy-loaded {
	opacity: 1;
}

.tc-gs__slide:hover .tc-gs__image {
	transform: scale(1.05);
}

/* FIX: skeleton-tile animation, replacing Swiper's default spinner
   preloader. Runs directly on the tile itself (no separate overlay
   element) — simplified down to a single flat placeholder shape that
   just pulses opacity, dimming and lightening on the flat placeholder
   colour. No separate clip-path/shape animation layered on top of it.
   Stops the instant the real image has loaded (:not(:has(...)) below) —
   harmless either way since the tile sits fully behind the now-opaque
   photo once loaded, but stopping it is one less thing for the browser
   to keep painting. Reading the <img>'s load state via :has() is fine
   here — unlike Finding 4's hover-driven :has() (which re-evaluated on
   every mousemove across the gallery), this one only re-evaluates on
   the rare, one-off transition to swiper-lazy-loaded. */
.tc-gs__mask-wrap:not(:has(.tc-gs__image.swiper-lazy-loaded)) {
	animation: tc-gs-tile-loading 1.1s ease-in-out infinite;
}

@keyframes tc-gs-tile-loading {
	0%, 100% { opacity: 0.4; }
	50%      { opacity: 1;   }
}


/* --------------------------------------------------------------------------
   6. Mask system (BEM)
   -------------------------------------------------------------------------- */
.mask {
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-position: center;
	mask-position: center;
}

.mask--rounded {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 440'%3E%3Crect x='0' y='0' width='450' height='440' rx='40' ry='40'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 440'%3E%3Crect x='0' y='0' width='450' height='440' rx='40' ry='40'/%3E%3C/svg%3E");
}

.mask--squircle {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 440'%3E%3Cpath d='M225 0 C350 0 450 100 450 220 C450 340 350 440 225 440 C100 440 0 340 0 220 C0 100 100 0 225 0Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 440'%3E%3Cpath d='M225 0 C350 0 450 100 450 220 C450 340 350 440 225 440 C100 440 0 340 0 220 C0 100 100 0 225 0Z'/%3E%3C/svg%3E");
}

.mask--blob {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 440'%3E%3Cpath d='M60 80 C120 20 320 0 390 80 C460 160 440 320 380 390 C320 460 120 460 60 380 C0 300 0 140 60 80Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 450 440'%3E%3Cpath d='M60 80 C120 20 320 0 390 80 C460 160 440 320 380 390 C320 460 120 460 60 380 C0 300 0 140 60 80Z'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   7. Responsive – slide dimensions only (slidesPerView is in JS)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.tc-gs {
		--tc-gs-slide-w: 340px;
		--tc-gs-slide-h: 332px;
	}
}

@media (max-width: 767px) {
	.tc-gs {
		--tc-gs-slide-w: 260px;
		--tc-gs-slide-h: 254px;
	}
}

/* --------------------------------------------------------------------------
   8. Lightbox
   FIX (Change 2): the bespoke .tc-gs__lightbox modal that used to live here
   has been removed entirely. Lightbox duty now belongs to Elementor's own
   native lightbox (the same one gallery-showcase relies on — see that
   widget's CSS, which likewise has no lightbox rules of its own) —
   triggered via data-elementor-open-lightbox in gallery-slider.php and
   styled by Elementor core rather than this stylesheet.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   9. Editor notice
   -------------------------------------------------------------------------- */
.tc-gs__notice {
	padding: 12px 16px;
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	font-size: 0.875rem;
	color: #665000;
}