/* NoirMusk home — testimonials ("Voices of Noir Musk").
   A two-column block (photo left, quotes right) that flows like every other section of the site: the label and the
   heading use the site sizes (14px label, 36px heading), the quote is 22px (18px on phones). On tablets and phones
   the photo sits on top and the quotes follow. */

.noirmusk-tm {
	--tm-serif: var(--theme-heading-font-family), 'Times New Roman', Times, serif;
	--tm-sans: var(--theme-body-font-family), 'Inter', sans-serif;
	--tm-gold: #b58a54;
	--tm-ink: #14110c;
	--tm-grey: #7d766a;
	position: relative;
	width: 100%;
	background: #f7f2e8;
	color: var(--tm-ink);
	overflow: hidden;
}

/* main row: image + panel */
.noirmusk-tm__main {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
	min-height: 540px;
}
.noirmusk-tm__media {
	position: relative;
	overflow: hidden;
	background: #0a0a0a;
}
.noirmusk-tm__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}
.noirmusk-tm__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 70px clamp(32px, 5vw, 96px) 70px clamp(32px, 5vw, 90px);
	background: #f7f2e8;
}

/* label + heading (sizes come from section-type.css: 14px label, 36px heading) */
.noirmusk-tm__eyebrow {
	display: block;
	margin-bottom: 10px;
	font-family: var(--tm-sans);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.8;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #a3703f;
}
.noirmusk-tm__title {
	margin: 0 0 28px;
	padding: 0;
	font-family: var(--tm-serif);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tm-ink);
}
.noirmusk-tm__mark {
	display: block;
	height: 26px;
	margin: 0 0 6px;
	font-family: var(--tm-serif);
	font-size: 56px;
	font-weight: 700;
	line-height: 0.85;
	color: var(--tm-gold);
	user-select: none;
}
.noirmusk-tm__rule {
	display: none;
}

/* quotes: stacked in one grid cell, the active one shows */
.noirmusk-tm__slides {
	display: grid;
	padding-left: 24px;
	border-left: 2px solid #ae8c61;
}
.noirmusk-tm__slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	grid-template-areas: "stars stars" "quote quote" "avatar author";
	column-gap: 16px;
	align-items: center;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
}
.noirmusk-tm__slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.55s ease 0.1s, transform 0.55s ease 0.1s, visibility 0s;
}
.noirmusk-tm__stars {
	grid-area: stars;
	display: flex;
	gap: 4px;
	margin-bottom: 14px;
}
.noirmusk-tm__star {
	display: block;
	width: 20px;
	height: 20px;
	fill: var(--tm-gold);
}
.noirmusk-tm__quote {
	grid-area: quote;
	margin: 0 0 24px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--tm-serif);
	font-size: 22px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	color: var(--tm-ink);
}
.noirmusk-tm__quote::before,
.noirmusk-tm__quote::after {
	content: none;
}
.noirmusk-tm__avatar {
	grid-area: avatar;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #decbc1;
	font-family: var(--tm-serif);
	font-size: 19px;
	line-height: 1;
	font-weight: 400;
	color: var(--tm-ink);
}
.noirmusk-tm__author {
	grid-area: author;
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin: 0;
}
.noirmusk-tm__name {
	font-family: var(--tm-sans);
	font-size: 16px;
	line-height: 1.4;
	font-weight: 600;
	color: #17140d;
}
.noirmusk-tm__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-family: var(--tm-sans);
	font-size: 14px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--tm-grey);
}
.noirmusk-tm__divider {
	display: block;
	flex: none;
	width: 1px;
	height: 14px;
	margin: 0 14px;
	background: #d9cdbd;
}

/* controls: counter, progress, arrows */
.noirmusk-tm__controls {
	display: flex;
	align-items: center;
	align-self: flex-end;
	height: 46px;
	margin-top: 34px;
}
.noirmusk-tm__counter {
	margin-right: 20px;
	font-family: var(--tm-sans);
	font-size: 14px;
	line-height: 1.3;
	letter-spacing: -0.2px;
	font-weight: 400;
	font-variant-numeric: tabular-nums;
	color: #6e685f;
	white-space: nowrap;
}
.noirmusk-tm__track {
	position: relative;
	flex: none;
	width: 110px;
	height: 2px;
	margin-right: 22px;
	background: #d2cbc0;
}
.noirmusk-tm__fill {
	position: absolute;
	left: 0;
	top: -0.5px;
	width: 32%;
	height: 3px;
	background: #9f7f55;
	transition: width 0.5s ease;
}
.noirmusk-tm__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 2px solid #c9b8a3;
	border-radius: 50%;
	background: transparent;
	color: #6d5639;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}
.noirmusk-tm__btn--next {
	margin-left: 12px;
}
.noirmusk-tm__btn svg {
	display: block;
	width: 10px;
	height: 18px;
}
.noirmusk-tm__btn:hover {
	background: #a3703f;
	border-color: #a3703f;
	color: #fff;
}
.noirmusk-tm__btn:focus-visible {
	outline: 2px solid #a3703f;
	outline-offset: 3px;
}

/* bottom strip */
.noirmusk-tm__strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 36px;
	padding: 24px 20px;
	box-sizing: border-box;
	background: #fbfaf3;
}
.noirmusk-tm__line,
.noirmusk-tm__dot {
	display: none;
}
.noirmusk-tm__stat {
	font-family: var(--tm-sans);
	font-size: 13px;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #24221b;
	text-align: center;
}

/* tablet / phone: photo on top, quotes below */
@media (max-width: 1199px) {
	.noirmusk-tm__main {
		display: block;
		min-height: 0;
	}
	.noirmusk-tm__media {
		width: 100%;
		aspect-ratio: 790 / 560;
		max-height: 520px;
	}
	.noirmusk-tm__panel {
		padding: 56px 20px 60px;
	}
	.noirmusk-tm__title {
		font-size: clamp(25px, 12px + 3.6vw, 36px);
		margin-bottom: 24px;
	}
}
@media (max-width: 767px) {
	.noirmusk-tm__media {
		aspect-ratio: 4 / 3;
	}
	.noirmusk-tm__panel {
		padding: 70px 20px;
	}
	.noirmusk-tm__slides {
		padding-left: 16px;
	}
	.noirmusk-tm__slide {
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 14px;
	}
	.noirmusk-tm__quote {
		font-size: 18px;
		line-height: 1.6;
		margin-bottom: 20px;
	}
	.noirmusk-tm__avatar {
		width: 48px;
		height: 48px;
		font-size: 17px;
	}
	.noirmusk-tm__name {
		font-size: 15px;
	}
	.noirmusk-tm__meta {
		flex-direction: column;
		align-items: flex-start;
		font-size: 13px;
	}
	.noirmusk-tm__divider {
		display: none;
	}
	.noirmusk-tm__controls {
		align-self: stretch;
		justify-content: space-between;
		margin-top: 28px;
	}
	.noirmusk-tm__track {
		flex: 1;
		width: auto;
		margin: 0 18px;
	}
	.noirmusk-tm__strip {
		gap: 6px 18px;
		padding: 22px 20px;
	}
	.noirmusk-tm__stat {
		font-size: 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.noirmusk-tm__slide,
	.noirmusk-tm__slide.is-active,
	.noirmusk-tm__fill {
		transition: none;
	}
}