/*
 * compliance-platform.css — Home page: Compliance Tab Slider section.
 *
 * Centered eyebrow + heading, a row of pill tabs, and a single-track
 * slider below — one slide per tab, the active one large and opaque, its
 * neighbors small faded peeks. Switching tabs slides the whole track via
 * transform: translateX(), computed by assets/js/home/compliance-platform.js;
 * this file owns every visual — no inline styles beyond that one transform.
 *
 * Only enqueued on the front page / Home Page template (see inc/enqueue.php).
 *
 * @package Greenova
 */

.compliance-platform {
	background-color: #FFFFFF;
	padding-block:     120px;
	/*
	 * The side preview images intentionally extend past .compliance-platform__preview
	 * (which is overflow:visible, per design) using negative left/right offsets —
	 * this is the actual crop boundary, sized to the full section so it reads as
	 * "cropped by the page", not by a small box, without ever causing horizontal
	 * page scroll.
	 */
	overflow-x:        hidden;
}

/* =============================================================================
   Eyebrow + Heading
   ============================================================================= */

.compliance-platform__eyebrow {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 400;
	line-height: 20px;
	color:       #000000;
	text-align:  center;
	margin:      0 0 12px;
}

.compliance-platform__heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      48px;
	font-weight:    500;
	line-height:    52.8px;
	letter-spacing: -1.92px;
	color:          #000000;
	text-align:     center;
	max-width:      1308px;
	margin:         0 auto 48px;
}

/* =============================================================================
   Tabs
   ============================================================================= */

.compliance-platform__tabs {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	align-items:     center;
	gap:             10px;
	margin:          0 0 48px;
}

.compliance-platform__tab {
	display:        inline-flex;
	align-items:    center;
	gap:            8px;
	padding:        9px 17px;
	background:     #FFFFFF;
	border:         1px solid #CACBCD;
	border-radius:  25.6px;
	cursor:         pointer;
	transition:     border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.compliance-platform__tab:hover {
	border-color: #000000;
}

.compliance-platform__tab-label {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 400;
	line-height: 20px;
	color:       #222222;
	transition:  color 0.3s ease;
}

.compliance-platform__tab-icon {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           0;
	overflow:        hidden;
	opacity:         0;
	transform:       scale(0.6);
	transition:      width 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.compliance-platform__tab-icon img {
	width:   14px;
	height:  14px;
	display: block;
	flex-shrink: 0;
}

.compliance-platform__tab.is-active {
	border-color: #000000;
}

.compliance-platform__tab.is-active .compliance-platform__tab-label {
	color:       #000000;
	font-weight: 500;
}

.compliance-platform__tab.is-active .compliance-platform__tab-icon {
	width:     18px;
	opacity:   1;
	transform: scale(1);
}

/* =============================================================================
   Preview — single sliding track, one slide per tab
   ============================================================================= */

/*
 * The viewport clips the track; the track itself is a plain flex row, one
 * slide per tab in tab order, no gap (slides sit flush against each other).
 * assets/js/home/compliance-platform.js sets the track's transform:
 * translateX() so the active slide's own center lands on the viewport's
 * center — moving to a later tab shifts the track further left (content
 * enters from the right), moving to an earlier tab shifts it right
 * (content enters from the left), exactly like a real carousel swipe.
 */
.compliance-platform__preview {
	position:      relative;
	width:         100%;
	height:        500px;
	margin-inline: auto;
	overflow:      hidden;
}

/*
 * At desktop widths (where the peek neighbors are visible — see the
 * 1199.98px breakpoint below, which drops to a single full-frame slide and
 * is untouched by this), the preview breaks out of .container's max-width
 * to span the full viewport, so the peek slides crop against the true
 * browser edge instead of stopping early inside a centered, narrower box
 * with visible empty space beyond it.
 */
@media ( min-width: 1200px ) {
	.compliance-platform__preview {
		width:        100vw;
		margin-left:  calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
}

.compliance-platform__track {
	position:    absolute;
	inset-block: 0;
	left:        0;
	display:     flex;
	align-items: center;
	transition:  transform 0.5s ease-in-out;
	will-change: transform;
}

/*
 * Every slide is the same DOM element for every tab — only its size,
 * opacity and radius change between "this is the active/center slide" and
 * "this is a faded peek neighbor". Sizes match the Figma reference: 954px
 * active, 434px peek. Transitioning width/height (not just transform)
 * makes the active slide visibly grow into place as the track slides,
 * rather than just cross-fading.
 */
.compliance-platform__slide {
	position:      relative;
	flex:          0 0 auto;
	width:         600px;
	height:        424px;
	border-radius: 24px;
	overflow:      hidden;
	opacity:       0.4;
	transition:    width 0.5s ease-in-out, height 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.compliance-platform__slide img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.compliance-platform__slide.is-active {
	width:   954px;
	height:  500px;
	opacity: 1;
	z-index: 2;
}

/* =============================================================================
   Responsive
   ============================================================================= */

@media ( max-width: 1199.98px ) {
	.compliance-platform {
		padding-block: 88px;
	}

	.compliance-platform__heading {
		font-size:      3rem;
		line-height:    1.1;
		letter-spacing: -0.03em;
		margin-bottom:  40px;
	}

	.compliance-platform__preview {
		max-width:    100%;
		height:       auto;
		aspect-ratio: 954 / 500;
	}

	/*
	 * The sliding track + peek neighbors are a desktop-only flourish — on
	 * tablet/mobile only the active slide shows, filling the frame, and the
	 * track never needs to move (JS also skips computing/applying a
	 * transform below this breakpoint — see compliance-platform.js).
	 */
	.compliance-platform__track {
		position:   static;
		transform:  none !important;
		/*
		 * will-change:transform (set unconditionally above, for the desktop
		 * slide animation) makes an element act as a containing block for
		 * absolutely positioned descendants EVEN while position:static —
		 * so .compliance-platform__slide.is-active's height:100% below was
		 * resolving against the track's own collapsed 0px height instead of
		 * .compliance-platform__preview's real height. Resetting it here is
		 * what actually restores .preview as the containing block.
		 */
		will-change: auto;
	}

	.compliance-platform__slide {
		display: none;
	}

	.compliance-platform__slide.is-active {
		display:       block;
		position:      absolute;
		inset:         0;
		width:         100%;
		height:        100%;
		border-radius: 16px;
	}
}

@media ( max-width: 767.98px ) {
	.compliance-platform {
		padding-block: 64px;
	}

	.compliance-platform__heading {
		font-size:   2rem;
		line-height: 1.2;
		margin-bottom: 32px;
	}

	.compliance-platform__tabs {
		flex-wrap:       wrap;
		justify-content: center;
		gap:             10px;
		overflow-x:      hidden;
		margin-bottom:   32px;
	}

	.compliance-platform__tab {
		padding:     8px 14px;
		flex-shrink: 0;
	}

	.compliance-platform__tab-label {
		font-size: 14px;
	}

	.compliance-platform__preview {
		aspect-ratio: 4 / 3;
		border-radius: 16px;
	}
}

@media ( max-width: 479.98px ) {
	.compliance-platform__heading {
		font-size: 1.625rem;
	}
}