/* =====================================================================
   Models MGNT — front-end styles
   Editorial / luxury direction: generous whitespace, wide tracking,
   hairline rules, restrained type.

   Colour model: all on-page text INHERITS the theme's text colour
   (via currentColor), so the plugin reads correctly on light OR dark
   themes. Only image overlays (hero / card captions) are pinned white,
   because they always sit on top of a photograph.
   ===================================================================== */

:root {
	/* Adaptive ink: derived from whatever colour the theme paints text. */
	--mgnt-ink: currentColor;
	--mgnt-ink-soft: color-mix(in srgb, currentColor 58%, transparent);
	--mgnt-line: color-mix(in srgb, currentColor 22%, transparent);
	--mgnt-line-soft: color-mix(in srgb, currentColor 12%, transparent);
	--mgnt-bg: transparent;
	--mgnt-overlay: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 38%, rgba(0,0,0,0) 72%);
	--mgnt-display: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
	--mgnt-body: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
	--mgnt-track: 0.26em;
	--mgnt-gap: clamp(10px, 1.6vw, 22px);
	--mgnt-pad: clamp(18px, 5vw, 64px);
}

.mgnt-directory,
.mgnt-profile { color: inherit; font-family: var(--mgnt-body); }

.mgnt-directory *,
.mgnt-profile * { box-sizing: border-box; }

/* ---------------------------------------------------------------------
   Directory filter
   --------------------------------------------------------------------- */
.mgnt-directory { padding: clamp(20px, 4vw, 48px) var(--mgnt-pad) clamp(40px, 8vw, 90px); }

.mgnt-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(14px, 3vw, 38px);
	margin: 0 0 clamp(28px, 5vw, 60px);
	padding-bottom: 18px;
	border-bottom: 1px solid var(--mgnt-line);
}
.mgnt-filter__btn {
	appearance: none;
	background: none;
	border: 0;
	padding: 4px 0;
	cursor: pointer;
	font-family: var(--mgnt-display);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mgnt-ink-soft);
	position: relative;
	transition: color .25s ease, opacity .25s ease;
}
.mgnt-filter__btn::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -19px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transition: transform .25s ease;
}
.mgnt-filter__btn:hover { color: inherit; }
.mgnt-filter__btn.is-active { color: inherit; }
.mgnt-filter__btn.is-active::after { transform: scaleX(1); }
.mgnt-filter__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------------------------------------------------------------------
   Directory grid + cards
   --------------------------------------------------------------------- */
.mgnt-grid--directory {
	display: grid;
	grid-template-columns: repeat(var(--mgnt-cols, 4), 1fr);
	gap: var(--mgnt-gap);
}

.mgnt-card { display: block; text-decoration: none; color: inherit; }
.mgnt-card__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: rgba(128,128,128,.14);
}
.mgnt-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
.mgnt-card:hover .mgnt-card__img { transform: scale(1.045); }

.mgnt-card__overlay {
	position: absolute;
	inset: 0;
	background: var(--mgnt-overlay);
	pointer-events: none;
}
.mgnt-card__caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 18px 16px 20px;
	text-align: center;
	color: #fff; /* on photo */
}
.mgnt-card__name {
	margin: 0 0 8px;
	font-family: var(--mgnt-display);
	font-weight: 300;
	font-size: clamp(15px, 1.3vw, 20px);
	letter-spacing: var(--mgnt-track);
	text-transform: uppercase;
	line-height: 1.1;
}
.mgnt-card__stats {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: 1.6;
	opacity: .92;
}
.mgnt-card__stats strong { font-weight: 700; }

.mgnt-noresults,
.mgnt-empty {
	text-align: center;
	color: var(--mgnt-ink-soft);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 40px 0;
}

/* ---------------------------------------------------------------------
   Single profile — hero
   --------------------------------------------------------------------- */
.mgnt-profile { overflow: hidden; }

.mgnt-hero {
	position: relative;
	width: 100%;
	height: clamp(420px, 86vh, 920px);
	background: #1a1a1a;
}
.mgnt-hero__media,
.mgnt-hero__img { width: 100%; height: 100%; display: block; }
.mgnt-hero__img { object-fit: cover; }

.mgnt-hero__gradient {
	position: absolute;
	inset: 0;
	background: var(--mgnt-overlay);
	pointer-events: none;
}
.mgnt-hero__caption {
	position: absolute;
	left: 0; right: 0; bottom: clamp(28px, 6vh, 70px);
	text-align: center;
	color: #fff; /* on photo */
	padding: 0 20px;
}
.mgnt-hero__name {
	margin: 0 0 14px;
	font-family: var(--mgnt-display);
	font-weight: 200;
	font-size: clamp(36px, 8vw, 104px);
	letter-spacing: clamp(.12em, 2vw, .34em);
	text-transform: uppercase;
	line-height: 1;
	color: #fff;
}
.mgnt-hero__stats {
	margin: 0;
	font-size: clamp(11px, 1.1vw, 14px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.mgnt-hero__stats strong { font-weight: 700; }

/* ---------------------------------------------------------------------
   Tabs
   --------------------------------------------------------------------- */
.mgnt-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(20px, 4vw, 56px);
	padding: clamp(26px, 4vw, 46px) var(--mgnt-pad);
	border-bottom: 1px solid var(--mgnt-line);
}
.mgnt-tab {
	appearance: none;
	background: none;
	border: 0;
	padding: 6px 0;
	cursor: pointer;
	font-family: var(--mgnt-display);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mgnt-ink-soft);
	position: relative;
	transition: color .25s ease;
}
.mgnt-tab::after {
	content: "";
	position: absolute;
	left: 50%; right: 50%; bottom: -1px;
	height: 1px;
	background: currentColor;
	transition: left .28s ease, right .28s ease;
}
.mgnt-tab:hover { color: inherit; }
.mgnt-tab.is-active { color: inherit; }
.mgnt-tab.is-active::after { left: 0; right: 0; }
.mgnt-tab:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---------------------------------------------------------------------
   Panels + galleries
   --------------------------------------------------------------------- */
.mgnt-panels { padding: clamp(26px, 5vw, 64px) var(--mgnt-pad) clamp(48px, 9vw, 110px); }
.mgnt-panel { display: none; }
.mgnt-panel.is-active { display: block; animation: mgnt-fade .5s ease; }

@keyframes mgnt-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.mgnt-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--mgnt-gap);
}
.mgnt-gallery--polaroids { grid-template-columns: repeat(4, 1fr); }

/* Gallery item is a <button> that opens the lightbox. */
.mgnt-gallery__item {
	appearance: none;
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	display: block;
	overflow: hidden;
	background: rgba(128,128,128,.14);
	cursor: zoom-in;
}
.mgnt-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}
.mgnt-gallery__item:hover img { transform: scale(1.04); opacity: .92; }
.mgnt-gallery__item:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.mgnt-gallery--polaroids .mgnt-gallery__item { aspect-ratio: 3 / 4; }

/* ---------------------------------------------------------------------
   Model info
   --------------------------------------------------------------------- */
.mgnt-info {
	max-width: 560px;
	margin: 0 auto;
}
.mgnt-info__block { margin-bottom: clamp(34px, 6vw, 56px); }
.mgnt-info__title {
	font-family: var(--mgnt-display);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: var(--mgnt-track);
	text-transform: uppercase;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--mgnt-line);
	color: inherit;
}
.mgnt-stats { margin: 0; }
.mgnt-stats__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 11px 0;
	border-bottom: 1px solid var(--mgnt-line-soft);
}
.mgnt-stats__row dt {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mgnt-ink-soft);
	margin: 0;
}
.mgnt-stats__row dd {
	margin: 0;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: inherit;
}

.mgnt-types {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}
.mgnt-types__item {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 8px 16px;
	border: 1px solid var(--mgnt-line);
	border-radius: 999px;
	color: inherit;
}

.mgnt-info__cta { text-align: center; margin-top: clamp(20px, 4vw, 34px); }
.mgnt-hire {
	display: inline-block;
	background: transparent;
	color: inherit;
	text-decoration: none;
	font-family: var(--mgnt-display);
	font-size: 12px;
	letter-spacing: var(--mgnt-track);
	text-transform: uppercase;
	padding: 17px 46px;
	border: 1px solid currentColor;
	transition: background .25s ease, transform .25s ease;
}
.mgnt-hire:hover {
	background: color-mix(in srgb, currentColor 14%, transparent);
	transform: translateY(-1px);
}
.mgnt-hire:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* ---------------------------------------------------------------------
   Reviews (collapsible)
   --------------------------------------------------------------------- */
.mgnt-reviews {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 var(--mgnt-pad) clamp(48px, 9vw, 110px);
}
.mgnt-reviews__toggle {
	width: 100%;
	appearance: none;
	background: none;
	border: 0;
	border-top: 1px solid var(--mgnt-line);
	border-bottom: 1px solid var(--mgnt-line);
	padding: 20px 4px;
	cursor: pointer;
	color: inherit;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: var(--mgnt-display);
	font-size: 13px;
	letter-spacing: var(--mgnt-track);
	text-transform: uppercase;
}
.mgnt-reviews__chevron {
	width: 9px;
	height: 9px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .3s ease;
	margin-top: -4px;
}
.mgnt-reviews__toggle[aria-expanded="false"] .mgnt-reviews__chevron {
	transform: rotate(-135deg);
	margin-top: 4px;
}
.mgnt-reviews__body {
	padding-top: clamp(24px, 4vw, 40px);
	display: grid;
	gap: clamp(22px, 4vw, 36px);
}
.mgnt-reviews__body[hidden] { display: none; }
.mgnt-review { margin: 0; }
.mgnt-review__rating {
	letter-spacing: 3px;
	font-size: 13px;
	margin-bottom: 10px;
	color: inherit;
}
.mgnt-review__text {
	margin: 0 0 12px;
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.6;
	font-style: italic;
	color: inherit;
}
.mgnt-review__author {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mgnt-ink-soft);
}
.mgnt-review__author span::before { content: " — "; }

/* ---------------------------------------------------------------------
   Lightbox
   --------------------------------------------------------------------- */
.mgnt-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8,8,8,.94);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}
.mgnt-lightbox.is-open { opacity: 1; visibility: visible; }
.mgnt-lightbox__img {
	max-width: 92vw;
	max-height: 88vh;
	object-fit: contain;
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
	user-select: none;
}
.mgnt-lightbox__btn {
	position: absolute;
	appearance: none;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	width: 56px;
	height: 56px;
	font-size: 30px;
	line-height: 1;
	opacity: .8;
	transition: opacity .2s ease;
}
.mgnt-lightbox__btn:hover { opacity: 1; }
.mgnt-lightbox__close { top: 14px; right: 16px; font-size: 34px; }
.mgnt-lightbox__prev { left: 8px; top: 50%; transform: translateY(-50%); }
.mgnt-lightbox__next { right: 8px; top: 50%; transform: translateY(-50%); }
.mgnt-lightbox__count {
	position: absolute;
	bottom: 18px; left: 0; right: 0;
	text-align: center;
	color: rgba(255,255,255,.7);
	font-size: 12px;
	letter-spacing: 0.14em;
}
body.mgnt-lightbox-open { overflow: hidden; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
	.mgnt-gallery { grid-template-columns: repeat(2, 1fr); }
	.mgnt-gallery--polaroids { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.mgnt-grid--directory { grid-template-columns: repeat(2, 1fr) !important; }
	.mgnt-gallery,
	.mgnt-gallery--polaroids { grid-template-columns: repeat(2, 1fr); }
	.mgnt-card__stats { font-size: 10px; }
	.mgnt-card__caption { padding: 12px 8px 14px; }
	.mgnt-lightbox__btn { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.mgnt-card__img,
	.mgnt-hire,
	.mgnt-gallery__item img,
	.mgnt-panel.is-active { transition: none; animation: none; }
	.mgnt-card:hover .mgnt-card__img,
	.mgnt-gallery__item:hover img { transform: none; }
}

/* Fallback for browsers without color-mix(): use a neutral grey that
   reads on both light and dark backgrounds. */
@supports not (color: color-mix(in srgb, white 50%, transparent)) {
	:root {
		--mgnt-ink-soft: #9a9a9a;
		--mgnt-line: rgba(128,128,128,.32);
		--mgnt-line-soft: rgba(128,128,128,.18);
	}
	.mgnt-hire:hover { background: rgba(128,128,128,.16); }
}