/* ============================================================================
 * Image Marquee — backend-managed photo band that auto-scrolls horizontally.
 * Rendered by template-parts/content-sections.php (image_marquee layout).
 *
 * Interaction:
 *   - CSS-only marquee: the viewport holds TWO identical tracks; translating
 *     it -50% loops seamlessly (same mechanism as the events marquee in
 *     css/ba-top-bars.css).
 *   - Hover / keyboard-focus anywhere in the row PAUSES the scroll.
 *   - Hovering a photo ZOOMS it in (~1.06) within its rounded frame; the card
 *     lifts slightly. Transform-only, so neighbours never shift.
 *   - prefers-reduced-motion => no animation, no zoom; becomes a static,
 *     horizontally scrollable row (single track).
 *
 * Cohesive with the theme's modern navy system (calendar_list / ba-upcoming-
 * markets / ba-top-bars):
 *   navy #113c61 · navy-deep #0d2c48 · sky #25a7ce/#1268a1 · amber #ffa41b
 *   ink #12303f · white #fff
 * The band is a deep navy; the camera eyebrow carries the warm amber accent and
 * the title is white, so the section reads as part of the same intentional
 * system as the dark top bars.
 *
 * NOTE: theme root is html{font-size:62.5%} => 1rem = 10px. Sizes are authored
 * on that 10px scale.
 * ========================================================================== */

/* ---- Band -------------------------------------------------------------------
 * Default deep-navy. A per-section BG Color (ACF) prints as an inline
 * background-color and cleanly overrides this. overflow:hidden clips the
 * full-bleed marquee's faded edges to the band. */
.ba-image-marquee{
	background-color:#0d2c48;
	color:#eaf2f8;
	overflow:hidden;
}

/* ---- Section head (inside .container) -------------------------------------- */
.ba-imarq__head{ text-align:center; max-width:72rem; margin:0 auto 4rem; }
.ba-imarq__eyebrow{
	display:inline-flex; align-items:center; gap:.75rem;
	font-size:1.25rem; font-weight:700; line-height:1;
	letter-spacing:.14em; text-transform:uppercase; color:#9fe0f4;
	background:rgba(37,167,206,.14); padding:.7rem 1.5rem; border-radius:4rem;
	margin-bottom:1.8rem;
}
.ba-imarq__cam{ width:1.7rem; height:1.7rem; color:#ffb23e; flex:0 0 auto; }
.ba-imarq__eyebrow-txt{ transform:translateY(.05em); } /* optical baseline with the icon */
.ba-imarq__title{
	font-size:4rem; line-height:1.1; font-weight:800; letter-spacing:-.01em;
	color:#fff; margin:0;
}

/* ---- Marquee shell (full-bleed, outside .container) ------------------------
 * padding gives the hover-zoom vertical breathing room inside the clip; the
 * mask softly fades both edges so cards don't hard-cut against the band. */
.ba-imarq__marquee{
	position:relative; overflow:hidden; padding:1.6rem 0;
	-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6rem, #000 calc(100% - 6rem), transparent 100%);
	        mask-image:linear-gradient(90deg, transparent 0, #000 6rem, #000 calc(100% - 6rem), transparent 100%);
}
.ba-imarq__viewport{
	display:flex; width:max-content;
	animation:ba-imarq-scroll var(--ba-imarq-speed,40s) linear infinite;
	will-change:transform;
}
/* pause on hover / keyboard focus anywhere in the row */
.ba-imarq__marquee:hover .ba-imarq__viewport,
.ba-imarq__viewport:focus-within{ animation-play-state:paused; }
/* direction: default travels left (Right -> Left); ltr travels right */
.ba-imarq--ltr .ba-imarq__viewport{ animation-direction:reverse; }

/* two identical tracks; spacing lives on the ITEM (not `gap`) so the seam
   between track 1 and track 2 matches the inter-card spacing exactly. */
.ba-imarq__track{
	display:flex; align-items:center; flex:0 0 auto;
	list-style:none; margin:0; padding:0;
}
.ba-imarq__track li{ margin:0; padding:0; }
.ba-imarq__track li::before,
.ba-imarq__track li::after{ content:none !important; } /* kill theme <li> bullets */
.ba-imarq__item{ flex:0 0 auto; padding:0 1rem; } /* => 2rem gaps, loop-seam safe */

/* ---- Photo cards ----------------------------------------------------------- */
.ba-imarq__card{
	position:relative; margin:0;
	width:32rem; height:24rem;
	border-radius:1.6rem; overflow:hidden;
	background:#0a2036; border:1px solid rgba(255,255,255,.08);
	box-shadow:0 1rem 2.4rem rgba(0,0,0,.30);
	transition:transform 300ms ease, box-shadow 300ms ease;
}
.ba-imarq__img{
	display:block; width:100%; height:100%; object-fit:cover;
	transition:transform 520ms cubic-bezier(.22,.61,.36,1);
}
/* raise the hovered item above neighbours, then zoom the photo + lift the card */
.ba-imarq__item:hover{ position:relative; z-index:2; }
.ba-imarq__item:hover .ba-imarq__img{ transform:scale(1.06); }
.ba-imarq__item:hover .ba-imarq__card{
	transform:translateY(-.4rem);
	box-shadow:0 1.6rem 3.6rem rgba(0,0,0,.46);
}

@keyframes ba-imarq-scroll{
	from{ transform:translateX(0); }
	to{ transform:translateX(-50%); }
}

/* ---- Accessibility: no motion => static, single copy, horizontally scrollable */
@media (prefers-reduced-motion: reduce){
	.ba-imarq__marquee{
		-webkit-mask-image:none; mask-image:none;
		overflow-x:auto; overflow-y:hidden;
		scrollbar-width:thin;
	}
	.ba-imarq__viewport{ animation:none; width:max-content; }
	.ba-imarq__track[aria-hidden="true"]{ display:none; }
	.ba-imarq__item:hover .ba-imarq__img{ transform:none; }
	.ba-imarq__item:hover .ba-imarq__card{ transform:none; }
}

/* ---- Tablet ---------------------------------------------------------------- */
@media (max-width:900px){
	.ba-imarq__title{ font-size:3.2rem; }
	.ba-imarq__head{ margin-bottom:3.2rem; }
	.ba-imarq__card{ width:28rem; height:21rem; }
}

/* ---- Mobile ---------------------------------------------------------------- */
@media (max-width:600px){
	.ba-imarq__head{ margin-bottom:2.6rem; }
	.ba-imarq__eyebrow{ font-size:1.1rem; letter-spacing:.1em; padding:.6rem 1.2rem; }
	.ba-imarq__title{ font-size:2.6rem; }
	.ba-imarq__marquee{ padding:1.2rem 0;
		-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 2.4rem, #000 calc(100% - 2.4rem), transparent 100%);
		        mask-image:linear-gradient(90deg, transparent 0, #000 2.4rem, #000 calc(100% - 2.4rem), transparent 100%);
	}
	.ba-imarq__item{ padding:0 .7rem; }
	.ba-imarq__card{ width:22rem; height:16.5rem; border-radius:1.2rem; }
}