/*
 * STRUD Property - Easy Property Listings styling
 *
 * Palette and type are pulled from the site's existing Elementor global kit
 * so nothing here invents a brand:
 *   primary   #495748   deep     #3A4539   accent  #51BD88
 *   secondary #DDDDDD   surface  #EFEFEF   warm    #CBC8CC
 *   headings  Brandon Grotesque   body  Montserrat
 *
 * Fonts are referenced, never loaded. Elementor already serves them, and
 * Brandon Grotesque is licensed so it must keep coming from the existing
 * custom font upload.
 */

:root {
	--strud-primary: #495748;
	--strud-deep: #3a4539;
	--strud-accent: #51bd88;
	--strud-secondary: #dddddd;
	--strud-surface: #efefef;
	--strud-warm: #cbc8cc;
	--strud-white: #ffffff;
	--strud-ink: #1a1f19;
	--strud-muted: #6b7269;

	--strud-font-head: "Brandon Grotesque", "Montserrat", system-ui, sans-serif;
	--strud-font-body: "Montserrat", system-ui, -apple-system, sans-serif;

	--strud-radius: 4px;
	--strud-gap: 1.5rem;
	--strud-shadow: 0 1px 3px rgb(26 31 25 / 8%), 0 8px 24px rgb(26 31 25 / 6%);
	--strud-shadow-lift: 0 2px 6px rgb(26 31 25 / 10%), 0 16px 40px rgb(26 31 25 / 12%);
}

/* ---------------------------------------------------------------------------
   Status ribbon, shared by the card and the single listing
   --------------------------------------------------------------------------- */

.strud-ribbon {
	display: inline-block;
	margin: 0;
	padding: 0.4em 0.9em;
	font-family: var(--strud-font-head);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--strud-white);
	background: var(--strud-primary);
	border-radius: var(--strud-radius);
}

.strud-ribbon--sold,
.strud-ribbon--leased {
	background: var(--strud-deep);
}

.strud-ribbon--under-offer {
	background: var(--strud-accent);
	color: var(--strud-deep);
}

.strud-ribbon--current {
	background: var(--strud-primary);
}

/* ---------------------------------------------------------------------------
   Listing card
   --------------------------------------------------------------------------- */

/* EPL's shortcode and archive loops both output into .loop-content. */
.loop-content {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--strud-gap);
}

.strud-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--strud-white);
	border: 1px solid var(--strud-secondary);
	border-radius: var(--strud-radius);
	box-shadow: var(--strud-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

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

.strud-card:hover,
.strud-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--strud-shadow-lift);
}

.strud-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--strud-surface);
}

.strud-card__media-link,
.strud-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.strud-card__media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--strud-surface), var(--strud-warm));
}

.strud-card__media .strud-ribbon {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
}

.strud-card__inspection {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 2;
}

.strud-card__inspection:empty {
	display: none;
}

.strud-card__inspection .epl-inspection-times,
.strud-card__inspection .home-open {
	padding: 0.35em 0.7em;
	font-family: var(--strud-font-body);
	font-size: 0.75rem;
	color: var(--strud-deep);
	background: rgb(255 255 255 / 92%);
	border-radius: var(--strud-radius);
}

.strud-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.25rem;
}

.strud-card__address {
	margin: 0;
	font-family: var(--strud-font-head);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.3;
}

.strud-card__address a {
	color: var(--strud-ink);
	text-decoration: none;
}

.strud-card__address a:hover,
.strud-card__address a:focus {
	color: var(--strud-primary);
	text-decoration: underline;
}

.strud-card__locality {
	margin: 0;
	font-family: var(--strud-font-body);
	font-size: 0.875rem;
	color: var(--strud-muted);
}

.strud-card__icons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	font-size: 0.875rem;
	color: var(--strud-deep);
}

.strud-card__excerpt {
	margin: 0;
	font-family: var(--strud-font-body);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--strud-muted);
}

.strud-card__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: baseline;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 0.9rem;
	border-top: 1px solid var(--strud-secondary);
}

.strud-card__price {
	margin: 0;
	font-family: var(--strud-font-head);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--strud-primary);
}

.strud-card__cta {
	font-family: var(--strud-font-body);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--strud-muted);
}

/* ---------------------------------------------------------------------------
   Single listing
   --------------------------------------------------------------------------- */

.strud-listing__header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
	margin-bottom: 1.25rem;
}

.strud-listing__address {
	margin: 0;
	font-family: var(--strud-font-head);
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--strud-ink);
}

.strud-listing__address-note {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--strud-muted);
}

.strud-listing__locality {
	margin: 0;
	font-family: var(--strud-font-body);
	font-size: 1rem;
	color: var(--strud-muted);
}

.strud-listing__hero {
	margin-bottom: 2rem;
	overflow: hidden;
	border-radius: var(--strud-radius);
	background: var(--strud-surface);
}

.strud-listing__hero img {
	display: block;
	width: 100%;
	height: auto;
}

.strud-listing__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
}

@media (min-width: 900px) {
	.strud-listing__body {
		grid-template-columns: minmax(0, 1fr) 340px;
		align-items: start;
	}
}

.strud-listing__section + .strud-listing__section {
	margin-top: 2.5rem;
}

.strud-listing__section:empty,
.strud-listing__meta-extras:empty {
	display: none;
}

.strud-listing__section-title {
	margin: 0 0 1rem;
	padding-bottom: 0.5rem;
	font-family: var(--strud-font-head);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--strud-primary);
	border-bottom: 2px solid var(--strud-accent);
}

.strud-listing__heading {
	margin: 0 0 0.35rem;
	font-family: var(--strud-font-head);
	font-size: 1.375rem;
	font-weight: 500;
	line-height: 1.3;
	color: var(--strud-ink);
}

.strud-listing__subheading {
	margin: 0 0 1rem;
	font-family: var(--strud-font-body);
	font-size: 1rem;
	font-weight: 400;
	color: var(--strud-muted);
}

.strud-listing__subheading:empty {
	display: none;
}

.strud-listing__copy {
	font-family: var(--strud-font-body);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--strud-ink);
}

.strud-listing__copy p {
	margin: 0 0 1em;
}

/* Sticky rail */

.strud-rail__sticky {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 900px) {
	.strud-rail__sticky {
		position: sticky;
		top: 2rem;
	}
}

.strud-rail__block {
	padding: 1.25rem;
	background: var(--strud-white);
	border: 1px solid var(--strud-secondary);
	border-radius: var(--strud-radius);
}

.strud-rail__block:empty,
.strud-rail__block--dates:has(> :only-child:empty) {
	display: none;
}

.strud-rail__block--price {
	background: var(--strud-surface);
	border-color: transparent;
}

.strud-rail__price {
	font-family: var(--strud-font-head);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--strud-primary);
}

.strud-rail__block--icons .property-feature-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	font-size: 1rem;
	color: var(--strud-deep);
}

.strud-rail__block--buttons .epl-button,
.strud-rail__block--buttons a.button {
	display: block;
	width: 100%;
	margin-bottom: 0.5rem;
	padding: 0.85em 1.2em;
	font-family: var(--strud-font-head);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--strud-white);
	background: var(--strud-primary);
	border: 0;
	border-radius: var(--strud-radius);
	cursor: pointer;
	transition: background 0.2s ease;
}

.strud-rail__block--buttons .epl-button:hover,
.strud-rail__block--buttons .epl-button:focus,
.strud-rail__block--buttons a.button:hover,
.strud-rail__block--buttons a.button:focus {
	background: var(--strud-deep);
}

.strud-rail__block--agent .epl-author-box {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.strud-rail__block--agent img {
	max-width: 88px;
	height: auto;
	border-radius: 50%;
}

/* Map and gallery from the extensions need to stay inside the column. */

.strud-listing__section--map .epl-advanced-mapping,
.strud-listing__section--map iframe,
.strud-listing__section--gallery img {
	max-width: 100%;
}

.strud-listing__section--map iframe {
	display: block;
	width: 100%;
	min-height: 360px;
	border: 0;
	border-radius: var(--strud-radius);
}

/* ---------------------------------------------------------------------------
   Focus visibility, applied last so it wins
   --------------------------------------------------------------------------- */

.strud-card a:focus-visible,
.strud-listing a:focus-visible,
.strud-rail__block--buttons .epl-button:focus-visible {
	outline: 3px solid var(--strud-accent);
	outline-offset: 2px;
}