/* ========================================================================================
 * marquee.css - .marquee > .marquee__track > items (L2 layer).
 * Ported from .cd-promo/.cd-promo-track (docs/design-source/homepage-template.html, search
 * ".cd-promo"). The design source duplicates the whole track as two sibling elements;
 * site.js's initMarquee() instead clones .marquee__track's own children once (simpler DOM,
 * same seamless-loop effect), so the keyframe here travels -50% of the now-doubled track
 * instead of the source's -100%.
 * --marquee-duration (default 32s) sets one loop's length.
 * ======================================================================================== */

.marquee{
	background:var(--cd-accent);color:var(--cd-accent-ink);
	overflow:hidden;padding-block:var(--cd-2);
	display:flex;align-items:center;
}
.marquee__track{
	display:flex;flex:none;gap:var(--cd-8);padding-right:var(--cd-8);
	font-size:var(--cd-small);font-weight:700;white-space:nowrap;
	animation:marquee-scroll var(--marquee-duration,32s) linear infinite;
}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee-scroll{to{transform:translateX(-50%)}}

/* --- --link: whole bar wrapped in an <a> (header.php's promo banner) ------------------- */
.marquee--link{text-decoration:none}

@media (prefers-reduced-motion:reduce){
	.marquee{justify-content:center;padding-inline:var(--cd-4)}
	.marquee__track{animation:none;padding-right:0;white-space:normal;text-align:center}
	.marquee__track > *:nth-child(n+2){display:none}
}

/* --- --photos: a photo reel ([tmj_photo_reel], inc/shortcodes.php) ----------------------
 * Same track, loop and hover pause; the items are photos at one fixed height (their own
 * width follows their ratio), rounded like the kit's framed photos, on no background.
 * The reel runs edge to edge of its container. Under reduced motion it does not move: the
 * track becomes a static row the visitor scrolls sideways (with scroll snapping), and every
 * photo stays visible (the base rule above keeps only the first item of a text marquee).
 * Photos are the track's direct children with no wrapper, and the reduced-motion override
 * targets them by class, never by position, so an injected <noscript> sibling cannot shift it.
 * ----------------------------------------------------------------------------------------- */
.marquee--photos{background:none;color:inherit;padding-block:0;border-radius:var(--cd-r-lg)}
.marquee--photos .marquee__track{gap:var(--cd-4);padding-right:var(--cd-4)}
.marquee__photo{display:block;flex:none;width:auto;height:clamp(180px,24vw,300px);border-radius:var(--cd-r-md);object-fit:cover;box-shadow:var(--cd-shadow-1)}
@media (prefers-reduced-motion:reduce){
	.marquee--photos{justify-content:flex-start;padding-inline:0;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
	.marquee--photos .marquee__track{white-space:nowrap;padding-right:0}
	.marquee--photos .marquee__track > .marquee__photo{display:block;scroll-snap-align:start}
}