/**
 * Case Study Card — Figma 11542:38794 (401x519 in the frame). Geometry read off
 * the screenshot: 30px insets, eyebrow top-left, "n/N" pill top-right, stat
 * number ~64px over a ~20px label, logo bottom-left, link bottom-right, dark
 * scrim from the top so white text reads over the sky.
 *
 * The module sets no outer width, margin or min-height — the BB column owns
 * those. The card's 401:519 ratio lives on each slide, and a long stat label
 * makes the slide (and so the card) taller rather than clipping.
 */

.tbl-cs-card {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	color: var(--White);
	isolation: isolate;
}

/* Eyebrow + pager float over the slides; only the pill has a box, nothing here
   takes pointer events so drags start on the slide underneath. */
.tbl-cs-card__top {
	position: absolute;
	z-index: 3;
	top: 30px;
	left: 30px;
	right: 30px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	pointer-events: none;
}

/* Category-Small metrics, copied from .tbl-sfcs__label. No .h6 class (module
   CSS loads before theme.css). */
.tbl-cs-card__eyebrow {
	margin: 0;
	font-family: var(--body-font);
	font-size: 10px;
	line-height: 17.78px;
	font-weight: 405;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--White);
}

.tbl-cs-card__pager {
	display: inline-flex;
	align-items: center;
	height: 22px;                    /* Figma 11554:38916, 39 × 22 */
	padding: 0 10px;
	border: 0;
	border-radius: 999px;
	/* Pastel #192: glass fill, white type. */
	background: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	font-family: var(--body-font);
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.24px;
	font-variant-numeric: tabular-nums;
	color: var(--White);
	margin-top: -2px; /* optical: the 22px pill centres on the 17.78px eyebrow line */
}

.tbl-cs-card__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.tbl-cs-card__track {
	display: flex;
}

/* Each slide is the whole card. In the static (one row) case there is one slide
   in a flex row; in the Swiper case the wrapper is the same flex row and
   the fade effect stacks them by opacity, so the card is as tall as its
   tallest slide either way. Selector carries the track so it outranks
   swiper.min.css's `.swiper-slide { display: block; height: 100% }`. */
.tbl-cs-card__track > .tbl-cs-card__slide {
	position: relative;
	flex: 0 0 100%;
	width: 100%;
	aspect-ratio: 401 / 519;
	display: flex;
	flex-direction: column;
	background: var(--Primary-90);
	overflow: hidden;
}

.tbl-cs-card__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

.tbl-cs-card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.35) 100%);
	pointer-events: none;
}

/* padding-top clears the eyebrow row (30 + 18 + ~10). */
.tbl-cs-card__content {
	position: relative;
	z-index: 1;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 58px 30px 30px;
	min-height: 0;
}

.tbl-cs-card__stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-width: 68%;
}

.tbl-cs-card__stat-number {
	font-family: var(--header-font);
	font-size: 50px;             /* Pastel #252 */
	line-height: 0.95;
	letter-spacing: -1px;
	color: var(--White);
}

.tbl-cs-card__stat-label {
	font-family: var(--body-font);
	font-size: var(--body-font-size-larger);
	line-height: 1;              /* Pastel #253 */
	color: var(--White);
}

.tbl-cs-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	margin-top: 24px;
}

.tbl-cs-card__logo {
	display: block;
	flex: 0 1 auto;
	width: 100%;
}

.tbl-cs-card__logo-img {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
}

/* Underline-fade recipe (theme's unlayered body-copy rule sets both longhands,
   hence !important — see tbl-contact-card.css). Underlined at rest here, per
   the design; hover lifts the underline to purple. */
.tbl-cs-card__link {
	flex: 0 0 auto;
	font-family: var(--body-font);
	font-size: 16px;
	line-height: 1.5;
	white-space: nowrap;
	color: var(--White);
	text-decoration-line: underline !important;
	text-decoration-color: currentColor !important;
	text-decoration-thickness: from-font;
	text-underline-offset: 3px;
	transition: var(--button-easing);
}

/* The theme has no global screen-reader class; clip the client-name suffix here. */
.tbl-cs-card__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tbl-cs-card__link:hover,
.tbl-cs-card__link:focus-visible {
	color: var(--nav-bolt-color);
}

.tbl-cs-card__link:focus-visible {
	outline: 2px solid var(--White);
	outline-offset: 4px;
}

/* -------------------------------------------------------------- swiper ---- */

.tbl-cs-card--rotating .tbl-cs-card__viewport {
	cursor: grab;
}

.tbl-cs-card--rotating .tbl-cs-card__viewport:active {
	cursor: grabbing;
}

/* The vendored swiper.min.css is the CORE build: it has no .swiper-fade rules,
   so slides only ever transition `transform`. The fade effect changes opacity
   and then waits for a transitionend that never comes — autoplay pauses for
   good after the first change. Own the transition property here, as
   tbl-slideshow does. */
.tbl-cs-card--rotating .swiper-slide {
	transition-property: opacity;
}

/* Swiper's fade effect hides inactive slides by opacity but they still sit in
   the flex row; their content must not be reachable. Swiper applies
   pointer-events itself for crossFade; this is the belt for older builds. */
.tbl-cs-card--rotating .swiper-slide:not(.swiper-slide-active) {
	pointer-events: none;
}

/* ---------------------------------------------------------- responsive ---- */

@media (max-width: 480px) {
	.tbl-cs-card__top {
		top: 24px;
		left: 24px;
		right: 24px;
	}

	.tbl-cs-card__content {
		padding: 52px 24px 24px;
	}

	.tbl-cs-card__stat {
		max-width: 80%;
	}
}