/* --------------------------------------------------------------------
* Custom Stylesheet
*
* Site-specific components that are not part of the Jesper theme.
* Loaded after "theme.css" and "theme-light.css" so it can override both.
*
-------------------------------------------------------------------- */


/* Table of Content
====================
* Service cards
* Content slider - full height
*/


/* ------------------------------------------------------------- *
 * Service cards
 * Two-up cards with a text column and a full-bleed image/video column.
/* ------------------------------------------------------------- */
.tt-service-cards-container {
	max-width: 1500px;
}

.tt-service-cards {
	/* Surfaces - dark mode (default).
	   The panel sits just above the page background, the cards sit above the
	   panel, and the number badge drops back down to the panel tone. */
	--ttsc-panel-bg: #141414;
	--ttsc-card-bg: #1e1e1e;
	--ttsc-badge-bg: #141414;
	--ttsc-media-bg: #262626;

	/* Type colours - these follow the theme token, so they flip on their own */
	--ttsc-title-color: var(--tt-text-color);
	--ttsc-text-color: var(--tt-text-color);
	--ttsc-badge-color: var(--tt-text-color);

	/* Layout tokens (shared by both modes) */
	--ttsc-panel-radius: 32px;
	--ttsc-panel-padding: 32px;
	--ttsc-card-radius: 16px;
	--ttsc-card-gap: 8px;
	--ttsc-card-min-width: 500px; /* below this the grid drops to a single column */
	--ttsc-media-width: 45.53%; /* 326 / 716 of the card width */
	--ttsc-media-ratio: 326 / 418;
	--ttsc-body-min-height: 377px;

	position: relative;
	background-color: var(--ttsc-panel-bg);
	padding: var(--ttsc-panel-padding);
	border-radius: var(--ttsc-panel-radius);
	overflow: hidden;
}

/* Surfaces - light mode (page background is #e5e3dc) */
body.tt-lightmode-on .tt-service-cards {
	--ttsc-panel-bg: #dcdad2;
	--ttsc-card-bg: #f1efeb;
	--ttsc-badge-bg: #dcdad2;
	--ttsc-media-bg: #e3e1dc;
}

@media (max-width: 809px) {
	.tt-service-cards {
		--ttsc-panel-padding: 20px;
		--ttsc-panel-radius: 24px;
	}
}


/* Grid
======== */
/* Two-up while each card can still hold its minimum width, one-up below that.
   Mirrors the reference, which wraps on a per-card min-width rather than on a
   fixed viewport breakpoint. */
.tt-service-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(var(--ttsc-card-min-width), 100%), 1fr));
	gap: var(--ttsc-card-gap);
}


/* Card
======== */
.tt-svc-card {
	display: flex;
	align-items: stretch;
	background-color: var(--ttsc-card-bg);
	border-radius: var(--ttsc-card-radius);
	overflow: hidden;
}

/* Text column */
.tt-svc-card-body {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	min-width: 0;
	min-height: var(--ttsc-body-min-height);
	padding: 32px 32px 40px;
}

/* Number badge */
.tt-svc-card-num {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 35px;
	height: 35px;
	margin: 0;
	font-family: var(--tt-body-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.48px;
	color: var(--ttsc-badge-color);
	border-radius: 80px;
}

/* Title + description */
.tt-svc-card-text {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.tt-svc-card-title {
	margin: 0;
	/* Theme heading treatment (alter font, uppercase).
	   Swap the three declarations below for the body font if you would rather
	   match the reference exactly:
	   font-family: var(--tt-body-font); font-size: 24px; text-transform: none; */
	font-family: var(--tt-alter-font);
	font-size: clamp(26px, 2vw, 30px);
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	color: var(--ttsc-title-color);
}

.tt-svc-card-desc {
	margin: 0;
	font-family: var(--tt-body-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.18px;
	color: var(--ttsc-text-color);
}


/* Media column (image or video)
================================= */
.tt-svc-card-media {
	position: relative;
	flex: 0 0 var(--ttsc-media-width);
	aspect-ratio: var(--ttsc-media-ratio);
	background-color: var(--ttsc-media-bg);
	overflow: hidden;
}
.tt-svc-card-media img,
.tt-svc-card-media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}


/* Small screens: stack the card, media above the text
====================================================== */
@media (max-width: 575px) {
	.tt-svc-card {
		flex-direction: column;
	}
	.tt-svc-card-media {
		/* Media leads the stacked card */
		order: 1;
		flex: 0 0 auto;
		width: 100%;
	}
	.tt-svc-card-body {
		/* Height is driven by the content once the card stacks, so the column
		   must not keep its zero flex-basis or it collapses behind the media. */
		order: 2;
		flex: 0 0 auto;
		gap: 0;
		justify-content: flex-start;
		min-height: 0;
		padding: 24px 24px 32px;
	}
	.tt-svc-card-num {
		/* The badge is empty, so on the stacked card it only leaves dead space
		   above the title. It still spaces the desktop layout. */
		display: none;
	}
}


/* ------------------------------------------------------------- *
 * Content slider - full height
 * Modifier for a full width ".tt-content-slider" (one outside ".tt-wrap").
 * The theme sizes those slides to 90vh; this matches the full-bleed image
 * treatment of ".tt-image.tti-full-height" instead, which is 100vh.
 * Same breakpoint as the theme rule, so small screens keep their own ratio.
/* ------------------------------------------------------------- */
@media (min-width: 1025px) {
	.tt-content-slider.tt-cs-full-height .tt-content-slider-item {
		height: 100vh;
	}
}