/*
 * Footer Testimonial Slider — frontend styles.
 *
 * The base rules below (section background/overflow, .swiper overflow,
 * .swiper-slide/.footer-slider-card sizing, image sizing, nav button
 * box/opacity) are exactly the CSS spec supplied for this build —
 * everything past that is the additional typography/spacing/responsive
 * detailing needed for the Figma card content (badge, stat, quote, author,
 * CTA) that spec didn't cover on its own.
 *
 * overflow:hidden lives on THIS section (which spans the true viewport
 * width) rather than on a narrower breakout wrapper — the swiper's own
 * overflow:visible lets slides peek past the .container's edge as
 * intended, and this outer clip is what stops that peek from ever
 * escaping past the actual viewport edge and creating a page-level
 * horizontal scrollbar.
 *
 * Swiper's own base styles (assets/vendor/swiper/swiper-bundle.min.css) are
 * enqueued as this stylesheet's dependency (see inc/enqueue.php) — that's
 * what supplies .swiper/.swiper-wrapper/.swiper-slide layout mechanics and
 * the swiper-icons font powering the nav buttons' arrow glyphs; only
 * project-specific overrides live here.
 */

.footer-testimonial-slider {
	background: #F3F4F5;
	overflow:   hidden;
	padding:    120px 0;
}

.footer-slider-heading {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      48px;
	font-weight:    500;
	line-height:    1.1;
	letter-spacing: -0.03em;
	color:          #000000;
	max-width:      620px;
	margin:         0 0 56px;
}

.footer-testimonial-slider .swiper {
	overflow: visible;
	cursor:   grab;
}

.footer-testimonial-slider .swiper.swiper-grabbing {
	cursor: grabbing;
}

/*
 * flex-start, not center: at desktop both card types share a fixed 376px
 * height so this makes no visual difference there, but on tablet/mobile
 * (max-width:991.98px below) cards switch to height:auto, sized to their
 * own content — the Case Study card (badge/stat/CTA) is naturally much
 * shorter than the Testimonial card (image + quote + author). Centering
 * would vertically offset the shorter card deep into the row with a large
 * empty gap above it instead of aligning both to the same top edge.
 */
.footer-testimonial-slider .swiper-wrapper {
	align-items: flex-start;
}

.footer-testimonial-slider .swiper-slide {
	width:  736px;
	height: 376px;
}

/* =============================================================================
   Card — shared shell (both card types)
   ============================================================================= */

.footer-slider-card {
	position:      relative;
	display:       flex;
	width:         736px;
	height:        376px;
	border-radius: 24px;
	overflow:      hidden;
	box-sizing:    border-box;
}

/*
 * Scoped to __image-wrap specifically, NOT the bare ".footer-slider-card
 * img" — the quote-icon is also an <img> when a testimonial has a custom
 * uploaded icon (vs. the default inline SVG), and living anywhere under
 * .footer-slider-card makes it match a broader ".footer-slider-card img"
 * selector too. Scoping here means the two rules target disjoint elements
 * and can never fight over source order — see the responsive rules below,
 * which is exactly where a same-specificity, source-order-only version of
 * this used to silently blow the quote-icon up to full photo size.
 */
.footer-slider-card__image-wrap img {
	width:         352px;
	height:        352px;
	object-fit:    cover;
	border-radius: 16px;
	display:       block;
}

.footer-slider-card__image-wrap {
	flex-shrink: 0;
	width:       352px;
	height:      352px;
	margin:      12px;
}

/* =============================================================================
   Testimonial card — image left, quote content right
   ============================================================================= */

.footer-slider-card--testimonial .footer-slider-card__content {
	justify-content: flex-start;
	color:           #FFFFFF;
}

.footer-slider-card__quote-icon {
	display:       inline-flex;
	margin-bottom: 24px;
}

.footer-slider-card__quote-icon img {
	width:      32px;
	height:     auto;
	border-radius: 0;
}

.footer-slider-card__quote-icon--default {
	font-family: Georgia, 'Times New Roman', serif;
	font-size:   64px;
	line-height: 1;
	color:       #219FD6;
}

.footer-slider-card__quote {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   18px;
	font-weight: 400;
	line-height: 28px;
	color:       inherit;
	margin:      0 0 24px;
}

.footer-slider-card__highlight {
	color:       #219FD6;
	font-weight: 500;
}

.footer-slider-card__author {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   14px;
	font-weight: 400;
	color:       rgba(255, 255, 255, 0.7);
	margin:      auto 0 0;
}

/* =============================================================================
   Case Study card — badge/stat/CTA left, image right
   ============================================================================= */

.footer-slider-card--case-study .footer-slider-card__content {
	order:           1;
	justify-content: flex-start;
	color:           #000000;
}

.footer-slider-card--case-study .footer-slider-card__image-wrap {
	order: 2;
}

.footer-slider-card__badge {
	display:         inline-flex;
	align-self:      flex-start;
	font-family:     'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:       13px;
	font-weight:     500;
	color:           #000000;
	background:      #FFFFFF;
	padding:         6px 14px;
	border-radius:   20px;
	margin-bottom:   28px;
}

.footer-slider-card__stat-number {
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      56px;
	font-weight:    600;
	line-height:    1;
	color:          #000000;
	margin:         0 0 16px;
}

.footer-slider-card__stat-desc {
	font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:   16px;
	font-weight: 400;
	line-height: 24px;
	color:       #000000;
	margin:      0 0 24px;
	max-width:   220px;
}

.footer-slider-card__cta {
	display:        inline-flex;
	align-items:    center;
	gap:            6px;
	font-family:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size:      15px;
	font-weight:    500;
	color:          #000000;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-top:     auto;
}

.footer-slider-card__cta-icon {
	flex-shrink: 0;
}

/* =============================================================================
   Content column — shared width for both card types (736 card - 352 image
   - 24px outer padding on each side of the image = 336px remaining)
   ============================================================================= */

.footer-slider-card__content {
	position:        relative;
	flex:            1 1 auto;
	min-width:       0;
	display:         flex;
	flex-direction:  column;
	padding:         32px;
	box-sizing:      border-box;
}

/* =============================================================================
   Navigation — Prev/Next circular buttons below the slider
   ============================================================================= */

.footer-slider-navigation {
	display:         flex;
	justify-content: flex-end;
	align-items:     center;
	gap:             16px;
	margin-top:      32px;
	width:           100%;
}

.footer-slider-navigation .swiper-button-prev,
.footer-slider-navigation .swiper-button-next {
	position:            relative;
	left:                auto;
	right:               auto;
	top:                 auto;
	bottom:              auto;
	margin:              0;
	width:               48px;
	height:              48px;
	background-color:    transparent;
	background-repeat:   no-repeat;
	background-position: center;
	background-size:     48px 48px;
	border:              none;
	border-radius:       0;
	box-shadow:          none;
	outline:             none;
	appearance:          none;
	-webkit-appearance:  none;
	color:               transparent; /* no text content, but rules out any browser default button label color from ever showing */
	transition:          opacity 0.3s ease;
}

/* Neutral (non-blue) focus indicator — browsers default a focused <button>
   to a blue outline/ring; this keeps keyboard-navigation accessibility
   without reintroducing the blue the SVG-only design doesn't want. */
.footer-slider-navigation .swiper-button-prev:focus-visible,
.footer-slider-navigation .swiper-button-next:focus-visible {
	outline:        2px solid rgba(0, 0, 0, 0.4);
	outline-offset: 2px;
}

/*
 * background-image for .swiper-button-prev/-next is set via a small inline
 * <style> block in template-parts/footer/testimonial-slider.php, not here —
 * this is a static asset file served directly by its own URL, so it can't
 * call content_url() to build a portable (environment-independent) path to
 * the uploaded SVGs the way the PHP template can.
 */

.footer-slider-navigation .swiper-button-prev {
	opacity: 0.3;
}

.footer-slider-navigation .swiper-button-next {
	opacity: 0.7;
}

.footer-slider-navigation .swiper-button-prev::after,
.footer-slider-navigation .swiper-button-next::after {
	display: none;
}

.footer-slider-navigation .swiper-button-prev:hover,
.footer-slider-navigation .swiper-button-next:hover {
	opacity: 1;
}

.footer-slider-navigation .swiper-button-disabled {
	/* loop:true means these never actually disable, but guard against it
	   looking "broken" if it ever does. */
	pointer-events: auto;
	cursor:         pointer;
}

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

/*
 * Tablet / iPad Pro — same ROW layout as desktop (image beside content,
 * one card fully visible + the next peeking in), just narrower and with
 * height:auto instead of a fixed height. The fixed 320px height this tier
 * used to carry (a plain scaled-down copy of desktop's 736x376) was the
 * actual bug: at 600px card width the content column is only ~216px wide,
 * so the quote/author needed MORE than 320px to lay out and got silently
 * clipped by the card's own overflow:hidden — the card was rendering
 * correctly, it just had no room to show what it rendered.
 */
@media ( max-width: 1199.98px ) {
	.footer-testimonial-slider {
		padding: 88px 0;
	}

	.footer-testimonial-slider .swiper-slide,
	.footer-slider-card {
		width:  480px;
		height: auto;
	}

	.footer-slider-card__image-wrap,
	.footer-slider-card__image-wrap img {
		width:  220px;
		height: 220px;
	}

	.footer-slider-card__content {
		padding: 24px;
	}

	.footer-slider-card__quote-icon {
		margin-bottom: 16px;
	}

	.footer-slider-card__quote-icon--default {
		font-size: 48px;
	}

	.footer-slider-card__quote {
		font-size:   16px;
		line-height: 24px;
		margin-bottom: 16px;
	}

	.footer-slider-card__badge {
		margin-bottom: 20px;
	}

	.footer-slider-card__stat-number {
		font-size:  40px;
		margin-bottom: 12px;
	}

	.footer-slider-card__stat-desc {
		margin-bottom: 16px;
	}

	.footer-slider-navigation {
		justify-content: center;
	}
}

/*
 * Mobile — the card switches to a STACKED layout (image on top, content
 * below); one card visible at a time with a small peek of the next. All
 * of the sizing here (image height, quote icon, padding) is scaled down
 * specifically for this tier rather than inherited from tablet, since a
 * value that reads fine on an iPad-width row card (e.g. a 220px image, a
 * 48px quote glyph) is oversized once that same card is squeezed into an
 * 86vw-wide phone screen.
 */
@media ( max-width: 767.98px ) {
	.footer-testimonial-slider {
		padding: 56px 0;
	}

	.footer-slider-heading {
		font-size:     2rem;
		margin-bottom: 32px;
	}

	.footer-testimonial-slider .swiper-slide,
	.footer-slider-card {
		width:  86vw;
		height: auto;
	}

	.footer-slider-card--testimonial,
	.footer-slider-card--case-study {
		flex-direction: column;
	}

	.footer-slider-card--case-study .footer-slider-card__content {
		order: 0;
	}

	.footer-slider-card--case-study .footer-slider-card__image-wrap {
		order: 1;
	}

	.footer-slider-card__image-wrap {
		width:  auto;
		height: 160px;
		margin: 8px;
	}

	.footer-slider-card__image-wrap img {
		width:  auto;
		height: 160px;
	}

	.footer-slider-card__content {
		padding: 20px;
	}

	.footer-slider-card__quote-icon {
		margin-bottom: 12px;
	}

	.footer-slider-card__quote-icon img {
		width: 22px;
	}

	.footer-slider-card__quote-icon--default {
		font-size: 32px;
	}

	.footer-slider-card__quote {
		font-size:     15px;
		line-height:   22px;
		margin-bottom: 16px;
	}

	.footer-slider-card__author {
		font-size: 13px;
	}

	.footer-slider-card__badge {
		margin-bottom: 16px;
	}

	.footer-slider-card__stat-number {
		font-size:     32px;
		margin-bottom: 10px;
	}

	.footer-slider-card__stat-desc {
		font-size:     14px;
		line-height:   20px;
		margin-bottom: 16px;
	}

	.footer-slider-navigation {
		justify-content: center;
		margin-top:      24px;
	}

	.footer-slider-navigation .swiper-button-prev,
	.footer-slider-navigation .swiper-button-next {
		width:  40px;
		height: 40px;
	}
}