/**
 * Products section — image-forward grid for the company's own products.
 *
 * Loaded on the front page and the /products/ archive (see inc/enqueue.php).
 * Deliberately lighter and more visual than the dark Projects carousel so
 * the two showcases read as different things. Pictures lead; everything
 * else supports them.
 */

.flt-products-section {
	padding: 90px 0;
	background: #f5f6f7;
	/* The Projects carousel above is position:relative and bleeds off-screen
	   (margin-right:-400px on desktop). Positioned elements paint on top of
	   static ones regardless of DOM order, so without our own stacking
	   context that carousel overlays this section and swallows clicks on
	   desktop (it's fine on mobile, where the bleed is reset). Position +
	   z-index lifts this section and its links back on top. */
	position: relative;
	z-index: 1;
}

.flt-products-section .sec-title {
	margin-bottom: 45px;
}

.flt-products-section .sec-title .sub-title {
	color: #df2313;
}

/* Responsive auto-fitting grid. Cards never get narrower than 300px;
   the browser fits as many columns as the container allows. */
.flt-products-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 30px;
}

.flt-product-card {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(18, 23, 41, 0.06);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flt-product-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 40px rgba(18, 23, 41, 0.14);
}

/* Uniform 4:3 image frame so mixed-size uploads all look tidy. */
.flt-product-card__media {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #e9ecf1;
}

.flt-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.5s ease;
}

.flt-product-card:hover .flt-product-card__media img {
	transform: scale(1.06);
}

/* ---- Per-card image swiper (multiple images) -------------------------
   Dependency-free: assets/js/products.js drives autoplay + manual control.
   The track is a flex row of full-width slides translated horizontally. */
.flt-product-slider {
	cursor: grab;
}

.flt-product-slider:active {
	cursor: grabbing;
}

.flt-product-slider__track {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 0.45s ease;
	touch-action: pan-y; /* let vertical page scroll through; we handle horizontal */
}

.flt-product-slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
}

.flt-product-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none; /* so drag-swipe doesn't start an image drag-ghost */
}

/* In a slider only the track moves — cancel the single-image hover zoom so
   the two transforms don't fight. */
.flt-product-card:hover .flt-product-slide img {
	transform: none;
}

/* Prev / next arrows — hidden until the card is hovered (still always
   available on touch, where there's no hover state). */
.flt-product-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border: none;
	border-radius: 50%;
	background: rgba(18, 23, 41, 0.55);
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.25s ease, background 0.25s ease;
	z-index: 2;
}

.flt-product-card:hover .flt-product-slider__nav,
.flt-product-slider__nav:focus-visible {
	opacity: 1;
}

.flt-product-slider__nav:hover {
	background: #df2313;
}

.flt-product-slider__nav--prev {
	left: 12px;
}

.flt-product-slider__nav--next {
	right: 12px;
}

/* Dots */
.flt-product-slider__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 7px;
	z-index: 2;
}

.flt-product-slider__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.flt-product-slider__dot.is-active {
	background: #df2313;
	transform: scale(1.25);
}

@media (hover: none) {
	/* Touch devices: keep arrows visible since there's no hover. */
	.flt-product-slider__nav {
		opacity: 1;
	}
}

/* Shown only when a product has no Featured Image — branded panel with the
   product name, so a missing picture never looks like a broken image. */
.flt-product-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 20px;
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	color: #ffffff;
	background: linear-gradient(135deg, #121729 0%, #2a3358 100%);
}

.flt-product-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 22px 24px 26px;
}

.flt-product-card__title {
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 10px;
}

.flt-product-card__title a {
	color: #121729;
	transition: color 0.25s ease;
}

.flt-product-card__title a:hover {
	color: #df2313;
}

.flt-product-card__text {
	color: #585b6f;
	font-size: 15px;
	line-height: 1.6;
	margin: 0 0 18px;
	/* Clamp to 3 lines so a long description never blows up the card —
	   the full text lives on the single-product page. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* "View all products" button below the homepage teaser grid. */
.flt-products-more {
	margin-top: 44px;
}

/* Push the CTA to the bottom so cards of different text lengths line up. */
.flt-product-card__more {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #df2313;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.2px;
	text-decoration: none;
}

.flt-product-card__more:hover {
	color: #b71d10;
}

.flt-product-card__more i {
	transition: transform 0.25s ease;
}

.flt-product-card:hover .flt-product-card__more i {
	transform: translateX(4px);
}

/* Whole card is clickable via the two links; keep the media link tidy. */
.flt-product-card__media:focus-visible,
.flt-product-card__title a:focus-visible {
	outline: 2px solid #df2313;
	outline-offset: 2px;
}

@media (max-width: 575px) {
	.flt-products-section {
		padding: 60px 0;
	}
	.flt-products-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}
}

/* ---- Click-to-zoom hint ---------------------------------------------- */
.flt-product-card__media--zoom img,
.flt-product-slider {
	cursor: zoom-in;
}

.flt-product-slider:active {
	cursor: grabbing;
}

/* ---- Lightbox (bigger image preview) --------------------------------- */
body.flt-lightbox-open {
	overflow: hidden; /* lock page scroll while the preview is open */
}

.flt-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vh 4vw;
	background: rgba(10, 13, 24, 0.92);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.flt-lightbox[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
}

.flt-lightbox__stage {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.flt-lightbox__img {
	max-width: 90vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	cursor: default;
}

.flt-lightbox__close {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	color: #fff;
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.flt-lightbox__close:hover {
	opacity: 1;
	transform: scale(1.1);
}

.flt-lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.flt-lightbox__nav:hover {
	background: #df2313;
}

.flt-lightbox__nav--prev { left: 18px; }
.flt-lightbox__nav--next { right: 18px; }

.flt-lightbox__counter {
	position: absolute;
	bottom: 22px;
	left: 0;
	right: 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	letter-spacing: 1px;
}

@media (max-width: 575px) {
	.flt-lightbox__nav { width: 42px; height: 42px; font-size: 18px; }
	.flt-lightbox__nav--prev { left: 8px; }
	.flt-lightbox__nav--next { right: 8px; }
}

/* ---- Single product details page ------------------------------------- */
.flt-product-detail__gallery .flt-product-card__media {
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(18, 23, 41, 0.10);
}

/* No `.flt-product-card` wrapper here, so the card-hover rules never fire —
   keep the gallery arrows visible, and use a zoom cursor on the picture. */
.flt-product-detail__gallery .flt-product-slider__nav {
	opacity: 1;
}

.flt-product-detail__gallery .flt-product-card__media:not(.flt-product-slider) {
	cursor: zoom-in;
}

.flt-product-detail__info {
	padding-left: 6px;
}

.flt-product-detail__title {
	font-size: 34px;
	line-height: 1.2;
	margin: 0 0 16px;
	color: #121729;
}

.flt-product-detail__lead {
	font-size: 18px;
	line-height: 1.6;
	color: #585b6f;
	margin: 0 0 22px;
}

.flt-product-detail__cta {
	margin-bottom: 26px;
}

.flt-product-detail__content {
	color: #3a3f55;
	font-size: 16px;
	line-height: 1.75;
}

.flt-product-detail__content p {
	margin: 0 0 16px;
}

.flt-product-detail__content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.flt-product-detail__back {
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid #e6e8ee;
}

.flt-product-detail__back a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #df2313;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}

.flt-product-detail__back a:hover {
	color: #b71d10;
}

@media (max-width: 991px) {
	.flt-product-detail__info {
		padding-left: 0;
		margin-top: 26px;
	}
	.flt-product-detail__title {
		font-size: 28px;
	}
}