/* Marquee logo row — layout and static typography.
   assets/js/marquee.js owns the row build and the GSAP autoplay loop
   (track xPercent tween plus icon rotation); this file only supplies the
   geometry those rows animate inside of, the edge fade, and the intro
   text's eyebrow-label styling (AGENTS.md §9.3 — mono, uppercase, weight
   500, but at `base` (16px) rather than `s` per
   docs/step-9-marquee-section.md's explicit measured value; see the task
   report for the size recommendation).

   Two overflow:hidden clips exist, matching the reference exactly:
   .idia-marquee__content clips the row so it cannot push the intro column
   out of view before JS ever runs; .idia-marquee__logo-block is the inner
   clip the track itself scrolls inside. Both must stay in place even with
   JavaScript disabled — the authored row is valid, correctly clipped
   content with zero script.

   Section padding (`20px 0 0`, every breakpoint) is set inline in the
   pattern via the spacing|20 token, not here — see marquee-logos.php.
   Content padding steps per breakpoint below; the dashed border sits on
   .idia-marquee__content specifically so it hugs the padded box inside the
   section's 20px top offset, not the section's own outer edge. */

.idia-marquee__content {
	overflow: hidden;
	padding-top: var(--wp--preset--spacing--24);
	padding-right: 0;
	padding-bottom: var(--wp--preset--spacing--24);
	padding-left: var(--wp--custom--marquee--content-left);
	border-top: 1px dashed var(--wp--preset--color--border-light);
	border-bottom: 1px dashed var(--wp--preset--color--border-light);
}

/* Projects page modifier — the reference's .marquee-section.projects sets
   padding-top:0 (every other property, including the dashed borders, the
   24px vertical/gap-64 rhythm and all three logo rows, is identical to the
   homepage's). idia/marquee-logos itself sets padding-top:var(spacing|20)
   as a block attribute (inline style, wins any plain class), so this page
   wraps the pattern reference in a group carrying
   .idia-marquee-projects rather than forking the pattern file — see
   templates/page-projects.html for how it's inserted, and that file's own
   comment for why this class uses a single hyphen rather than the site's
   usual BEM double-hyphen modifier (a className block attribute containing
   "--" fails Site Editor block validation).
   !important overrides the block-attribute inline style the same way
   contact-hero.css's badge/nav overrides do, for the same reason: the
   padding is a block attribute so it stays editable in the Dimensions
   panel, and only !important can out-rank an inline style. */
.idia-marquee-projects .idia-marquee {
	padding-top: 0 !important;
}

/* min-width is the documented floor (docs/step-9-marquee-section.md); the
   reference additionally caps intro width so the sentence wraps to two
   lines rather than stretching to fill whatever space is free — reproduced
   here via max-width on the text itself (below) rather than a second raw
   px value on the group. flex:0 1 auto lets the group shrink down to that
   floor at narrower widths without ever growing to claim space the logo
   track needs. */
.idia-marquee__intro {
	min-width: 300px;
	flex: 0 1 auto;
}

.idia-marquee__icon {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	/* will-change primes the compositor for the continuous autoplay
	   rotation; harmless when prefers-reduced-motion skips the tween
	   entirely, since an un-rotated element costs nothing extra to
	   composite. */
	will-change: transform;
}

.idia-marquee__icon svg {
	display: block;
}

.idia-marquee__intro-text {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--base);
	font-weight: var(--wp--custom--font-weight--medium);
	color: var(--wp--preset--color--secondary);
	text-transform: uppercase;
	letter-spacing: normal;
	margin: 0;
	/* Reference wraps this line to two rows at a ~360px column rather than
	   stretching to fill free space (docs/step-9-marquee-section.md measures
	   .marquee-intro at width 360). No existing --measure-- token targets
	   this width; `caption` (375px) is the closest and is reused here rather
	   than inventing a new one — flag if a dedicated token is wanted. */
	max-width: var(--wp--custom--measure--caption);
	flex: 1 1 auto;
	min-width: 0;
}

.idia-marquee__logo-block {
	position: relative;
	overflow: hidden;
	flex: 1 1 0%;
	min-width: 0;
}

.idia-marquee__logo-container {
	will-change: transform;
}

/* The one authored row plus every clone marquee.js appends share this
   class, so a single rule sizes them all identically without JS having to
   set inline dimensions. Each row gets its own xPercent tween (see
   marquee.js) rather than the container being translated as a whole, so
   will-change lives here rather than on the container. */
.idia-marquee__logos-row {
	flex-shrink: 0;
	will-change: transform;
}

/* Edge fade — two real absolutely positioned elements, not a CSS mask or
   filter, matching the reference exactly (docs/step-9-marquee-section.md).
   Both span the track's full height and sit inside .idia-marquee__logo-block,
   which is position:relative above for this reason. Width steps from 120px
   at 1440 to 60px at 991/767/479 via --wp--custom--marquee--gradient-width
   (style.css breakpoint overrides). The white here is the `base` preset —
   if the section's background is ever changed from white, these two
   gradients must change with it, since they hardcode that colour as their
   fade target rather than reading it from the section. */
/* z-index:1 is required: the gradients stay first in DOM order (deliberate —
   see the pattern), so with every element at the default z-index:auto,
   document order alone would paint the logo track over them. Raising just
   the gradients here keeps the block markup in an order the site owner can
   read normally in the Site Editor. */
.idia-marquee__gradient {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: var(--wp--custom--marquee--gradient-width);
	background: linear-gradient(90deg, var(--wp--preset--color--base), rgba(255, 255, 255, 0));
	pointer-events: none;
}

.idia-marquee__gradient.is-right {
	left: auto;
	right: 0;
	background: linear-gradient(270deg, var(--wp--preset--color--base), rgba(255, 255, 255, 0) 83%, rgba(255, 255, 255, 0));
}

.idia-marquee__logo img {
	display: block;
	width: 158px;
	height: 48px;
}

@media (max-width: 991px) {

	.idia-marquee__intro {
		min-width: 300px;
	}
}

@media (max-width: 767px) {

	/* !important: WordPress prints this block's own align-items:center as
	   inline block-support CSS (.wp-container-core-group-is-layout-*),
	   generated per-instance after every enqueued theme stylesheet, so a
	   plain class rule here loses the specificity fight — same mechanism
	   documented in header.css for .idia-header__inner. */
	.idia-marquee__content {
		flex-direction: column;
		align-items: flex-start !important;
		padding-top: var(--wp--preset--spacing--18);
		padding-bottom: var(--wp--preset--spacing--18);
	}

	.idia-marquee__intro {
		min-width: 250px;
	}

	.idia-marquee__icon {
		width: 32px;
		height: 32px;
	}

	.idia-marquee__intro-text {
		text-transform: none;
		font-weight: var(--wp--custom--font-weight--regular);
	}
}

@media (max-width: 479px) {

	.idia-marquee__content {
		padding-top: var(--wp--preset--spacing--16);
		padding-bottom: var(--wp--preset--spacing--16);
	}

	.idia-marquee__intro {
		padding-right: var(--wp--preset--spacing--20);
	}

	.idia-marquee__intro-text {
		text-transform: uppercase;
	}

	.idia-marquee__logo img {
		width: 120px;
		height: auto;
	}
}

/* Reduced motion: marquee.js builds no extra rows and starts no tween when
   this is requested, so the authored row and the icon simply render at rest
   here — nothing to override. */

/* ---- Intro line entrance — starting state ----
   Reproduces stodio's own "slideInLeft" reveal (opacity + translateX only,
   no blur — a different, simpler preset than the hero/CTA "Fade In" family;
   see .agents/skills/webflow-clone/state/animation-map-remaining-sections.json,
   marquee.slideInLeft). The phase-1 values are set directly in CSS, matching
   hero-card.css's own trick, so there is never a flash of the finished intro
   line before marquee.js's ScrollTrigger fires. Scoped to .idia-marquee__intro
   only — the logo loop itself has no entrance, it is a continuous autoplay
   loop unrelated to scroll position (see marquee.js's own header comment).
   Opt-in only: scoped to prefers-reduced-motion: no-preference, so a
   reduced-motion visitor sees the intro line already settled — marquee.js
   independently checks the same media query before running this tween. */
@media (prefers-reduced-motion: no-preference) {

	.idia-marquee__intro {
		opacity: 0;
		transform: translateX(-100px);
	}
}