/* Offerings Carousel — Figma 11839:2748 (tabs 11839:2751, carousel 11839:2762).

   At 1600: heading H2 50/54 centered, subline 20/30 8 below, tab bar 768x56 white pill
   (r56, 0 0 20 shadow, 8px inset, 10 gap; tabs 40 tall r40 14/25 .14, active black) 43
   below, carousel 42 below the tabs: slides 800x450 r20 (50vw), 60 gap, active centered,
   neighbours clipped at the viewport, caption 40 below the image (title, then 16/24 .32).

   Ground and vertical padding are the BB row's. The clip lives on __viewport, OUTSIDE
   `.swiper`, because card-rotator.css forces `.swiper { overflow: visible !important }`
   sitewide. The default state is the JS-off state: a sideways-scrollable, snap-aligned
   row; Swiper takes over on init (`.swiper-initialized`). */

.tbl-offerings {
	--tbl-off-slide-w: 50vw;
	--tbl-off-gap: 60px;

	position: relative;
	text-align: center;
}

/* ---- head ---- */

.tbl-offerings__heading {
	max-width: 620px;
	margin: 0 auto;
	text-wrap: balance;
}

.tbl-offerings__subline {
	max-width: 620px;
	margin: 8px auto 0;
	font-size: 20px;
	line-height: 30px;
	letter-spacing: 0.4px;
	color: #4d5153;
}

/* ---- tabs ---- */

.tbl-offerings__tabs-wrap {
	margin-top: 31px; /* 43 in the frame, less the 12px shadow room below */
	padding: 12px 20px; /* room for the bar's shadow; the row is what scrolls on phones */
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.tbl-offerings__tabs-wrap::-webkit-scrollbar {
	display: none;
}

.tbl-offerings__tabs {
	display: inline-flex;
	gap: 10px;
	padding: 8px;
	border-radius: 999px;
	background: var(--White, #fff);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.08);
	white-space: nowrap;
}

.tbl-offerings__tab {
	appearance: none;
	margin: 0;
	padding: 0 16px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: var(--body-font);
	font-weight: var(--body-font-weight, 400);
	font-size: 14px;
	line-height: 25px;
	letter-spacing: 0.14px;
	color: var(--Black, #000);
	cursor: pointer;
	white-space: nowrap;
	transition: var(--button-easing);
}

.tbl-offerings__tab:hover {
	background: rgba(0, 0, 0, 0.06);
}

.tbl-offerings__tab.is-active,
.tbl-offerings__tab[aria-selected='true'] {
	background: var(--Black, #000);
	color: var(--White, #fff);
}

/* The theme strips outlines sitewide, but Beaver Builder's per-page layout CSS puts
   one back on every focused control inside `.fl-builder-content` at (0,2,1)
   (`:where(.fl-builder-content) :is(a[href], button, …):focus`), which is the black /
   white ring Ben saw sitting on the last-clicked tab. (0,4,0) here beats it: no ring on
   a mouse click, the ring on keyboard focus only. */
.tbl-offerings .tbl-offerings__tabs .tbl-offerings__tab:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.tbl-offerings .tbl-offerings__tabs .tbl-offerings__tab:focus-visible {
	outline: 2px solid #200147;
	outline-offset: 2px;
}

/* ---- carousel ---- */

.tbl-offerings__viewport {
	position: relative;
	/* Full-bleed technique 3 (platform.md): definite width + measured shift. */
	width: var(--tbl-off-viewport, 100vw);
	margin: 30px calc(-1 * var(--tbl-off-shift, 0px)) 0; /* 42 in the frame, less the shadow room */
	overflow: hidden;
	overflow-x: clip; /* sideways only, so the slides' rise is not cut off at the bottom */
	overflow-y: visible;
}

.tbl-offerings__swiper {
	width: 100%;
	overflow: visible;
}

/* JS-off: a scroll-snap row with the same widths and gap. */
.tbl-offerings__swiper:not(.swiper-initialized) {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.tbl-offerings__swiper:not(.swiper-initialized)::-webkit-scrollbar {
	display: none;
}

.tbl-offerings__swiper:not(.swiper-initialized) .swiper-wrapper {
	gap: var(--tbl-off-gap);
	padding: 0 calc((100% - var(--tbl-off-slide-w)) / 2);
}

.tbl-offerings__swiper:not(.swiper-initialized) .tbl-offerings__slide {
	scroll-snap-align: center;
}

.tbl-offerings__slide {
	box-sizing: border-box;
	width: var(--tbl-off-slide-w);
	height: auto; /* flex stretch: every slide is as tall as the tallest caption */
}

.tbl-offerings__media {
	overflow: hidden;
	border-radius: 20px;
	aspect-ratio: 16 / 9;
	background: var(--Neutral-10, #f2f2f2);
}

.tbl-offerings__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
	-webkit-user-select: none;
}

.tbl-offerings__caption {
	max-width: 570px;
	margin: 40px auto 0;
	padding: 0 20px;
}

.tbl-offerings__title {
	margin: 0;
	font-family: var(--header-font);
	font-weight: var(--header-font-weight);
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--Black, #000);
}

.tbl-offerings__text {
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.32px;
	color: #93999c;
}

/* Slides that are not centred are not interactive; the tab bar is. */
.swiper-initialized .tbl-offerings__slide {
	cursor: grab;
}

.swiper-initialized.swiper-grabbing .tbl-offerings__slide,
.swiper-initialized .tbl-offerings__slide:active {
	cursor: grabbing;
}

/* ---- reveal ---- */

/* Heading, subline and tab bar blur-fade up (the theme's `blur-up-in`); the slides
   cascade up with the theme's `fade-up-in`, previous → active → next, off one
   timeline named on __viewport so all three share a start point. Same gates as the
   Studios intro band. */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
	@supports (animation-timeline: view()) {
		body:not(.fl-builder-edit) .tbl-offerings__head > *,
		body:not(.fl-builder-edit) .tbl-offerings__tabs-wrap {
			--start-tween: clamp(80px, 20vh, 200px);
			--tween-length: 30vh;

			animation: blur-up-in both;
			animation-timeline: view();
			animation-range: entry var(--start-tween) entry calc(var(--start-tween) + var(--tween-length));
		}

		body:not(.fl-builder-edit) .tbl-offerings__viewport {
			view-timeline: --tbl-off-reveal block;
		}

		body:not(.fl-builder-edit) .tbl-offerings__slide {
			--tbl-off-order: 0;
			--start-tween: calc(clamp(80px, 20vh, 200px) + var(--tbl-off-order) * 6vh);
			--tween-length: 30vh;

			animation: fade-up-in both;
			animation-timeline: --tbl-off-reveal;
			animation-range: entry var(--start-tween) entry calc(var(--start-tween) + var(--tween-length));
		}

		body:not(.fl-builder-edit) .tbl-offerings__slide.swiper-slide-active {
			--tbl-off-order: 1;
		}

		body:not(.fl-builder-edit) .tbl-offerings__slide.swiper-slide-next {
			--tbl-off-order: 2;
		}
	}
}

/* ---- breakpoints ---- */

@media (max-width: 1024px) {
	.tbl-offerings {
		--tbl-off-slide-w: 64vw;
		--tbl-off-gap: 40px;
	}
}

@media (max-width: 767px) {
	.tbl-offerings {
		--tbl-off-slide-w: 80vw;
		--tbl-off-gap: 20px;
	}

	.tbl-offerings__subline {
		font-size: 18px;
		line-height: 28px;
		padding: 0 20px;
	}

	.tbl-offerings__tabs-wrap {
		margin-top: 20px;
		text-align: left;
	}

	.tbl-offerings__viewport {
		margin-top: 16px;
	}

	.tbl-offerings__media {
		border-radius: 12px;
	}

	.tbl-offerings__caption {
		margin-top: 24px;
		padding: 0 8px;
	}
}