/**
 * EcoRahi design system foundation.
 *
 * Glass components + the canonical listing card (.ecorahi-listing-card).
 * All values come from the :root tokens emitted by ecorahi-brand-colors.php —
 * do not add raw hex colors here.
 */

/* ==========================================================================
   Glass surfaces (subtle; readability over effect)
   One backdrop-filter per element; saturation + inner highlight carry depth.
   ========================================================================== */

.ecorahi-glass {
	background: var(--ecorahi-glass-bg);
	-webkit-backdrop-filter: blur(var(--ecorahi-glass-blur)) saturate(var(--ecorahi-glass-saturate));
	backdrop-filter: blur(var(--ecorahi-glass-blur)) saturate(var(--ecorahi-glass-saturate));
	border: 1px solid var(--ecorahi-glass-edge);
	border-radius: var(--ecorahi-radius-lg);
	box-shadow: inset 0 1px 0 var(--ecorahi-glass-highlight), var(--ecorahi-shadow-glass);
}

.ecorahi-glass-card {
	background: var(--ecorahi-glass-bg);
	-webkit-backdrop-filter: blur(var(--ecorahi-glass-blur)) saturate(var(--ecorahi-glass-saturate));
	backdrop-filter: blur(var(--ecorahi-glass-blur)) saturate(var(--ecorahi-glass-saturate));
	border: 1px solid var(--ecorahi-glass-edge);
	border-radius: var(--ecorahi-radius-lg);
	box-shadow: inset 0 1px 0 var(--ecorahi-glass-highlight), var(--ecorahi-shadow-glass);
}

.ecorahi-glass-panel {
	background: var(--ecorahi-glass-bg-strong);
	-webkit-backdrop-filter: blur(var(--ecorahi-glass-blur)) saturate(var(--ecorahi-glass-saturate));
	backdrop-filter: blur(var(--ecorahi-glass-blur)) saturate(var(--ecorahi-glass-saturate));
	border: 1px solid var(--ecorahi-glass-edge);
	border-radius: var(--ecorahi-radius-xl);
	box-shadow: inset 0 1px 0 var(--ecorahi-glass-highlight), var(--ecorahi-shadow-glass);
	padding: var(--ecorahi-space-5);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ecorahi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ecorahi-space-2);
	min-height: 44px;
	padding: var(--ecorahi-space-2) var(--ecorahi-space-4);
	border-radius: var(--ecorahi-radius-pill);
	border: 1px solid transparent;
	font-size: var(--ecorahi-font-body-size);
	font-weight: var(--ecorahi-font-label-weight);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ecorahi-transition-normal), color var(--ecorahi-transition-normal),
		border-color var(--ecorahi-transition-normal), transform var(--ecorahi-transition-fast),
		box-shadow var(--ecorahi-transition-normal);
	-webkit-tap-highlight-color: transparent;
}

.ecorahi-btn:active {
	transform: translateY(1px);
}

.ecorahi-btn:focus-visible,
.ecorahi-listing-card a:focus-visible,
.ecorahi-listing-card button:focus-visible {
	outline: 2px solid var(--ecorahi-color-primary);
	outline-offset: 2px;
	border-radius: var(--ecorahi-radius-sm);
}

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

.ecorahi-btn--primary:hover,
.ecorahi-btn--primary:focus-visible {
	background: var(--ecorahi-color-primary-hover);
	color: #fff;
}

.ecorahi-btn--secondary {
	background: var(--ecorahi-color-secondary);
	color: #fff;
}

.ecorahi-btn--secondary:hover,
.ecorahi-btn--secondary:focus-visible {
	background: var(--ecorahi-color-primary-hover);
	color: #fff;
}

.ecorahi-btn--outline {
	background: transparent;
	border-color: var(--ecorahi-color-primary);
	color: var(--ecorahi-color-primary);
}

.ecorahi-btn--outline:hover,
.ecorahi-btn--outline:focus-visible {
	background: var(--ecorahi-color-primary-soft);
	color: var(--ecorahi-color-primary-hover);
}

.ecorahi-btn--ghost {
	background: var(--ecorahi-glass-bg);
	-webkit-backdrop-filter: blur(var(--ecorahi-glass-blur)) saturate(var(--ecorahi-glass-saturate));
	backdrop-filter: blur(var(--ecorahi-glass-blur)) saturate(var(--ecorahi-glass-saturate));
	border-color: var(--ecorahi-glass-edge);
	box-shadow: inset 0 1px 0 var(--ecorahi-glass-highlight);
	color: var(--ecorahi-color-text);
}

.ecorahi-btn--ghost:hover,
.ecorahi-btn--ghost:focus-visible {
	background: var(--ecorahi-glass-hover);
	border-color: var(--ecorahi-glass-edge-strong);
	color: var(--ecorahi-color-primary-hover);
}

/* ==========================================================================
   Inputs and badges
   ========================================================================== */

.ecorahi-input {
	width: 100%;
	min-height: 44px;
	padding: var(--ecorahi-space-2) var(--ecorahi-space-3);
	background: var(--ecorahi-color-surface);
	border: 1px solid var(--ecorahi-color-border);
	border-radius: var(--ecorahi-radius-md);
	color: var(--ecorahi-color-text);
	font-size: var(--ecorahi-font-body-size);
	transition: border-color var(--ecorahi-transition-fast), box-shadow var(--ecorahi-transition-fast);
}

.ecorahi-input:focus {
	outline: none;
	border-color: var(--ecorahi-color-primary);
	box-shadow: 0 0 0 3px var(--ecorahi-glass-border);
}

.ecorahi-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ecorahi-space-1);
	padding: 3px 10px;
	border-radius: var(--ecorahi-radius-pill);
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: inset 0 1px 0 var(--ecorahi-glass-highlight);
	color: var(--ecorahi-color-primary-hover);
	font-size: var(--ecorahi-font-caption-size);
	font-weight: var(--ecorahi-font-label-weight);
	line-height: 1.4;
}

.ecorahi-badge--accent {
	background: rgba(220, 138, 46, 0.9);
	border-color: rgba(255, 255, 255, 0.4);
	color: #31210a;
}

.ecorahi-badge--featured {
	background: rgba(220, 138, 46, 0.9);
	border-color: rgba(255, 255, 255, 0.4);
	color: #31210a;
}

/* ==========================================================================
   Canonical listing card (.ecorahi-listing-card)
   ========================================================================== */

/* Frosted glass sheet: a single backdrop-filter over the atmospheric page
   background. Depth comes from the translucent gradient, the inner top
   highlight and the layered soft shadow — not from extra blur layers. */
.ecorahi-listing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background:
		linear-gradient(165deg, rgba(255, 255, 255, 0.44) 0%, rgba(255, 255, 255, 0.16) 46%, rgba(255, 255, 255, 0.30) 100%);
	-webkit-backdrop-filter: blur(var(--ecorahi-glass-blur)) saturate(var(--ecorahi-glass-saturate));
	backdrop-filter: blur(var(--ecorahi-glass-blur)) saturate(var(--ecorahi-glass-saturate));
	border: 1px solid var(--ecorahi-glass-edge);
	border-radius: var(--ecorahi-radius-lg);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.62),
		inset 0 -1px 0 rgba(23, 54, 40, 0.06),
		0 2px 6px -2px rgba(23, 54, 40, 0.10),
		0 12px 28px -14px rgba(23, 54, 40, 0.26);
	overflow: hidden;
	transition: transform var(--ecorahi-transition-normal), box-shadow var(--ecorahi-transition-normal),
		border-color var(--ecorahi-transition-normal);
}

/* No backdrop-filter support: near-opaque surface keeps full readability. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ecorahi-listing-card {
		background: rgba(255, 255, 255, 0.95);
	}
}

.ecorahi-listing-card:hover {
	transform: translateY(-3px);
	border-color: var(--ecorahi-glass-edge-strong);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.72),
		inset 0 -1px 0 rgba(23, 54, 40, 0.07),
		0 4px 10px -4px rgba(23, 54, 40, 0.12),
		0 18px 36px -16px rgba(23, 54, 40, 0.32);
}

/* Media ------------------------------------------------------------------ */

.ecorahi-listing-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--ecorahi-color-primary-soft) center / cover no-repeat;
	text-decoration: none;
	overflow: hidden;
}

.ecorahi-listing-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ecorahi-transition-slow);
}

.ecorahi-listing-card:hover .ecorahi-listing-card__media img {
	transform: scale(1.04);
}

.ecorahi-listing-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 68%, rgba(15, 35, 26, 0.18));
}

/* Broken-image fallback: the onerror handler adds .is-img-error and the
   SVG placeholder below replaces the broken icon without layout shift. */
.ecorahi-listing-card__media.is-img-error img {
	display: none;
}

.ecorahi-listing-card__media.is-img-error::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--ecorahi-color-primary-soft);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6b4a' stroke-width='1.2'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9.5h13V10'/%3E%3Cpath d='M10 19.5v-5h4v5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 44px 44px;
	opacity: 0.55;
	z-index: 1;
}

/* Badges on media -------------------------------------------------------- */

.ecorahi-listing-card__badges {
	position: absolute;
	z-index: 2;
	top: var(--ecorahi-space-2);
	left: var(--ecorahi-space-2);
	right: var(--ecorahi-space-2);
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--ecorahi-space-2);
	pointer-events: none;
}

.ecorahi-listing-card__badges > * {
	pointer-events: auto;
}

.ecorahi-listing-card__price {
	position: absolute;
	z-index: 2;
	bottom: var(--ecorahi-space-2);
	right: var(--ecorahi-space-2);
	padding: 3px 11px;
	border-radius: var(--ecorahi-radius-pill);
	background: rgba(220, 138, 46, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.4);
	box-shadow: 0 4px 12px -6px rgba(120, 70, 15, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
	color: #31210a;
	font-size: var(--ecorahi-font-caption-size);
	font-weight: var(--ecorahi-font-price-weight);
	line-height: 1.4;
}

/* Content ------------------------------------------------------------------ */

/* Content sits on a barely-there translucent pane (no extra blur layer):
   image + content read as ONE glass object, with the atmospheric page
   background still faintly visible through the sheet. */
.ecorahi-listing-card__content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	padding: var(--ecorahi-space-3) var(--ecorahi-space-3) var(--ecorahi-space-4);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.06) 100%);
	border-top: 1px solid rgba(255, 255, 255, 0.38);
}

.ecorahi-listing-card__title {
	margin: 0;
	font-size: var(--ecorahi-font-body-size);
	font-weight: var(--ecorahi-font-label-weight);
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.7em;
}

.ecorahi-listing-card__title a {
	color: var(--ecorahi-color-text);
	text-decoration: none;
}

.ecorahi-listing-card__title a:hover {
	color: var(--ecorahi-color-primary-hover);
}

/* Rating wrapper: keeps card height stable when a listing has no reviews.
   The inner .ecorahi-card-rating markup comes from the shared renderer. */
.ecorahi-listing-card__rating {
	min-height: 20px;
	margin: var(--ecorahi-space-1) 0 var(--ecorahi-space-2);
}

/* Glass pill around the shared rating markup; classes/JS contract untouched. */
.ecorahi-listing-card__rating .ecorahi-card-rating {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: var(--ecorahi-space-1);
	padding: 2px var(--ecorahi-space-2);
	border-radius: var(--ecorahi-radius-pill);
	background: rgba(255, 255, 255, 0.38);
	border: 1px solid rgba(255, 255, 255, 0.48);
	max-width: 100%;
	overflow: hidden;
}

.ecorahi-listing-card__location {
	display: flex;
	align-items: center;
	gap: var(--ecorahi-space-1);
	color: var(--ecorahi-color-text-muted);
	font-size: var(--ecorahi-font-meta-size);
	margin: 0 0 var(--ecorahi-space-2);
}

.ecorahi-listing-card__location svg {
	width: 13px;
	height: 13px;
	flex: none;
	overflow: visible;
	stroke: currentColor;
}

.ecorahi-listing-card__excerpt {
	margin: 0 0 var(--ecorahi-space-2);
	color: var(--ecorahi-color-text-muted);
	font-size: var(--ecorahi-font-caption-size);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Actions ------------------------------------------------------------------ */

.ecorahi-listing-card__actions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: var(--ecorahi-space-2);
	margin-top: auto;
	align-items: stretch;
}

.ecorahi-listing-card__actions .eco-book {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 0;
	height: 36px;
	padding: 0 var(--ecorahi-space-2);
	border: 1px solid rgba(255, 255, 255, 0.32);
	border-radius: var(--ecorahi-radius-sm);
	background: linear-gradient(135deg, rgba(31, 107, 74, 0.92) 0%, rgba(43, 122, 120, 0.92) 100%);
	box-shadow: 0 6px 14px -8px rgba(23, 54, 40, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22);
	color: #fff;
	font-size: var(--ecorahi-font-caption-size);
	font-weight: var(--ecorahi-font-label-weight);
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background var(--ecorahi-transition-fast), box-shadow var(--ecorahi-transition-fast),
		border-color var(--ecorahi-transition-fast);
	-webkit-tap-highlight-color: transparent;
}

.ecorahi-listing-card__actions .eco-book:hover {
	background: linear-gradient(135deg, rgba(22, 78, 55, 0.97) 0%, rgba(31, 107, 74, 0.97) 100%);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

.ecorahi-listing-card__actions .eco-book:active {
	transform: translateY(1px);
}

.ecorahi-listing-card__actions .eco-call {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--ecorahi-radius-sm);
	background: rgba(255, 255, 255, 0.4);
	box-shadow: inset 0 1px 0 var(--ecorahi-glass-highlight);
	color: var(--ecorahi-color-text);
	text-decoration: none;
	transition: border-color var(--ecorahi-transition-fast), background var(--ecorahi-transition-fast),
		color var(--ecorahi-transition-fast);
}

.ecorahi-listing-card__actions .eco-call:hover {
	border-color: var(--ecorahi-glass-edge-strong);
	background: rgba(255, 255, 255, 0.62);
	color: var(--ecorahi-color-primary);
}

.ecorahi-listing-card__actions .eco-call:active {
	transform: translateY(1px);
}

.ecorahi-listing-card__actions .eco-call svg {
	width: 15px;
	height: 15px;
	stroke: currentColor;
}

.ecorahi-listing-card__actions .eco-wa {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--ecorahi-radius-sm);
	background: rgba(37, 211, 102, 0.88);
	box-shadow: 0 5px 12px -8px rgba(15, 90, 45, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	color: #fff;
	text-decoration: none;
	transition: background var(--ecorahi-transition-fast), border-color var(--ecorahi-transition-fast);
}

.ecorahi-listing-card__actions .eco-wa:hover {
	background: rgba(37, 211, 102, 0.98);
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.ecorahi-listing-card__actions .eco-wa:active {
	transform: translateY(1px);
}

.ecorahi-listing-card__actions .eco-wa svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* Context modifiers -------------------------------------------------------- */

/* Carousel context: fixed width keeps scroll-snap behaviour of .eco-track.
   ecorahi-carousels.js measures this element for the scroll step. */
.ecorahi-listing-card--carousel {
	flex: 0 0 auto;
	width: 230px;
	scroll-snap-align: start;
}

/* Carousel cards use a shorter media ratio to preserve the previous rhythm. */
.ecorahi-listing-card--carousel .ecorahi-listing-card__media {
	aspect-ratio: 23 / 15;
}

/* Grid context (location landing): fill the grid cell. */
.ecorahi-listing-card--grid {
	width: 100%;
}

/* ==========================================================================
   Homepage environment — three-layer atmospheric canvas
   Layer 1: warm neutral base (never pure white).
   Layer 2: large, diffuse, low-opacity eco lights (teal/green + faint amber)
   painted on a fixed attachment so glass cards refract real variation as
   the page scrolls. Layer 3 is the depth gap between the page, the subtle
   row panels and the floating cards. All static CSS — no animation, no JS.
   ========================================================================== */

body.ecorahi-home-page {
	background-color: var(--ecorahi-color-canvas);
	background-image:
		/* top-left teal atmospheric light */
		radial-gradient(1400px 900px at 8% -12%, rgba(43, 122, 120, 0.13), transparent 60%),
		/* top-right green atmospheric light */
		radial-gradient(1200px 800px at 96% -8%, rgba(31, 107, 74, 0.12), transparent 60%),
		/* soft neutral center bloom keeps the middle calm */
		radial-gradient(1600px 1000px at 50% 38%, rgba(255, 255, 255, 0.55), transparent 65%),
		/* mid-height faint green drift for scroll variation */
		radial-gradient(1100px 700px at -10% 62%, rgba(31, 107, 74, 0.08), transparent 62%),
		radial-gradient(1000px 650px at 108% 74%, rgba(43, 122, 120, 0.08), transparent 62%),
		/* bottom warm amber natural light */
		radial-gradient(1500px 800px at 50% 116%, rgba(220, 138, 46, 0.07), transparent 62%);
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* Category-row container: a subtle translucent floating surface — the
   atmospheric page background stays visible through it (no blur layer
   here; the cards own the single backdrop-filter). */
body.ecorahi-home-page .eco-rows.eco-rows,
body.ecorahi-home-page .eh-post.eh-post {
	background:
		radial-gradient(820px 340px at 14% -4%, rgba(43, 122, 120, 0.06), transparent 66%),
		radial-gradient(720px 320px at 88% 8%, rgba(31, 107, 74, 0.06), transparent 66%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.14) 100%);
	border: 1px solid rgba(255, 255, 255, 0.5);
	box-shadow: inset 0 1px 0 var(--ecorahi-glass-highlight), var(--ecorahi-shadow-sm);
}

/* "See all" link: subtle ghost-glass interaction. */
body.ecorahi-home-page .eco-rows .eco-seeall {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--ecorahi-radius-pill);
	background: rgba(255, 255, 255, 0.42);
	border: 1px solid rgba(255, 255, 255, 0.55);
	box-shadow: inset 0 1px 0 var(--ecorahi-glass-highlight);
	transition: background var(--ecorahi-transition-fast), border-color var(--ecorahi-transition-fast);
}

body.ecorahi-home-page .eco-rows .eco-seeall:hover {
	background: rgba(255, 255, 255, 0.66);
	border-color: var(--ecorahi-glass-edge-strong);
}

/* Carousel arrows: glass circular controls matching the card system. */
body.ecorahi-home-page .eco-rows .eco-arrow {
	background: rgba(255, 255, 255, 0.55);
	-webkit-backdrop-filter: blur(10px) saturate(var(--ecorahi-glass-saturate));
	backdrop-filter: blur(10px) saturate(var(--ecorahi-glass-saturate));
	border: 1px solid rgba(255, 255, 255, 0.62);
	box-shadow: inset 0 1px 0 var(--ecorahi-glass-highlight), 0 8px 22px -10px rgba(23, 54, 40, 0.32);
}

body.ecorahi-home-page .eco-rows .eco-arrow:hover {
	background: rgba(255, 255, 255, 0.78);
	border-color: var(--ecorahi-glass-edge-strong);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 640px) {
	/* Lighter frost on mobile: cheaper compositing, same visual language. */
	.ecorahi-listing-card {
		-webkit-backdrop-filter: blur(10px) saturate(var(--ecorahi-glass-saturate));
		backdrop-filter: blur(10px) saturate(var(--ecorahi-glass-saturate));
	}

	body.ecorahi-home-page {
		background-attachment: scroll;
		background-image:
			radial-gradient(900px 600px at 10% -10%, rgba(43, 122, 120, 0.09), transparent 60%),
			radial-gradient(800px 520px at 92% -6%, rgba(31, 107, 74, 0.08), transparent 60%),
			radial-gradient(1000px 640px at 50% 112%, rgba(220, 138, 46, 0.05), transparent 62%);
	}

	.ecorahi-listing-card--carousel {
		width: min(78vw, 240px);
	}

	.ecorahi-listing-card__actions .eco-book,
	.ecorahi-listing-card__actions .eco-call,
	.ecorahi-listing-card__actions .eco-wa {
		height: 40px;
	}

	.ecorahi-listing-card__actions .eco-call,
	.ecorahi-listing-card__actions .eco-wa {
		width: 40px;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.ecorahi-listing-card,
	.ecorahi-listing-card__media img,
	.ecorahi-btn,
	.ecorahi-listing-card__actions .eco-book,
	.ecorahi-listing-card__actions .eco-call,
	.ecorahi-listing-card__actions .eco-wa {
		transition: none;
	}

	.ecorahi-listing-card__actions .eco-book:active,
	.ecorahi-listing-card__actions .eco-call:active,
	.ecorahi-listing-card__actions .eco-wa:active {
		transform: none;
	}

	.ecorahi-listing-card:hover,
	.ecorahi-listing-card:hover .ecorahi-listing-card__media img,
	.ecorahi-btn:active {
		transform: none;
	}
}