/**
 * Auction template styles.
 * Curtis & Sons — added Aug 2026. Loaded only on single auction pages.
 */

.cs-auction {
	/* Astra's .ast-container is a flex parent on this layout, so without an
	   explicit width the article shrink-wraps to its widest child and sits
	   left-aligned instead of filling the page. */
	flex: 1 1 100%;
	width: 100%;

	--cs-accent: #e55740;
	--cs-ink: #0d0d0d;
	--cs-muted: #4a4a4a;
	--cs-line: #e6e2dc;
	--cs-surface: #ffffff;
	--cs-shadow: 0 6px 22px rgba(13, 13, 13, 0.07);
	--cs-radius: 8px;
	--cs-max: 1120px;

	font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--cs-ink);
	line-height: 1.6;
}

.cs-auction *,
.cs-auction *::before,
.cs-auction *::after {
	box-sizing: border-box;
}

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

.cs-auction__section {
	max-width: var(--cs-max);
	margin: 0 auto;
	padding: 48px 22px;
}

.cs-eyebrow,
.cs-card__eyebrow {
	margin: 0 0 6px;
	color: var(--cs-accent);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.cs-h2 {
	margin: 0 0 28px;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.5px;
	text-transform: uppercase;
}

.cs-textlink {
	color: var(--cs-accent);
	font-weight: 700;
	text-decoration: none;
}

.cs-textlink:hover,
.cs-textlink:focus-visible {
	text-decoration: underline;
}

/* --- Top bar ------------------------------------------------------------ */

.cs-auction__bar {
	max-width: var(--cs-max);
	margin: 0 auto;
	padding: 16px 22px 0;
}

.cs-auction__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--cs-accent);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
}

/* --- Hero --------------------------------------------------------------- */

.cs-auction__hero {
	position: relative;
	max-width: var(--cs-max);
	margin: 22px auto 0;
	padding: 88px 22px;
	overflow: hidden;
	border-radius: var(--cs-radius);
	background-color: #000;
	background-position: center;
	background-size: cover;
	color: #fff;
	text-align: center;
}

/* Kept in the DOM so the hero photo is a real, discoverable image for
   Google and for LCP, rather than a CSS background only. */
.cs-auction__hero-preload {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.cs-auction__hero-inner {
	position: relative;
	z-index: 1;
}

.cs-auction__badge {
	display: inline-block;
	margin: 0 0 18px;
	padding: 8px 18px;
	border-radius: 3px;
	background: var(--cs-accent);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.cs-auction__title {
	margin: 0 0 14px;
	color: #fff;
	font-size: clamp(2.1rem, 6vw, 4rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -1px;
	text-transform: uppercase;
}

.cs-auction__address {
	margin: 0 0 26px;
	font-size: clamp(1rem, 2.2vw, 1.35rem);
}

.cs-auction__eyebrow {
	margin: 0 0 4px;
	color: var(--cs-accent);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.cs-auction__date {
	margin: 0 0 8px;
	font-size: clamp(1.5rem, 4vw, 2.4rem);
	font-weight: 800;
	text-transform: uppercase;
}

.cs-auction__timing {
	margin: 0 0 8px;
	font-weight: 600;
}

.cs-auction__status-flag {
	display: inline-block;
	margin: 10px 0 0;
	padding: 6px 16px;
	border: 2px solid #fff;
	border-radius: 3px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.cs-auction__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 28px;
}

.cs-btn {
	display: inline-block;
	padding: 16px 30px;
	border: 2px solid transparent;
	border-radius: 3px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cs-btn--primary {
	background: var(--cs-accent);
	color: #fff;
}

.cs-btn--primary:hover,
.cs-btn--primary:focus-visible {
	background: #c8442f;
	color: #fff;
}

.cs-btn--ghost {
	border-color: #fff;
	color: #fff;
}

.cs-btn--ghost:hover,
.cs-btn--ghost:focus-visible {
	background: #fff;
	color: var(--cs-ink);
}

/* --- Date cards --------------------------------------------------------- */

.cs-auction__dates {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.cs-card {
	padding: 26px;
	border: 1px solid var(--cs-line);
	border-top: 4px solid var(--cs-accent);
	border-radius: var(--cs-radius);
	background: var(--cs-surface);
	box-shadow: var(--cs-shadow);
}

.cs-card__headline {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
}

.cs-card__body {
	margin: 6px 0 0;
	color: var(--cs-muted);
}

.cs-card__row + .cs-card__row {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px dashed var(--cs-line);
}

/* --- MLS facts ---------------------------------------------------------- */

.cs-facts {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius);
	background: var(--cs-line);
}

.cs-fact {
	padding: 18px 14px;
	background: var(--cs-surface);
	text-align: center;
}

.cs-fact__label {
	margin: 0 0 4px;
	color: var(--cs-muted);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}

.cs-fact__value {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
}

/* --- Body copy ---------------------------------------------------------- */

.cs-auction__content > *:first-child {
	margin-top: 0;
}

.cs-auction__content h2 {
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	font-weight: 800;
	text-transform: uppercase;
}

/* --- Virtual tour ------------------------------------------------------- */

.cs-auction__embed {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--cs-radius);
	background: #111;
	box-shadow: var(--cs-shadow);
}

.cs-auction__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Resource grid ------------------------------------------------------ */

.cs-resource-grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.cs-resource {
	display: block;
	padding: 24px 16px;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius);
	background: var(--cs-surface);
	box-shadow: var(--cs-shadow);
	color: var(--cs-ink);
	text-align: center;
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.cs-resource:hover,
.cs-resource:focus-visible {
	border-color: var(--cs-accent);
	transform: translateY(-2px);
}

.cs-resource__label {
	display: block;
	font-size: 0.98rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.cs-resource__sub {
	display: block;
	margin-top: 6px;
	color: var(--cs-muted);
	font-size: 0.78rem;
}

/* --- Terms -------------------------------------------------------------- */

.cs-terms {
	padding: 26px 30px;
	border-left: 5px solid var(--cs-accent);
	border-radius: var(--cs-radius);
	background: var(--cs-surface);
	box-shadow: var(--cs-shadow);
}

.cs-terms__title {
	margin: 0 0 10px;
	font-size: 1.3rem;
	font-weight: 800;
	text-transform: uppercase;
}

.cs-terms__body > *:last-child {
	margin-bottom: 0;
}

/* --- Contact ------------------------------------------------------------ */

.cs-contact {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cs-contact__block {
	padding: 24px;
	border: 1px solid var(--cs-line);
	border-radius: var(--cs-radius);
	background: var(--cs-surface);
	box-shadow: var(--cs-shadow);
}

.cs-contact__line {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-weight: 700;
}

.cs-contact__block p {
	margin: 0 0 4px;
}

/* --- Auction list cards ------------------------------------------------- */

.cs-auction-cards {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	max-width: 1120px;
	margin: 0 auto;
	font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.cs-auction-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 30px 26px;
	border: 1px solid #e6e2dc;
	border-top: 4px solid #e55740;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 6px 22px rgba(13, 13, 13, 0.07);
	color: #0d0d0d;
	text-decoration: none;
	transition: transform 0.15s ease, border-color 0.15s ease;
}

/*
 * The theme underlines links inside page content, which puts a line under every
 * word of a card whose whole surface is the link. Astra's rule is more specific
 * than a plain element selector, so this needs the weight to win.
 */
.cs-auction-cards a,
.cs-auction-cards a:hover,
.cs-auction-cards a:focus,
.cs-auction-cards a * {
	text-decoration: none !important;
}

.cs-auction-card:hover,
.cs-auction-card:focus-visible {
	border-color: #e55740;
	transform: translateY(-3px);
}

/* Photo cards: the property image behind, everything reversed out of it. */
.cs-auction-card--photo {
	justify-content: flex-end;
	min-height: 285px;
	border: 0;
	border-top: 4px solid #e55740;
	background-color: #0d0d0d;
	background-position: center;
	background-size: cover;
	color: #fff;
}

.cs-auction-card--photo:hover,
.cs-auction-card--photo:focus-visible {
	border-color: #e55740;
}

.cs-auction-card--photo .cs-auction-card__place {
	color: rgba(255, 255, 255, 0.85);
}

.cs-auction-card--photo .cs-auction-card__flag {
	border-color: #fff;
}

.cs-auction-card__badge {
	align-self: flex-start;
	color: #e55740;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.cs-auction-card--photo .cs-auction-card__badge {
	padding: 6px 14px;
	border-radius: 3px;
	background: #e55740;
	color: #fff;
}

.cs-auction-card__title {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.2;
}

.cs-auction-card__date {
	font-size: 1.05rem;
	font-weight: 700;
}

.cs-auction-card__place {
	color: #4a4a4a;
	font-size: 0.92rem;
}

.cs-auction-card__flag {
	align-self: flex-start;
	margin-top: 4px;
	padding: 4px 12px;
	border: 2px solid #0d0d0d;
	border-radius: 3px;
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.cs-auction-card__cta {
	margin-top: 10px;
	color: #e55740;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.cs-auctions-empty {
	max-width: 1120px;
	margin: 0 auto;
	color: #4a4a4a;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.cs-auction-card {
		transition: none;
	}
}

/* --- MLS attribution ---------------------------------------------------- */

.cs-auction__attribution {
	padding-top: 0;
}

.cs-attribution {
	color: var(--cs-muted);
	font-size: 0.72rem;
	line-height: 1.5;
}

.cs-attribution a {
	color: var(--cs-muted);
}

.cs-attribution img {
	max-width: 120px;
	height: auto;
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 600px) {
	.cs-auction__hero {
		margin-inline: 12px;
		padding: 56px 18px;
	}

	.cs-auction__section {
		padding: 36px 18px;
	}

	.cs-btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cs-resource,
	.cs-btn {
		transition: none;
	}
}