/* =========================================================================
 * Replay Team — Meet the Team styles
 * Scoped under .rt-page so it can drop into any theme without bleeding.
 * Tokens mirror the Figma comp; tweak the :root vars if the brand shifts.
 * ====================================================================== */

.rt-page {
	--rt-green:        #1e3d2e;
	--rt-green-dark:   #16291f;
	--rt-cream-1:      #f4ebd4;
	--rt-cream-2:      #e8d9b3;
	--rt-cream-3:      #d8c79a;
	--rt-gold:         #b8893a;
	--rt-coral:        #d96845;
	--rt-text:         #111111;
	--rt-text-muted:   #6b6b6b;
	--rt-monogram:     #b3b1a3;
	--rt-card-bg:      #ffffff;
	--rt-border:       rgba(0, 0, 0, .08);
	--rt-radius:       14px;
	--rt-radius-sm:    8px;
	--rt-gap:          24px;

	color: var(--rt-text);
	box-sizing: border-box;
}
.rt-page *, .rt-page *::before, .rt-page *::after { box-sizing: inherit; }

/* ---------- Hero ---------- */
.rt-hero {
	background: var(--rt-green);
	color: #fff;
	padding: 72px 24px 64px;
	text-align: center;
	/* Break out of constrained parent containers (e.g. theme .entry-content max-width) so the band goes edge-to-edge */
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.rt-hero__title {
	margin: 0 0 14px;
	font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	font-size: clamp(2.4rem, 5vw, 3.6rem);
	letter-spacing: .06em;
	font-weight: 400;
	color: #cfc8b3;
}
.rt-hero__subtitle {
	margin: 0 auto;
	max-width: 720px;
	font-size: .95rem;
	line-height: 1.5;
	color: #c5c0ad;
}

/* ---------- Filter chips ---------- */
.rt-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	padding: 28px 16px;
	background: #fafafa;
	border-bottom: 1px solid var(--rt-border);
	position: sticky;
	top: 0;
	z-index: 5;
	/* Match hero — break out of constrained parent container */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.rt-chip {
	appearance: none;
	border: 1px solid #ddd;
	background: #fff;
	color: var(--rt-text-muted);
	padding: 10px 20px;
	border-radius: 999px;
	font-size: .78rem;
	letter-spacing: .12em;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.rt-chip:hover { border-color: var(--rt-green); color: var(--rt-green); }
.rt-chip.is-active {
	background: var(--rt-green);
	color: #fff;
	border-color: var(--rt-green);
}

/* ---------- Sections ---------- */
.rt-sections { padding: 48px 24px 96px; max-width: 1280px; margin: 0 auto; }

.rt-section { margin-bottom: 56px; }
.rt-section[hidden] { display: none; }

.rt-section__title {
	margin: 0 0 28px;
	font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
	font-size: 1.6rem;
	letter-spacing: .14em;
	color: var(--rt-gold);
	font-weight: 500;
}

/* ---------- Grid ---------- */
.rt-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--rt-gap);
}
@media (max-width: 1100px) { .rt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .rt-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* ---------- Card ---------- */
.rt-card {
	appearance: none;
	border: 0;
	padding: 0;
	background: var(--rt-card-bg);
	border-radius: var(--rt-radius);
	overflow: hidden;
	text-align: left;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
	transition: transform .18s ease, box-shadow .18s ease;
	position: relative;
	display: flex;
	flex-direction: column;
}
.rt-card:hover,
.rt-card:focus-visible {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
	outline: none;
}
.rt-card:focus-visible { box-shadow: 0 0 0 3px var(--rt-green), 0 12px 28px rgba(0, 0, 0, .12); }

.rt-card__badge {
	position: absolute;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--rt-coral);
	color: #fff;
	font-size: .6rem;
	letter-spacing: .12em;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: 999px;
	z-index: 2;
	white-space: nowrap;
	max-width: calc(100% - 16px);
}

.rt-card__photo {
	aspect-ratio: 4 / 5;
	width: 100%;
	overflow: hidden;
	background: linear-gradient(135deg, var(--rt-cream-1) 0%, var(--rt-cream-2) 55%, var(--rt-cream-3) 100%);
}
.rt-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Placeholder ("Photo coming soon") */
.rt-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--rt-monogram);
	font-family: "Cormorant Garamond", Georgia, serif;
	text-align: center;
}

/* Override [hidden] when needed — display:flex above outranks the default attribute behavior */
.rt-page [hidden],
.rt-modal [hidden] { display: none !important; }
.rt-card__monogram {
	font-size: clamp(4rem, 7vw, 6rem);
	letter-spacing: .04em;
	line-height: 1;
}
.rt-card__placeholder-label {
	font-size: .82rem;
	letter-spacing: .22em;
	font-family: "Inter", system-ui, sans-serif;
	text-transform: uppercase;
	margin-top: 22px;
}
.rt-card__placeholder-sub {
	font-size: .68rem;
	letter-spacing: .18em;
	font-family: "Inter", system-ui, sans-serif;
	text-transform: uppercase;
	color: #b8b6a8;
}

.rt-card__body { padding: 18px 18px 22px; }
.rt-card__name {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 600;
	font-family: "Cormorant Garamond", Georgia, serif;
	color: var(--rt-text);
}
.rt-card__role {
	margin: 0 0 12px;
	font-size: .82rem;
	color: var(--rt-text-muted);
}
.rt-card__chips { display: flex; flex-wrap: wrap; gap: 6px; }

.rt-chip-mini {
	display: inline-block;
	background: var(--rt-green);
	color: #fff;
	font-size: .62rem;
	letter-spacing: .14em;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 6px;
}

/* ---------- Modal ---------- */
.rt-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.rt-modal.is-open { display: flex; }
.rt-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 28, 22, .55);
	backdrop-filter: blur(2px);
}
.rt-modal__panel {
	position: relative;
	background: #fff;
	border-radius: var(--rt-radius);
	max-width: 880px;
	width: 100%;
	max-height: 90vh;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
@media (max-width: 720px) {
	.rt-modal__panel { grid-template-columns: 1fr; max-height: 95vh; overflow-y: auto; }
}
.rt-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	border: 0;
	background: #fff;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.rt-modal__photo {
	background: linear-gradient(135deg, var(--rt-cream-1) 0%, var(--rt-cream-2) 55%, var(--rt-cream-3) 100%);
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rt-modal__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rt-modal__placeholder { padding: 40px; }
.rt-modal__content {
	padding: 40px 36px;
	overflow-y: auto;
}
.rt-modal__name {
	margin: 0 0 4px;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.8rem;
	font-weight: 500;
}
.rt-modal__role {
	margin: 0 0 18px;
	color: var(--rt-text-muted);
	font-size: .95rem;
}
.rt-modal__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.rt-modal__bio {
	font-size: .95rem;
	line-height: 1.65;
	color: #333;
}
.rt-modal__bio p { margin: 0 0 1em; }

/* ---------- Filtered state ---------- */
.rt-page[data-filter]:not([data-filter="all"]) .rt-section { display: none; }
.rt-page[data-filter] .rt-section.is-visible { display: block; }