/**
 * Front-end styles.
 *
 * Built on the Blocksy theme's own tokens so the blocks read as part of the site
 * rather than bolted on: --theme-palette-color-1 is the Century 21 gold (#beaf87),
 * -4 the near-black ink, -6 the light surface. Typography is inherited (the theme
 * sets ct_font_oakes__grotesk on body) -- this file never sets a font-family.
 *
 * Sizing rule learned the hard way: never size anything here as a percentage of a
 * card. The cards are grid items, but their inner <a> shrinks to fit its content,
 * so a percentage resolves against a different box in every card and the headshots
 * came out at different diameters. Fixed sizes only.
 */

.frs-moxi {
	--frs-gold: var( --theme-palette-color-1, #beaf87 );
	--frs-ink: var( --theme-palette-color-4, #111518 );
	--frs-surface: var( --theme-palette-color-7, #ffffff );
	--frs-subtle: var( --theme-palette-color-6, #f4f4f5 );
	--frs-line: color-mix( in srgb, var( --frs-ink ) 12%, transparent );
	--frs-muted: color-mix( in srgb, var( --frs-ink ) 62%, transparent );
	--frs-gap: clamp( 0.9rem, 1.6vw, 1.5rem );
	--frs-radius: 5px;
	--frs-headshot: 132px;

	color: var( --frs-ink );
}

/* Section heading: matches the site's uppercase, letter-spaced section labels. */
.frs-moxi__heading {
	margin: 0 0 calc( var( --frs-gap ) * 1.15 );
	font-size: clamp( 1.35rem, 2.2vw, 1.9rem );
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.frs-moxi__grid {
	display: grid;
	grid-template-columns: repeat( var( --frs-cols, 3 ), minmax( 0, 1fr ) );
	gap: var( --frs-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

.frs-moxi--cols-1 { --frs-cols: 1; }
.frs-moxi--cols-2 { --frs-cols: 2; }
.frs-moxi--cols-3 { --frs-cols: 3; }
.frs-moxi--cols-4 { --frs-cols: 4; }
.frs-moxi--cols-5 { --frs-cols: 5; }
.frs-moxi--cols-6 { --frs-cols: 6; }

@media ( max-width: 1200px ) {
	.frs-moxi__grid { grid-template-columns: repeat( min( var( --frs-cols, 3 ), 3 ), minmax( 0, 1fr ) ); }
}

@media ( max-width: 860px ) {
	.frs-moxi__grid { grid-template-columns: repeat( min( var( --frs-cols, 3 ), 2 ), minmax( 0, 1fr ) ); }
}

@media ( max-width: 520px ) {
	.frs-moxi__grid { grid-template-columns: minmax( 0, 1fr ); }
}

/* ---- Card shell ---------------------------------------------------------- */

.frs-moxi__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var( --frs-line );
	border-radius: var( --frs-radius );
	background: var( --frs-surface );
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.frs-moxi__card:hover {
	border-color: var( --frs-gold );
	box-shadow: 0 6px 20px -12px color-mix( in srgb, var( --frs-ink ) 55%, transparent );
	transform: translateY( -2px );
}

@media ( prefers-reduced-motion: reduce ) {
	.frs-moxi__card { transition: none; }
	.frs-moxi__card:hover { transform: none; }
}

/* The link must fill the card, or everything inside it shrinks to fit. */
.frs-moxi__link {
	display: flex;
	flex-direction: column;
	flex: 1;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.frs-moxi__body {
	padding: 0.95rem 1.05rem 1.15rem;
}

/* ---- Listings ------------------------------------------------------------ */

.frs-moxi__photo {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var( --frs-subtle );
}

.frs-moxi__photo--empty {
	aspect-ratio: 4 / 3;
	background: var( --frs-subtle );
}

.frs-moxi__badge {
	position: absolute;
	inset-block-start: 0.7rem;
	inset-inline-start: 0.7rem;
	padding: 0.3em 0.7em;
	border-radius: 2px;
	background: var( --frs-ink );
	color: var( --frs-surface );
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.frs-moxi__price {
	margin: 0 0 0.2rem;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.frs-moxi__address {
	margin: 0;
	font-size: 0.97rem;
	font-weight: 600;
	line-height: 1.35;
}

.frs-moxi__link:hover .frs-moxi__address,
.frs-moxi__link:hover .frs-moxi__name {
	color: var( --frs-gold );
}

.frs-moxi__city,
.frs-moxi__specs,
.frs-moxi__agent,
.frs-moxi__title,
.frs-moxi__license {
	display: block;
	margin: 0.22rem 0 0;
	font-size: 0.84rem;
	font-weight: 400;
	line-height: 1.4;
	color: var( --frs-muted );
}

.frs-moxi__specs {
	padding-block-start: 0.5rem;
	margin-block-start: 0.5rem;
	border-block-start: 1px solid var( --frs-line );
}

.frs-moxi__agent {
	font-size: 0.79rem;
}

/* ---- Agents -------------------------------------------------------------- */

/* Centre the content with text-align, never align-items -- align-items:center
   shrinks each child to its own content width, which is what made the headshots
   render at different diameters per card. */
.frs-moxi--agents .frs-moxi__card {
	text-align: center;
}

/* The body fills the card; the headshot centres itself with margin:auto. Using
   align-items here would shrink-wrap the body to its text and reintroduce the
   per-card width differences this block had originally. */
.frs-moxi--agents .frs-moxi__body {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	flex: 1;
	padding-block-start: 0.85rem;
}

.frs-moxi__headshot {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: var( --frs-headshot );
	height: var( --frs-headshot );
	margin: 1.35rem auto 0;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
	background: var( --frs-subtle );
	/* Thin cream gap then a gold band -- the same treatment the site's own
	   "Regional Leaders" headshots use. */
	box-shadow: 0 0 0 3px var( --frs-surface ), 0 0 0 4px var( --frs-gold );
}

.frs-moxi__headshot--empty {
	font-size: 1.45rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: var( --frs-muted );
}

.frs-moxi__name {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.3;
	transition: color 0.18s ease;
}

.frs-moxi--agents .frs-moxi__title {
	margin-block-start: 0.25rem;
	font-size: 0.79rem;
	letter-spacing: 0.02em;
}

.frs-moxi__contact {
	margin: 0.3rem 0 0;
	font-size: 0.82rem;
	color: var( --frs-muted );
}

.frs-moxi__contact a {
	color: inherit;
	text-decoration: none;
}

.frs-moxi__contact a:hover {
	color: var( --frs-gold );
	text-decoration: underline;
}

.frs-moxi__license {
	margin-block-start: auto;
	padding-block-start: 0.55rem;
	font-size: 0.74rem;
	letter-spacing: 0.04em;
}

/* ---- Pagination ---------------------------------------------------------- */

.frs-moxi__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-block-start: calc( var( --frs-gap ) * 1.4 );
}

.frs-moxi__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.35rem;
	height: 2.35rem;
	padding: 0 0.7rem;
	border: 1px solid var( --frs-line );
	border-radius: var( --frs-radius );
	background: var( --frs-surface );
	color: var( --frs-ink );
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.frs-moxi__page:hover {
	border-color: var( --frs-gold );
	color: var( --frs-gold );
}

.frs-moxi__page[aria-current="page"] {
	border-color: var( --frs-gold );
	background: var( --frs-gold );
	color: var( --frs-ink );
}

.frs-moxi__page--ellipsis {
	border-color: transparent;
	background: none;
	color: var( --frs-muted );
	pointer-events: none;
}

.frs-moxi__count {
	flex-basis: 100%;
	margin: 0.55rem 0 0;
	text-align: center;
	font-size: 0.8rem;
	color: var( --frs-muted );
}

/* ---- Editor-only diagnostics --------------------------------------------- */

.frs-moxi-notice {
	padding: 0.85rem 1rem;
	border: 1px dashed var( --frs-gold, currentColor );
	border-radius: var( --frs-radius, 5px );
	font-size: 0.9rem;
	color: var( --frs-muted, currentColor );
}