/**
 * SLU Peek Carousel — frontend styles.
 *
 * Absorbed from the third-party "Peek Carousel for Elementor" plugin
 * (Social Linkup, v1.3.3) and reworked to SLU conventions.
 *
 * The sliding is NOT a JS slider. The track is a flex <ul> with
 * overflow-x:auto and scroll-snap-type:x mandatory, so the browser does the
 * actual sliding and touch swipe comes free. JS only drives the arrows, dots
 * and autoplay by calling scrollBy/scrollTo.
 *
 * The "peek" is pure CSS: each slide's flex-basis divides the track by a
 * DECIMAL number of visible cards, so 3.3 means three full cards plus a third
 * of the next showing at the edge.
 *
 * Every value below is a default; each is overridden per widget instance via
 * CSS custom properties written by Elementor `selectors` in
 * class-peek-carousel-widget.php.
 *
 * Breakpoint note: the original hardcoded `@media (max-width:1024px)` and
 * `767px`. Those are gone. Cards-visible is now a responsive Elementor
 * control, so Elementor emits the per-device media queries itself using the
 * site's own Site Settings breakpoints — same reasoning as Bento Box's
 * responsive spans. `--slu-peek-slides-base` is the inline desktop fallback
 * for stale post CSS (see the widget's render()), so `.slu-peek__slide` must
 * NOT declare a default for `--slu-peek-slides` itself.
 */

.slu-peek {
	--slu-peek-accent: #E85C02;
	--slu-peek-accent-text: #ffffff;
	--slu-peek-card-bg: #F3F1EC;
	--slu-peek-title-color: #1a1a1a;
	--slu-peek-text-color: #4a4a4a;
	--slu-peek-radius: 16px;
	--slu-peek-gap: 20px;
	--slu-peek-side-pad: 24px;
	--slu-peek-btn-bg: #1a1a1a;
	--slu-peek-btn-bg-hover: var(--slu-peek-accent);
	--slu-peek-btn-text: #ffffff;
	--slu-peek-arrow-bg: #ffffff;
	--slu-peek-arrow-color: #1a1a1a;
	--slu-peek-dot-color: #ddd8cc;
	--slu-peek-media-height: auto;
	--slu-peek-badge-size: 40px;
	--slu-peek-arrow-size: 44px;
	--slu-peek-btn-spacing: 20px;
	position: relative;
}

.slu-peek * { box-sizing: border-box; }

.slu-peek__track {
	display: flex;
	gap: var(--slu-peek-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--slu-peek-side-pad);
	padding: 8px var(--slu-peek-side-pad) 24px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin: 0;
	list-style: none;
}

.slu-peek__track::-webkit-scrollbar { display: none; height: 0; }

/* The peek maths. var() fallback chain: the responsive control's value, then
   the inline desktop value written by render(), then 3.3. Keep all three —
   dropping the -base fallback breaks pages whose Elementor CSS predates the
   responsive control, exactly as it did on Bento Box. */
.slu-peek__slide {
	flex: 0 0 calc(
		(100% - (var(--slu-peek-gap) * (var(--slu-peek-slides, var(--slu-peek-slides-base, 3.3)) - 1)))
		/ var(--slu-peek-slides, var(--slu-peek-slides-base, 3.3))
	);
	scroll-snap-align: start;
}

/* ── Manual-mode card ────────────────────────────────────────────────────── */

.slu-peek__card {
	background: var(--slu-peek-card-bg);
	border-radius: var(--slu-peek-radius);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.slu-peek__media {
	position: relative;
	aspect-ratio: 4/3;
	height: var(--slu-peek-media-height);
	background: #d8d4c8;
	background-size: cover;
	background-position: center;
}

.slu-peek__badge {
	position: absolute;
	top: 14px; left: 14px;
	width: var(--slu-peek-badge-size); height: var(--slu-peek-badge-size);
	border-radius: 50%;
	background: var(--slu-peek-accent);
	color: var(--slu-peek-accent-text);
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 10px rgba(0,0,0,.18);
}
/* Same flex-shrink trap as the nav button: the badge is display:flex, so a
   percentage-sized child can collapse. Sized off --slu-peek-badge-size with
   flex:none instead. */
.slu-peek__badge svg,
.slu-peek__badge img {
	width: calc(var(--slu-peek-badge-size, 40px) * 0.5);
	height: calc(var(--slu-peek-badge-size, 40px) * 0.5);
	flex: none;
}
.slu-peek__badge img { object-fit: contain; }

.slu-peek__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }

/* Hello Elementor resets heading colour and link colour at a specificity these
   would otherwise lose to — same fight as every other SLU widget. */
.slu-peek .slu-peek__title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 700;
	color: var(--slu-peek-title-color) !important;
	line-height: 1.25;
}
.slu-peek__desc {
	margin: 0 0 var(--slu-peek-btn-spacing);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--slu-peek-text-color);
	flex: 1 1 auto;
}

/* With no description there is no .slu-peek__desc in the markup, so the gap
   above the button has to come from the title instead. */
.slu-peek__body--no-desc .slu-peek__title { margin-bottom: var(--slu-peek-btn-spacing); }

/* Pinned to the bottom of the card so buttons line up across slides whose
   text runs to different lengths — `margin-top:auto` does the pinning, and it
   works whether or not the card has a description.
   The original relied on `.pce__desc { flex:1 }` alone to push the button
   down, which only held because every demo card shipped with description
   text; blank it out and the button rode up under the title. The spacing
   control is now the MINIMUM gap above the button, carried by whichever
   element ends the content flow, rather than a fixed top margin. */
.slu-peek .slu-peek__btn {
	align-self: flex-start;
	margin-top: auto;
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--slu-peek-btn-bg) !important;
	color: var(--slu-peek-btn-text) !important;
	border: none;
	border-radius: 999px !important;
	padding: 11px 20px;
	font-size: 14px; font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	transition: transform .15s ease, background .15s ease;
}
.slu-peek .slu-peek__btn:hover {
	background: var(--slu-peek-btn-bg-hover) !important;
	color: var(--slu-peek-btn-text) !important;
	transform: translateY(-1px);
}
.slu-peek__btn svg { width: 14px; height: 14px; flex: none; }

/* ── Query-mode slide ────────────────────────────────────────────────────── */

/* A loop item renders its own Elementor container tree, so the card chrome
   above does not apply — the template owns its styling. All this does is make
   the rendered document fill the slide so equal-height cards still line up. */
.slu-peek__slide--loop > .elementor,
.slu-peek__slide--loop > .e-con,
.slu-peek__slide--loop > .elementor-element {
	height: 100%;
}

/* ── Arrows ──────────────────────────────────────────────────────────────── */

.slu-peek__arrow {
	position: absolute; top: 38%; transform: translateY(-50%);
	width: var(--slu-peek-arrow-size); height: var(--slu-peek-arrow-size);
	border-radius: 50% !important;
	background: var(--slu-peek-arrow-bg); border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 6px 16px rgba(0,0,0,.12);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; z-index: 2; padding: 0;
}
.slu-peek__arrow:hover { background: var(--slu-peek-accent); border-color: var(--slu-peek-accent); }
.slu-peek__arrow:hover svg { stroke: #fff; }
/* Scales with the Size control rather than sitting at a fixed 18px, which
   looked lost once the arrow was enlarged. flex:none for the same reason as
   the nav button. */
.slu-peek__arrow svg {
	width: calc(var(--slu-peek-arrow-size, 44px) * 0.41);
	height: calc(var(--slu-peek-arrow-size, 44px) * 0.41);
	flex: none;
	fill: none;
	stroke: var(--slu-peek-arrow-color);
	transition: stroke .15s ease;
	pointer-events: none;
}
.slu-peek__arrow--prev { left: -4px; }
.slu-peek__arrow--next { right: -4px; }
.slu-peek--no-arrows .slu-peek__arrow { display: none; }

/* Arrow hiding stays a media query rather than a responsive control: it is a
   single on/off at the site's mobile breakpoint, emitted inline per widget by
   arrows_mobile_css() so it follows Site Settings rather than a hardcoded 767. */

/* ── Dots ────────────────────────────────────────────────────────────────── */

.slu-peek__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.slu-peek--no-dots .slu-peek__dots { display: none; }
.slu-peek__dot {
	width: 8px; height: 8px;
	border-radius: 50% !important;
	background: var(--slu-peek-dot-color);
	border: none; cursor: pointer; padding: 0;
	transition: all .2s ease;
}
.slu-peek__dot.is-active { background: var(--slu-peek-accent); width: 22px; border-radius: 4px !important; }

@media (prefers-reduced-motion: reduce) {
	.slu-peek__track { scroll-behavior: auto; }
	.slu-peek__btn, .slu-peek__dot { transition: none; }
}

/**
 * ── Detached Navigation widget (.slu-peek-nav) ───────────────────────────
 *
 * A separate widget placed anywhere on the page that drives a carousel
 * elsewhere by matching data-slu-peek-target to the carousel's
 * data-slu-peek-id. Carries its own custom properties so its look is
 * independent of whichever carousel it happens to control.
 */
.slu-peek-nav {
	--slu-peek-nav-bg: #ffffff;
	--slu-peek-nav-color: #1a1a1a;
	--slu-peek-nav-bg-next: #1a1a1a;
	--slu-peek-nav-color-next: #ffffff;
	--slu-peek-nav-hover-bg: #E85C02;
	--slu-peek-nav-hover-color: #ffffff;
	--slu-peek-nav-size: 44px;
	--slu-peek-nav-gap: 10px;
	display: inline-flex;
	align-items: center;
	gap: var(--slu-peek-nav-gap);
}
.slu-peek-nav--align-center { justify-content: center; width: 100%; }
.slu-peek-nav--align-right { justify-content: flex-end; width: 100%; }

.slu-peek-nav__btn {
	width: var(--slu-peek-nav-size); height: var(--slu-peek-nav-size);
	border-radius: 50% !important;
	background: var(--slu-peek-nav-bg); color: var(--slu-peek-nav-color);
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 6px 16px rgba(0,0,0,.1);
	display: flex; align-items: center; justify-content: center;
	cursor: pointer; padding: 0;
}
.slu-peek-nav__btn--next {
	background: var(--slu-peek-nav-bg-next);
	color: var(--slu-peek-nav-color-next);
	border-color: transparent;
}
.slu-peek-nav__btn:hover {
	background: var(--slu-peek-nav-hover-bg);
	color: var(--slu-peek-nav-hover-color);
	border-color: var(--slu-peek-nav-hover-bg);
}
/* Sized from the button's own custom property rather than a percentage.
   The button is display:flex, so the SVG is a flex item — and a replaced
   element sized in % has no intrinsic width to stop flex-shrink collapsing it
   to zero. That is exactly what happened with the original plugin's
   `width:42%`: the icons were in the DOM at 0px wide. `flex:none` is the part
   that actually prevents the collapse; calc() off --slu-peek-nav-size keeps
   the icon proportional when the Button Size control changes, without
   depending on percentage resolution inside a flex container.
   Note the card button's SVG in this same file already carried flex:none —
   the original hit this there and never applied the fix here. */
.slu-peek-nav__btn svg {
	width: calc(var(--slu-peek-nav-size, 44px) * 0.42);
	height: calc(var(--slu-peek-nav-size, 44px) * 0.42);
	flex: none;
	fill: none;
	stroke: currentColor;
	pointer-events: none;
}

/* Editor-only affordance: a Target Carousel ID that matches nothing on the
   page is outlined while building, rather than being silently dead on the
   live site. */
.slu-peek-nav--missing-target { outline: 2px dashed #e33; outline-offset: 4px; }