/**
 * Act profiles — sideshows, bands, haunt actors, vendors.
 *
 * Matched to the Monster profile on purpose: portrait left, name right, bio
 * and a details panel below. Somebody moving from /monsters/ to /sideshows/
 * should not be able to tell that two different plugins drew the pages.
 */

.mpr-profile {
	background: var(--mpr-surface);
	padding: 52px 0 96px;
	font-family: var(--mpr-font-body);
	font-size: var(--mpr-font-size);
	font-weight: var(--mpr-font-weight);
	line-height: 1.6;
	color: var(--mpr-text);
}

.mpr-profile-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 24px;
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */

.mpr-profile-hero {
	display: grid;
	grid-template-columns: 360px minmax(0, 1fr);
	gap: 48px;
	align-items: center;
	margin-bottom: 40px;
}

.mpr-profile-portrait {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--mpr-line);
	border-radius: 8px;
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
}

.mpr-profile-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mpr-profile-initial {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mpr-font-display);
	font-size: 96px;
	color: rgba(255, 255, 255, .22);
}

/* The tagline sits above the name and needs its own clearance — the display
   face overshoots its line box, and without this the name prints through it. */
.mpr-profile-tagline {
	margin: 0 0 14px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mpr-text-muted);
}

.mpr-profile-name {
	font-family: var(--mpr-font-display);
	color: #FFFFFF;
	/* Fluid rather than one desktop size and one phone override: a long act
	   name at a fixed 46px ate four lines and most of a phone screen, and the
	   next name along would have been fine. This scales with the viewport, so
	   the headline stays a headline instead of becoming the page. */
	font-size: clamp(30px, 8.5vw, 68px);
	line-height: 1.06;
	margin: 0 0 18px;
	letter-spacing: .01em;
	overflow-wrap: anywhere;
}

.mpr-profile-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mpr-profile-links a {
	display: inline-block;
	padding: 7px 16px;
	border: 1px solid var(--mpr-line);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mpr-text);
	transition: border-color .2s ease, color .2s ease;
}

.mpr-profile-links a:hover,
.mpr-profile-links a:focus-visible {
	border-color: var(--mpr-accent);
	color: var(--mpr-accent);
}

/* ─── Body ────────────────────────────────────────────────────────────────── */

.mpr-profile-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 48px;
	align-items: start;
}

/* Bio not written yet, or nothing to put in the panel: one column, and the
   panel keeps the width it would have had rather than stretching to full. */
.mpr-profile-body-single {
	grid-template-columns: minmax(0, 1fr);
}

.mpr-profile-body-single .mpr-profile-file {
	max-width: 420px;
}

.mpr-profile-bio p {
	font-size: var(--mpr-font-size);
	font-weight: var(--mpr-font-weight);
	line-height: 1.6;
	color: var(--mpr-text);
	margin: 0 0 20px;
}

.mpr-profile-bio p:last-child { margin-bottom: 0; }

.mpr-profile-file {
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--mpr-line);
	border-radius: 8px;
	padding: 26px 24px;
}

.mpr-profile-file h2 {
	font-family: var(--mpr-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mpr-accent);
	margin: 0 0 14px;
}

.mpr-profile-file h2 + * { margin-top: 0; }
.mpr-profile-file > * + h2 { margin-top: 28px; }

.mpr-profile-file dl { margin: 0; }

.mpr-profile-file dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mpr-text-muted);
}

.mpr-profile-file dd {
	margin: 2px 0 16px;
	color: var(--mpr-text);
	font-weight: 600;
}

.mpr-profile-file dd:last-child { margin-bottom: 0; }

.mpr-profile-members {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mpr-profile-members li {
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.mpr-profile-members li:last-child { border-bottom: 0; }

.mpr-member-name { display: block; font-weight: 600; }

.mpr-member-role {
	display: block;
	font-size: 12px;
	color: var(--mpr-text-muted);
	margin-top: 2px;
}

.mpr-profile-book {
	color: var(--mpr-accent);
	font-weight: 600;
	overflow-wrap: anywhere;
}

/* ─── Bookable experiences ────────────────────────────────────────────────── */

/* A performer's portrait is square because a face is. A room full of people is
   not, and cropping a wide press shot to a square throws away the room. */
.mpr-profile-experience .mpr-profile-portrait {
	aspect-ratio: 4 / 3;
}

.mpr-profile-includes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mpr-profile-includes li {
	position: relative;
	padding: 0 0 0 22px;
	margin-bottom: 10px;
	color: var(--mpr-text);
}

.mpr-profile-includes li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .5em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mpr-accent);
}

.mpr-profile-includes li:last-child { margin-bottom: 0; }

.mpr-profile-cta {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--mpr-accent);
	color: #0B0B0B;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .15s ease, opacity .2s ease;
}

.mpr-profile-cta:hover,
.mpr-profile-cta:focus-visible {
	color: #0B0B0B;
	opacity: .9;
	transform: translateY(-1px);
}

/* ─── The experience grid ─────────────────────────────────────────────────── */

.mpr-exp-grid {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	font-family: var(--mpr-font-body);
	width: 100%;
}

/*
 * Make the builder's own wrappers stretch around the grid.
 *
 * A Divi flex section centres its children and lets them size to their own
 * content. At three columns the grid had enough intrinsic width to push the
 * section open, so the desktop layout looked correct and hid the fault. Drop to
 * one column on a phone and a `minmax(0, 1fr)` track has a minimum of zero, so
 * the whole chain — section, row, column, module — shrank to the widest word on
 * a card. The grid was 31px inside a 390px screen.
 *
 * Scoped with :has to the wrappers that actually contain one of our grids, so
 * nothing else on a page the plugin does not own is touched.
 */
.et_pb_section:has(> * .mpr-exp-grid, > * .mpr-cast),
.et_pb_row:has(.mpr-exp-grid, .mpr-cast),
.et_pb_column:has(.mpr-exp-grid, .mpr-cast),
.et_pb_module:has(.mpr-exp-grid, .mpr-cast),
.et_pb_text_inner:has(.mpr-exp-grid, .mpr-cast) {
	width: 100%;
	align-self: stretch;
}

.mpr-exp-cols-1 { grid-template-columns: minmax(0, 1fr); }
.mpr-exp-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mpr-exp-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mpr-exp-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--mpr-line);
	border-radius: 10px;
	overflow: hidden;
	background: rgba(255, 255, 255, .04);
	transition: border-color .2s ease, transform .2s ease;
}

.mpr-exp-card:hover { border-color: var(--mpr-accent); transform: translateY(-2px); }

.mpr-exp-card-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: rgba(255, 255, 255, .04);
	overflow: hidden;
}

.mpr-exp-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* A card with no photo carries a rule in the accent instead, so a grid mixing
   the two still reads as one set of cards rather than as some being broken. */
.mpr-exp-card-plain {
	border-top: 3px solid var(--mpr-accent);
	background: rgba(255, 255, 255, .05);
}

.mpr-exp-card-plain .mpr-exp-card-body {
	padding: 30px 26px 28px;
	gap: 10px;
}

.mpr-exp-card-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 22px 24px;
	flex: 1;
}

.mpr-exp-card-title {
	font-family: var(--mpr-font-display);
	font-size: clamp(21px, 5.4vw, 26px);
	line-height: 1.15;
	margin: 0;
	overflow-wrap: anywhere;
}

/* Two-class selectors and !important, because Divi prints its own link colour
   after this stylesheet and would otherwise turn every card title brand red. */
/* The face has to be set on the anchor, not just the h3: Divi styles heading
   links separately, so a rule on the heading alone leaves the visible text in
   the theme's sans while the computed style on the h3 claims otherwise. */
.mpr-exp-card .mpr-exp-card-title a {
	color: #FFFFFF !important;
	font-family: var(--mpr-font-display) !important;
	text-decoration: none;
}

.mpr-exp-card .mpr-exp-card-title a:hover,
.mpr-exp-card .mpr-exp-card-title a:focus-visible { color: var(--mpr-accent) !important; }

.mpr-exp-card .mpr-exp-card-more { color: var(--mpr-accent) !important; }

.mpr-exp-card-hook {
	margin: 0;
	color: var(--mpr-text);
	line-height: 1.5;
}

.mpr-exp-card-meta {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mpr-text-muted);
}

/* Pushed to the bottom so the link sits on one line across the row however
   long the individual hooks turn out to be. */
.mpr-exp-card-more {
	margin-top: auto;
	padding-top: 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--mpr-accent);
}

.mpr-exp-card-more::after { content: " \2192"; }

/* Hero with no portrait: the words take the full width rather than sitting in
   a narrow column beside an empty gap. */
.mpr-profile-hero-wide {
	grid-template-columns: minmax(0, 1fr);
	max-width: 820px;
}

@media (max-width: 980px) {
	.mpr-exp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.mpr-exp-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Extra details on the Monster template ───────────────────────────────── */

/* Spliced into markup another plugin owns, so it carries its own rhythm rather
   than inheriting whatever happens to sit above it. */
.mpr-profile-extra {
	max-width: 1180px;
	margin: 8px auto 0;
	padding: 28px 24px 0;
	border-top: 1px solid var(--mpr-line);
	font-family: var(--mpr-font-body);
}

.mpr-profile-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	margin: 0 0 22px;
}

.mpr-profile-chips .mpr-chip { min-width: 0; }

.mpr-profile-chips dt {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mpr-text-muted);
}

.mpr-profile-chips dd {
	margin: 3px 0 0;
	font-weight: 600;
	color: var(--mpr-text);
}

.mpr-profile-extra .mpr-profile-links { margin-bottom: 4px; }

/* ─── Narrow ──────────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
	.mpr-profile-hero,
	.mpr-profile-body {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.mpr-profile-portrait { max-width: 320px; }
}

/* ─── Phones ──────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
	.mpr-profile { padding: 30px 0 56px; }

	.mpr-profile-inner { padding: 0 20px; }

	.mpr-profile-hero { margin-bottom: 28px; }

	.mpr-profile-tagline { font-size: 13px; margin-bottom: 10px; }

	.mpr-profile-file { padding: 22px 20px; }

	.mpr-profile-body,
	.mpr-profile-hero { gap: 26px; }

	.mpr-profile-body-single .mpr-profile-file { max-width: none; }

	/* A thumb-sized target across the column beats a small pill floating in
	   the middle of a panel. */
	.mpr-profile-cta {
		display: block;
		text-align: center;
		padding: 15px 20px;
	}

	.mpr-exp-grid { gap: 18px; }

	.mpr-exp-card-body,
	.mpr-exp-card-plain .mpr-exp-card-body { padding: 22px 20px 24px; }

	.mpr-profile-extra { padding: 24px 20px 0; }

	.mpr-profile-chips { gap: 12px 26px; margin-bottom: 18px; }
}