/* ==========================================================================
 * Component: 02 — Marquee (.imea-marquee)
 * Animation transform applied by js/marquee.js (inline styles) so WP Rocket's
 * Remove Unused CSS cannot strip the moving parts.
 *
 * LAYOUTS:
 *   layout-1  — dark strip, text ticker  (always animated)
 *   layout-2  — light strip, logo ticker (always animated)
 *   layout-3  — Certifications grid  (static desktop / scroll on mobile)
 *   layout-4  — Alliances bento grid (static desktop / scroll on mobile)
 *   layout-5  — Compliance grid      (same as layout-3; static desktop / scroll on mobile)
 * ========================================================================== */

.imea-marquee { padding: 35px 0; overflow: hidden; }

/* ---- ticker viewport (layout-1 / layout-2) ------------------------------- */
.imea-marquee__viewport {
	position: relative; overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.imea-marquee__track {
	display: flex; align-items: center; gap: 72px;
	width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform;
}
.imea-marquee__item { height: 60px; flex: 0 0 auto; display: flex; align-items: center; }
.imea-marquee__item img {
	display: block; height: 80px; width: auto;
	filter: grayscale(1) brightness(1.6); opacity: .75;
	transition: opacity .2s ease, filter .2s ease;
}
.imea-marquee__item img:hover { filter: none; opacity: 1; }
.imea-marquee__item span { font-size: .95rem; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.55); white-space: nowrap; }

.imea-marquee--layout-2 {background: rgba(7,19,15,1);padding: 20px 0px;}
.imea-marquee--layout-2 .imea-marquee__item img { filter: grayscale(1); opacity: .7; }
.imea-marquee--layout-2 .imea-marquee__item img:hover { filter: none; opacity: 1; }
.imea-marquee--layout-2 .imea-marquee__item span { color: rgba(13,27,20,.55); }

/* ==========================================================================
 * layout-3 / layout-4 / layout-5 — grid variants
 * ========================================================================== */
.imea-marquee--grid { position: relative; padding: 0; background: #000; }
.imea-marquee--grid .imea-marquee__inner {
	position: relative;
	z-index: 1;
	/* max-width: 1258px; */
	margin: 0 auto;
	/* padding-left: clamp(20px, 4vw, 64px); */
	/* padding-right: clamp(20px, 4vw, 64px); */
}

/* Certifications (layout-3) + Compliance (layout-5): dark + soft green glow top-right */
.imea-marquee--layout-3,
.imea-marquee--layout-5 {
	background: radial-gradient(60% 70% at 78% 0%, rgba(33,165,94,.18) 0%, rgba(0,0,0,0) 60%), #000;
}
/* Alliances (layout-4): background image + 91deg black→transparent gradient */
.imea-marquee--layout-4 {
	background:
		linear-gradient(91deg, rgba(0,0,0,.80) 6.35%, rgba(102,102,102,0) 97.92%),
		url("../svg/marquee-bg.png") #000 50% / cover no-repeat;
}

/* Header */
.imea-marquee__head { max-width: 640px; }
.imea-marquee__eyebrow {
	display: inline-block; margin-bottom: 16px;
	font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--primary-color, #22b573);
}
.imea-marquee__title { margin: 0 0 18px; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; font-weight: 400; color: #fff; }
.imea-marquee__desc { margin: 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.72); }

/* Cells */
.imea-marquee__grid { margin: 0; padding: 0; list-style: none; }
.imea-marquee__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: end;
	gap: 10px;
	/* min-height: 150px; */
	/* padding: 28px 0px; */
	text-align: center;
	/* border-right: 1px solid rgba(255,255,255,.08); */
	/* border-bottom: 1px solid rgba(255,255,255,.08); */
	/* height: 100%; */
}
.imea-marquee__cell-logo {/* display: inline-flex; *//* align-items: center; */justify-content: center;/* height: 56px; */}
section.imea-marquee--layout-4 .imea-marquee__cell-logo img {
    height: 140px;
}
.imea-marquee__cell-logo img {
	/* max-width: 185px; */
	width: 100%;
	/* height: 100px; */
	display: block;
	/* filter: grayscale(1) brightness(1.7); */
	/* opacity: .85; */
	transition: opacity .2s ease, filter .2s ease;
}
.imea-marquee__cell:hover .imea-marquee__cell-logo img { filter: none; opacity: 1; }
.imea-marquee__cell-logo--text { font-size: .95rem; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.6); }
.imea-marquee__cell-label { font-size: 15px; line-height: 1.3; color: rgba(255,255,255,.82); }

section.imea-marquee--layout-3 img,
section.imea-marquee--layout-5 img {
    height: 80px;
    margin-bottom: 50px;
}

.imea-marquee--layout-2 .imea-marquee__slide{
	display:flex; align-items:center; justify-content:center;
	min-height:64px;
}
.imea-marquee--layout-2 .imea-marquee__slide img{
	max-height: 70px;
	width:auto;
	max-width:150px;
	object-fit:contain;
	filter: grayscale(0) invert(1.6);
	opacity:.7;
	transition:filter .25s ease, opacity .25s ease;
}
.imea-marquee--layout-2 .imea-marquee__slide img:hover{
	/* filter:none; */
	opacity:1;
}
.imea-marquee--layout-2 .owl-carousel .owl-item{ display:flex; }

/* ------ DESKTOP layout (≥768px) ------------------------------------------ */
@media (min-width: 768px) {
	.imea-marquee--grid .imea-marquee__inner { padding-top: 90px; padding-bottom: 100px; }

	/* layout-3 / layout-5: header above a single 7-col logo row */
	.imea-marquee--layout-3 .imea-marquee__head,
	.imea-marquee--layout-5 .imea-marquee__head { margin-bottom: 56px; }
	.imea-marquee--layout-3 .imea-marquee__grid,
	.imea-marquee--layout-5 .imea-marquee__grid {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		/* border-top: 1px solid rgba(255,255,255,.08); */
		/* border-left: 1px solid rgba(255,255,255,.08); */
	}

	/* layout-4: bento — header spans first 4 cols, logos flow around it.
	   viewport-m + ul collapse (display:contents) so the <li> cells become
	   grid items of the 7-col .inner grid. */
	.imea-marquee--layout-4 .imea-marquee__inner {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		/* border-top: 1px solid rgba(255,255,255,.08); */
		/* border-left: 1px solid rgba(255,255,255,.08); */
	}
	.imea-marquee--layout-4 .imea-marquee__head {
		grid-column: 1 / 4;
		max-width: none;
		margin: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 45px 0px;
		/* border-right: 1px solid rgba(255,255,255,.08); */
		/* border-bottom: 1px solid rgba(255,255,255,.08); */
	}
	.imea-marquee--layout-4 .imea-marquee__viewport-m,
	.imea-marquee--layout-4 .imea-marquee__grid { display: contents; }
}

/* ------ MOBILE (≤767px): grid → scrolling marquee ------------------------- */
@media (max-width: 767.98px) {
	.imea-marquee--grid .imea-marquee__inner { padding-top: 48px; padding-bottom: 56px; }
	.imea-marquee__head { max-width: none; margin-bottom: 32px; }
	.imea-marquee__item img {
		height: 40px;
	}
	/* clip + edge-fade the scroll row */
	.imea-marquee__viewport-m {
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
		mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
		/* let the row bleed to the screen edges */
		margin-left: calc( -1 * clamp(20px, 4vw, 64px) );
		margin-right: calc( -1 * clamp(20px, 4vw, 64px) );
	}
	.imea-marquee__grid {
		display: flex; flex-wrap: nowrap; width: max-content; will-change: transform;
	}
	.imea-marquee__cell {
		flex: 0 0 auto; width: 160px; min-height: 130px; border: 0;
	}
}

@media (max-width: 575.98px) { .imea-marquee__track { gap: 44px; } }

@media (prefers-reduced-motion: reduce) {
	.imea-marquee__item img { transition: none; }
	.imea-marquee__grid { transform: none !important; }
}