/**
 * The only file in this theme allowed to contain a media query.
 * Breakpoints per the handoff: 1024 (speaker cards 2-up), 1080 (nav → burger),
 * 900 (loose prints disappear), 768/680 (splits stack, gallery becomes a
 * scroller), 420 (single column). Also: marquee duration + mobile scroller mode.
 */

@media (max-width: 680px) {
	:root { --motion-marquee-duration: 48s; }

	/* The scroll container has to be the WRAPPER, not the track: the track's own
	   width is max-content (exactly as wide as its content, by design, for the
	   desktop marquee loop), so putting overflow-x:auto on the track itself gave
	   it nothing to overflow — its scrollWidth and clientWidth were identical and
	   nothing could ever scroll. The wrapper is block-level (viewport-width), so
	   overflow lives there while the track stays its natural, wider-than-viewport
	   width. */
	#gallery .magma-marquee {
		-webkit-mask-image: none; mask-image: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	#gallery .magma-marquee::-webkit-scrollbar { display: none; }
	#gallery .magma-marquee__track {
		animation: none !important;
		padding: 0 var(--layout-rail);
	}
	#gallery .magma-marquee__item { scroll-snap-align: start; }
	#gallery .magma-marquee__item[data-dup] { display: none; }
}

@media (max-width: 1080px) {
	.magma-masthead__nav { display: none; }
	.magma-burger { display: grid; }
}

@media (max-width: 1024px) {
	.magma-speakers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.magma-hero__decor { display: none; }
}

@media (max-width: 768px) {
	.magma-split { flex-direction: column; }
	.magma-split__col { flex-basis: auto; }
	.magma-sponsors__closing,
	.magma-agenda__cta,
	.magma-speakers__cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 680px) {
	.magma-lockup__line1,
	.magma-lockup__line2 { display: block; }
	.magma-hero__facts { gap: 8px; }
	.magma-speakers__grid { grid-template-columns: 1fr; }
	.magma-closing__inner { flex-direction: column; align-items: flex-start; }
	.magma-sponsor-row { flex-direction: column; align-items: flex-start; }
	.magma-sponsor-row__link { white-space: normal; }
}

@media (max-width: 420px) {
	.magma-form__grid { grid-template-columns: 1fr; }
	.magma-btn[data-size="page"] { width: 100%; }
	.magma-hero__cta { flex-direction: column; }
	.magma-hero__cta .magma-btn { width: 100%; }
}