/* 6.2 Phone carousel at the top of every page. Desktop is untouched: nothing here applies above 1000px.
   New UI uses its own mcar-* classes. The last block only reorders existing hero carousels on phones,
   as the client asked ("on mobile every page has the image carousel on top, not text"). */

.mcar { display: none; }

@media (max-width: 1000px) {
	.mcar { display: block; position: relative; margin: 0 0 var(--s-5); }
	.mcar__track {
		display: flex; gap: var(--s-3);
		overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
		padding: 0 var(--gutter) var(--s-2);
		scrollbar-width: none; -ms-overflow-style: none;
	}
	.mcar__track::-webkit-scrollbar { display: none; }
	.mcar__item { flex: 0 0 min(64vw, 300px); scroll-snap-align: start; }
	.mcar__item .lhr-media { box-shadow: var(--shadow); }
	.mcar__bar { display: flex; justify-content: flex-end; padding: var(--s-2) var(--gutter) 0; }
	.mcar__pause { width: 36px; height: 36px; border: 1.5px solid var(--rule); border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
	.mcar__pause::before { content: ""; width: 10px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
	.mcar__pause[aria-pressed="true"]::before { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }

	/* The carousel sits at the very top of its hero: pull it up into the hero's top padding. */
	.phero > .mcar:first-child { margin-top: calc(-1 * var(--s-5)); }
	.blog-hero > .mcar:first-child, .article__head > .mcar:first-child { margin-top: calc(-1 * var(--s-5)); }
	/* About: the single desktop portrait gives way to the carousel on phones. */
	.mcar + .wrap .phero__media { display: none; }

	/* Existing hero carousels (home, service pages, hair replacement) go first on phones.
	   With the carousel on top, the home hero's decorative gold line would run through the buttons, so it rests on phones. */
	.hero__in > .hero__rail, .phero__in > .phero__rail { order: -1; }
	.hero > .hero__line { display: none; }
}

@media (max-width: 1000px) and (prefers-reduced-motion: reduce) {
	.mcar__track { scroll-behavior: auto; }
}