/**
 * Archive — Luxe card.
 *
 * Card-only styling — the grid/filters/pagination shell is whatever the
 * site's own archive skin already provides (this stylesheet never touches
 * .mshm-archive-grid, .mshm-archive__layout, etc.), so it can be enqueued
 * on top of an existing Classic archive without conflicting with it.
 *
 * Mechanic matches the reference (extracted from its own CSS, not
 * guessed): on hover the photo fades + zooms instead of a panel sliding
 * over it; a second overlay fades in on top of the pale photo. Colors are
 * this project's own neutral ink, not the reference's own accent color.
 */

/* Tighter grid gutter for this skin only — reuses the shell's own
   --mshm-archive-gap var (defined by the theme/Classic shell) so it
   never has to touch .mshm-archive-grid itself, just narrows the value
   Classic's grid also reads. Matches the reference's own ~15px gutter
   at a 14" laptop width. */
body.mshm-archive-skin-luxe {
	--mshm-archive-gap: 15px;
}

.mshm-archive-card--luxe {
	position: relative;
	background: transparent;
}

/* Classic's own card decoration (a dot-pattern strip at the bottom center)
   leaks onto this skin too since both share the base .mshm-archive-card
   class for shared grid targeting — not a Havenlytics feature, just
   Classic's own ::after, switched off here since Luxe has no equivalent. */
.mshm-archive-card--luxe::after {
	content: none;
}

.mshm-archive-card--luxe__link {
	display: block;
	position: relative;
	background: #000000;
	border-radius: 26px;
	overflow: hidden;
	text-decoration: none;
}

.mshm-archive-card--luxe__photo {
	position: relative;
	display: block;
	background: #ffffff;
	overflow: hidden;
}

.mshm-archive-card--luxe__img {
	display: block;
	width: 100%;
	/* Matches the reference's own measured card size (575x307 on a 14"
	   screen) — noticeably wider/shorter than a typical 3:2 photo crop. */
	aspect-ratio: 575 / 307;
	object-fit: cover;
	transition: transform 0.45s ease, opacity 0.45s ease;
}

.mshm-archive-card--luxe__img--placeholder {
	background: #dddddd;
}

.mshm-archive-card--luxe__link:hover .mshm-archive-card--luxe__img {
	opacity: 0.22;
	transform: scale(1.22);
}

/* Bottom + side gradients — visible by default, fade out on hover since
   the photo itself fades/zooms enough that they're no longer needed. */
.mshm-archive-card--luxe__photo::before {
	content: "";
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 70%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
	opacity: 0.85;
	transition: opacity 0.3s ease;
	z-index: 2;
	pointer-events: none;
}

.mshm-archive-card--luxe__photo::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 30%;
	height: 100%;
	background: linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 2;
	pointer-events: none;
}

.mshm-archive-card--luxe__link:hover .mshm-archive-card--luxe__photo::before,
.mshm-archive-card--luxe__link:hover .mshm-archive-card--luxe__photo::after {
	opacity: 0;
}

/* Default overlay: status + price + name, white, on the photo. Fades out
   completely on hover (no cross-fade with the hover overlay). */
.mshm-archive-card--luxe__base {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px 20px 24px;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: opacity 0.3s ease;
}

.mshm-archive-card--luxe__link:hover .mshm-archive-card--luxe__base {
	opacity: 0;
}

.mshm-archive-card--luxe__status {
	align-self: flex-start;
	background: #171717;
	color: #ffffff;
	font: 600 11px/1 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	padding: 5px 10px;
	margin-bottom: 8px;
}

.mshm-archive-card--luxe__price {
	font: 500 1.7rem/1.1 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: 0.02em;
}

.mshm-archive-card--luxe__name {
	display: block;
	font: 300 1rem/1.3 "Roboto", Arial, Helvetica, sans-serif;
	margin-top: 4px;
}

/* Hover overlay: status + price + address + stats, over the now-faded
   photo. Hidden by default, fades in on hover. */
.mshm-archive-card--luxe__hover {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px 20px 24px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	overflow: hidden;
}

.mshm-archive-card--luxe__link:hover .mshm-archive-card--luxe__hover {
	opacity: 1;
}

.mshm-archive-card--luxe__hover-price {
	position: relative;
	display: inline-block;
	font: 500 1.7rem/1.1 "Roboto", Arial, Helvetica, sans-serif;
	letter-spacing: 0.02em;
	color: #171717;
	padding-bottom: 10px;
	margin-bottom: 14px;
}

.mshm-archive-card--luxe__hover-price::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 3px;
	background: var(--mainsail-color-accent, #24bef5);
}

.mshm-archive-card--luxe__hover-address {
	display: block;
	font: 300 0.95rem/1.35 "Roboto", Arial, Helvetica, sans-serif;
	color: #171717;
	margin-bottom: 14px;
}

.mshm-archive-card--luxe__stats {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
}

.mshm-archive-card--luxe__stats li {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
	font: 400 0.8rem/1 "Roboto", Arial, Helvetica, sans-serif;
	color: #171717;
}

.mshm-archive-card--luxe__stats svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	stroke: var(--mainsail-color-accent, #24bef5);
	fill: none;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Nested inside .mshm-archive-card--luxe__hover, as its first child (not
   a sibling, and no z-index needed — painted first so later siblings sit
   on top of it) so it fades in/out with the rest of the hover overlay —
   invisible on the normal/non-hover card, matching the reference. The
   real Mainsail sail mark, turned into a flat black silhouette watermark
   the same way the reference treats its own monogram (filter:brightness(0)
   + low opacity) rather than showing its actual blue/gray artwork here. */
/* Two-class selector deliberately, not one: Havenlytics' own
   ".hvnly-content-wrapper img" rule (0,1,1) outranks a bare
   ".mshm-archive-card--luxe__mark" (0,1,0) since it's still one class
   plus an element type — scoping under the hover parent (0,2,0) clears
   that without needing !important. */
.mshm-archive-card--luxe__hover .mshm-archive-card--luxe__mark {
	position: absolute;
	bottom: 14px;
	right: 16px;
	width: 37.5%;
	max-width: 160px; /* 2.5x the earlier 64px cap, per feedback */
	height: auto;
	display: block;
	filter: brightness(0);
	opacity: 0.4;
	pointer-events: none;
}

/* Favorite — independent of the hover mechanism above, always visible.
   Reuses Classic's own .mshm-archive-card__favorite class/data attributes
   so the site's existing favorite-toggle JS keeps working unchanged. */
.mshm-archive-card--luxe__favorite.mshm-archive-card__favorite {
	position: absolute !important;
	top: 14px;
	right: 14px;
	z-index: 6;
	width: 34px !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.94) !important;
	color: #333333 !important;
	display: grid !important;
	place-items: center !important;
	cursor: pointer;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}

.mshm-archive-card--luxe__favorite svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mshm-archive-card--luxe__favorite.is-favorited {
	color: #c1272d !important;
}

.mshm-archive-card--luxe__favorite.is-favorited svg {
	fill: currentColor;
}

@media (max-width: 640px) {
	.mshm-archive-card--luxe__link {
		border-radius: 18px;
	}

	.mshm-archive-card--luxe__price,
	.mshm-archive-card--luxe__hover-price {
		font-size: 1.35rem;
	}

	.mshm-archive-card--luxe__stats {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.mshm-archive-card--luxe__base,
	.mshm-archive-card--luxe__hover {
		padding: 16px 16px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mshm-archive-card--luxe__img,
	.mshm-archive-card--luxe__photo::before,
	.mshm-archive-card--luxe__photo::after,
	.mshm-archive-card--luxe__base,
	.mshm-archive-card--luxe__hover {
		transition: none;
	}
}