/**
 * Maison Lune People (Figma Home "People" and Story "People").
 *
 * card (Home): desktop 640 high, full-bleed photo with a 480 card (radius 16, padding 48) at the
 * right of the container, vertically centred; people stacked (48 monogram, name 24, role, line 15).
 * Tablet: photo 520 on top, sand panel (56/32) with the people in two columns. Phone: photo 500,
 * panel 48/20/32, people stacked.
 * columns (Our story): eyebrow, title 56, line; two columns with a top rule, 88 monograms,
 * name 32, line 17 muted. Phone: one column, 72 monograms.
 */

/* ------------------------------------------------------------------ */
/* Shared                                                             */
/* ------------------------------------------------------------------ */

.ml-team__title {
	font-family: var(--ml-serif);
	font-weight: 400;
	color: var(--ml-heading);
}

.ml-team__eyebrow {
	margin-bottom: 16px;
	color: var(--ml-heading);
	font-weight: 400;
}

.ml-team__text {
	margin-top: 16px;
	color: var(--ml-muted);
	font-size: var(--ml-fs-lead);
	line-height: var(--ml-lh-lead);
}

.ml-team__monogram {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ml-heading);
	border-radius: 50%;
	color: var(--ml-heading);
	font-family: var(--ml-serif);
	font-weight: 400;
	white-space: nowrap;
}

.ml-team__name {
	font-family: var(--ml-serif);
	font-weight: 400;
	color: var(--ml-heading);
}

.ml-team__role {
	color: var(--ml-muted);
}

.ml-team__line {
	color: var(--ml-text);
}

/* ------------------------------------------------------------------ */
/* Card on a photo (Home)                                             */
/* ------------------------------------------------------------------ */

.ml-team--card {
	overflow: hidden;
}

.ml-team__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: var(--ml-c-dark);
}

.ml .ml-team__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.ml-team__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: min(var(--ml-max), 100% - 2 * var(--ml-gutter));
	min-height: 640px;
	margin-inline: auto;
	padding-top: var(--ml-pad-t, 80px);
	padding-bottom: var(--ml-pad-b, 80px);
}

.ml-team__card {
	width: 480px;
	max-width: 100%;
	padding: 48px;
	border-radius: var(--ml-radius-panel);
	background: var(--ml-bg);
}

.ml-team--card .ml-team__head {
	margin-bottom: 28px;
}

.ml-team--card .ml-team__title {
	font-size: 40px;
	line-height: 45px;
}

.ml-team--card .ml-team__people {
	display: grid;
	gap: 24px;
}

/* Monogram at the left, name, role and line stacked beside it. */
.ml-team--card .ml-team__person {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
}

.ml-team--card .ml-team__identity {
	display: contents;
}

.ml-team--card .ml-team__monogram {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 48px;
	height: 48px;
	font-size: 18px;
	line-height: 18px;
}

.ml-team--card .ml-team__who,
.ml-team--card .ml-team__line {
	grid-column: 2;
	min-width: 0;
}

.ml-team--card .ml-team__name {
	font-size: 24px;
	line-height: 29px;
}

.ml-team--card .ml-team__role {
	margin-top: 4px;
}

.ml-team--card .ml-team__line {
	margin-top: 4px;
	font-size: 15px;
	line-height: 23px;
}

/* ------------------------------------------------------------------ */
/* Columns with a rule (Our story)                                    */
/* ------------------------------------------------------------------ */

.ml-team--columns .ml-team__head {
	max-width: 690px;
	margin-bottom: 48px;
}

.ml-team--columns .ml-team__title {
	font-size: 56px;
	line-height: 63px;
}

.ml-team--columns .ml-team__people {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 24px;
}

.ml-team--columns .ml-team__person {
	min-width: 0;
	padding-top: 20px;
	border-top: 1px solid rgba(76, 39, 50, 0.3);
	border-top-color: color-mix(in srgb, var(--ml-heading) 30%, transparent);
}

.ml-team--columns .ml-team__identity {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 1px;
}

.ml-team--columns .ml-team__monogram {
	width: 88px;
	height: 88px;
	border-color: rgba(76, 39, 50, 0.4);
	border-color: color-mix(in srgb, var(--ml-heading) 40%, transparent);
	font-size: 32px;
	line-height: 36px;
}

.ml-team--columns .ml-team__who {
	min-width: 0;
}

.ml-team--columns .ml-team__name {
	font-size: 32px;
	line-height: 36px;
}

.ml-team--columns .ml-team__role {
	margin-top: 8px;
	font-weight: 400;
}

.ml-team--columns .ml-team__line {
	margin-top: 20px;
	color: var(--ml-muted);
	font-size: 17px;
	line-height: 26px;
}

/* ------------------------------------------------------------------ */
/* Tablet (834)                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	/* The panel under the photo is sand on the paper palette (Figma). */
	.ml--paper.ml-team--card {
		--ml-panel-bg: var(--ml-c-sand);
	}

	.ml-team__media {
		position: relative;
		inset: auto;
		height: 520px;
	}

	.ml-team__inner {
		display: block;
		width: auto;
		min-height: 0;
		margin: 0;
		padding: var(--ml-pad-t, 56px) var(--ml-gutter) var(--ml-pad-b, 56px);
		background: var(--ml-panel-bg, var(--ml-bg));
	}

	.ml-team__card {
		width: auto;
		padding: 0;
		border-radius: 0;
		background: transparent;
	}

	.ml-team--card .ml-team__people {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ml-team--columns .ml-team__title {
		font-size: 48px;
		line-height: 54px;
	}
}

/* ------------------------------------------------------------------ */
/* Phone (390)                                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.ml-team--columns {
		--ml-section-pad: 32px;
	}

	.ml-team__media {
		height: 500px;
	}

	.ml-team__inner {
		padding: var(--ml-pad-t, 48px) var(--ml-gutter) var(--ml-pad-b, 32px);
	}

	.ml-team--card .ml-team__title {
		font-size: 32px;
		line-height: 36px;
	}

	.ml-team--card .ml-team__people,
	.ml-team--columns .ml-team__people {
		grid-template-columns: minmax(0, 1fr);
	}

	.ml-team__eyebrow {
		margin-bottom: 12px;
	}

	.ml-team__text {
		margin-top: 12px;
		font-size: 16px;
		line-height: 24px;
	}

	.ml-team--columns .ml-team__head {
		margin-bottom: 32px;
	}

	.ml-team--columns .ml-team__title {
		font-size: 36px;
		line-height: 40px;
	}

	.ml-team--columns .ml-team__monogram {
		width: 72px;
		height: 72px;
		font-size: 28px;
		line-height: 31px;
	}

	.ml-team--columns .ml-team__name {
		font-size: 28px;
		line-height: 31px;
	}

	.ml-team--columns .ml-team__line {
		font-size: 16px;
		line-height: 24px;
	}
}