/* Eino Group — Listings module styles.
   Tokens mirror the theme: dark #1c2524, ink #1a1d1c, taupe #9f9180,
   cream #f3efe7 / #ece6da. Square CTAs, soft-radius media cards. */

/* The category tabs, stage badges and home rosters render in theme markup
   (.projects-grid, .eino-phead) outside .eino-listings, so the tokens have to
   exist globally too — otherwise their backgrounds fall back to transparent
   and light text lands on the cream page background. */
:root {
	--eino-dark: #1c2524;
	--eino-ink: #1a1d1c;
	--eino-taupe: #9f9180;
	--eino-taupe-dark: #6f6659;
	--eino-cream: #f3efe7;
	--eino-cream-2: #ece6da;
}

.eino-listings {
	--eino-dark: #1c2524;
	--eino-ink: #1a1d1c;
	--eino-taupe: #9f9180;
	--eino-taupe-dark: #6f6659;
	--eino-cream: #f3efe7;
	--eino-cream-2: #ece6da;
	color: var(--eino-ink);
	font-family: inherit;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}
.eino-listings *,
.eino-listings *::before,
.eino-listings *::after { box-sizing: border-box; }

/* ---- Grid ---- */
.eino-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.eino-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 6px 24px rgba(28, 37, 36, 0.08);
	transition: transform .25s ease, box-shadow .25s ease;
}
.eino-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(28, 37, 36, 0.16);
}
.eino-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--eino-cream-2);
	overflow: hidden;
}
.eino-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.eino-card:hover .eino-card__media img { transform: scale(1.04); }
.eino-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--eino-dark);
	color: #fff;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 10px;
}
.eino-card__price {
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(28, 37, 36, 0.85);
	color: #fff;
	font-weight: 600;
	padding: 8px 14px;
	font-size: 15px;
}
.eino-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.eino-card__title { margin: 0; font-size: 19px; line-height: 1.25; color: var(--eino-ink); }
.eino-card__loc { margin: 0; color: var(--eino-taupe); font-size: 14px; }
.eino-card__facts { margin: 4px 0 0; font-size: 14px; color: #4a4f4d; }
.eino-card__cta {
	margin-top: 14px;
	align-self: flex-start;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--eino-dark);
	border-bottom: 2px solid var(--eino-taupe);
	padding-bottom: 3px;
}

/* ---- Single ---- */
.eino-single { padding: 8px 0 20px; }
.eino-single__back {
	display: inline-block;
	margin-bottom: 18px;
	color: var(--eino-taupe);
	text-decoration: none;
	font-size: 14px;
	letter-spacing: .04em;
}
.eino-single__back:hover { color: var(--eino-dark); }
.eino-single__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.eino-single__title { margin: 0; font-size: 30px; line-height: 1.15; }
.eino-single__loc { margin: 6px 0 0; color: var(--eino-taupe); font-size: 16px; }
.eino-single__price { font-size: 26px; font-weight: 700; color: var(--eino-dark); white-space: nowrap; }

/* Gallery */
.eino-gallery { margin-bottom: 34px; }
.eino-gallery__stage {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--eino-cream-2);
	border-radius: 10px;
	overflow: hidden;
	/* Vertical drags scroll the page as usual; horizontal ones belong to the
	   gallery. Without this the browser pans the whole page sideways while a
	   swipe is in progress. */
	touch-action: pan-y;
}
.eino-gallery__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
.eino-gallery__slide.is-active { opacity: 1; pointer-events: auto; }
/* The incoming slide during a swipe: fully painted, sitting just off-stage,
   moved into place by the script rather than cross-faded. */
.eino-gallery__slide.is-peek { opacity: 1; z-index: 1; }
/* While the finger is down the slides must track it exactly, so no transition;
   on release .is-settling animates the last stretch. Keep the duration in step
   with SETTLE in listings.js. */
.eino-gallery__stage.is-dragging .eino-gallery__slide { transition: none; }
.eino-gallery__slide.is-settling { transition: transform .28s cubic-bezier(.22, .61, .36, 1); }
.eino-gallery__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 46px;
	height: 46px;
	border: none;
	background: rgba(28, 37, 36, 0.55);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease;
}
.eino-gallery__nav:hover { background: rgba(28, 37, 36, 0.85); }
.eino-gallery__nav--prev { left: 0; }
.eino-gallery__nav--next { right: 0; }
.eino-gallery__counter {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	background: rgba(28, 37, 36, 0.75);
	color: #fff;
	font-size: 13px;
	padding: 4px 10px;
	border-radius: 20px;
}
.eino-gallery__thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	overflow-x: auto;
	padding-bottom: 4px;
}
.eino-gallery__thumb {
	flex: 0 0 auto;
	width: 92px;
	height: 64px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	background: var(--eino-cream-2);
	opacity: .7;
	transition: opacity .2s ease, border-color .2s ease;
}
.eino-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eino-gallery__thumb.is-active { opacity: 1; border-color: var(--eino-taupe); }
.eino-gallery__thumb:hover { opacity: 1; }
.eino-gallery__thumb.is-plan { background: #fff; }
.eino-gallery__thumb.is-plan img { object-fit: contain; }

/* Body columns */
.eino-single__cols {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 40px;
	align-items: start;
}
.eino-single__h3 {
	font-size: 20px;
	margin: 26px 0 12px;
	color: var(--eino-dark);
}
.eino-single__h3:first-child { margin-top: 0; }
.eino-single__desc { line-height: 1.7; color: #2f3433; font-size: 15.5px; }

.eino-facts {
	width: 100%;
	border-collapse: collapse;
	background: var(--eino-cream);
	border-radius: 10px;
	overflow: hidden;
}
.eino-facts th,
.eino-facts td {
	text-align: left;
	padding: 11px 16px;
	font-size: 14.5px;
	vertical-align: top;
	border-bottom: 1px solid rgba(159, 145, 128, 0.25);
}
.eino-facts th { color: var(--eino-taupe); font-weight: 500; width: 48%; }
.eino-facts td { color: var(--eino-ink); font-weight: 500; }
.eino-facts tr:last-child th,
.eino-facts tr:last-child td { border-bottom: none; }

.eino-agent {
	margin-top: 22px;
	padding: 18px 20px;
	background: var(--eino-dark);
	color: #fff;
	border-radius: 10px;
}
.eino-agent__name { margin: 0; font-size: 17px; font-weight: 600; }
.eino-agent__title { margin: 2px 0 10px; color: var(--eino-taupe); font-size: 14px; }
.eino-agent a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--eino-taupe); }
.eino-agent__office { margin: 10px 0 0; color: rgba(255, 255, 255, 0.7); font-size: 13px; }

/* ---- Project view (archive) ---- */
.eino-projhead { padding: 8px 0 4px; }
.eino-projhead .eino-single__back { margin-bottom: 14px; }
.eino-projhead h2 { font-family: 'Lora', serif; font-size: 30px; margin: 0 0 4px; color: var(--eino-ink); }
.eino-projhead p { margin: 0; color: var(--eino-taupe); }
.eino-allcta { text-align: center; padding: 36px 0 8px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.eino-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 860px) {
	.eino-single__cols { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 680px) {
	.eino-grid { grid-template-columns: 1fr; }
	.eino-single__title { font-size: 24px; }
	.eino-single__price { font-size: 21px; }
}
@media (max-width: 460px) {
	.eino-listings { padding: 0 14px; }
	.eino-gallery__nav { width: 38px; height: 38px; font-size: 20px; }
}

/* Accessibility polish (UI/UX Pro Max audit) */
.eino-card:focus-visible,
.eino-gallery__nav:focus-visible,
.eino-gallery__thumb:focus-visible {
	outline: 2px solid var(--eino-taupe);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.eino-card,
	.eino-card__media img,
	.eino-gallery__slide,
	.eino-gallery__nav,
	.eino-gallery__thumb {
		transition-duration: 0.001ms !important;
	}
}

/* =========================================================
   Project categories: Myynnissä / Rakenteilla / Valmistuneet
   ========================================================= */
.stage-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0 0 32px;
	/* Hairline drawn as a background rather than a border, so the active tab's
	   2px underline can sit flush on it without a negative margin — a negative
	   margin would overflow the scroll container below and add a stray
	   vertical scrollbar. */
	background-image: linear-gradient(to top, #e2dccf 1px, rgba(0, 0, 0, 0) 1px);
	background-repeat: no-repeat;
	/* Always one row — scroll sideways rather than stack on narrow screens. */
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}
.stage-tabs::-webkit-scrollbar { width: 0; height: 0; }
.stage-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--eino-taupe-dark);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color .2s ease, border-color .2s ease;
}
.stage-tab:hover { color: var(--eino-ink); }
.stage-tab.is-active {
	color: var(--eino-ink);
	border-bottom-color: var(--eino-dark);
}
.stage-tab__count {
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 4px 7px;
	border-radius: 999px;
	background: var(--eino-cream-2);
	color: var(--eino-taupe-dark);
}
.stage-tab.is-active .stage-tab__count { background: var(--eino-dark); color: #fff; }

.eino-empty {
	margin: 0;
	padding: 56px 0;
	text-align: center;
	color: var(--eino-taupe-dark);
	font-size: 16px;
}

/* Stage badges on a project card / project header */
.project-stages {
	position: absolute;
	top: 14px; left: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	z-index: 1;
}
.project-stage {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 10px;
	background: var(--eino-dark);
	color: #fff;
}
.project-stage.is-rakenteilla { background: #7a6d5c; }
.project-stage.is-valmistuneet { background: #4b5f52; }
.eino-projhead__stages { display: flex; gap: 6px; margin: 0 0 10px; }

/* The home roster under each development */
.project-ready {
	margin: -4px 0 10px;
	font-size: 13px;
	color: var(--eino-taupe-dark);
	letter-spacing: .03em;
}
.project-units {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border-top: 1px solid #e2dccf;
}
.project-unit {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 0;
	border-bottom: 1px solid #e2dccf;
	font-size: 14px;
}
.project-unit__name {
	color: var(--eino-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .2s ease;
}
a.project-unit__name:hover { border-bottom-color: var(--eino-taupe); }
.project-unit__status {
	flex: none;
	font-size: 11.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
	padding: 3px 9px;
	background: var(--eino-cream-2);
	color: var(--eino-taupe-dark);
}
.project-unit.is-myynnissa .project-unit__status { background: #e7efe6; color: #3d6b4f; }
.project-unit.is-varattu .project-unit__status { background: #efe6d6; color: #6f5f45; }
.project-unit.is-myyty .project-unit__status { background: #ece6da; color: #63615a; }
.project-unit.is-varattu .project-unit__name,
.project-unit.is-myyty .project-unit__name { color: var(--eino-taupe-dark); }

/* Reserved / sold home cards */
.eino-card__status {
	position: absolute;
	top: 14px; left: 14px;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 5px 10px;
	background: #6f6154;
	color: #fff;
}
.eino-card__status.is-myyty { background: #54534d; }
.eino-card.is-unavailable { box-shadow: 0 4px 16px rgba(28, 37, 36, 0.06); }
.eino-card.is-unavailable .eino-card__media img { filter: grayscale(100%); opacity: .72; }
.eino-card.is-unavailable .eino-card__media { background: var(--eino-cream-2); }
.eino-card__cta.is-muted { color: var(--eino-taupe-dark); }
div.eino-card { cursor: default; }
div.eino-card:hover { transform: none; box-shadow: 0 4px 16px rgba(28, 37, 36, 0.06); }
div.eino-card:hover .eino-card__media img { transform: none; }

@media (max-width: 680px) {
	/* Three tabs share the row and shrink to fit instead of wrapping. */
	.stage-tabs { gap: 0; }
	.stage-tab {
		flex: 1 0 auto;
		justify-content: center;
		gap: 6px;
		padding: 11px 8px;
		font-size: 12.5px;
	}
	.stage-tab__count { font-size: 10.5px; padding: 3px 6px; }
}
/* Narrow phones: tighten once more so all three still fit on one screen. */
@media (max-width: 420px) {
	.stage-tab { gap: 5px; padding: 10px 5px; font-size: 11.5px; letter-spacing: -0.01em; }
	.stage-tab__count { font-size: 10px; padding: 3px 5px; }
}

/* ---------------------------------------------------------------------------
   Added when porting this file from the static demo into the theme.

   .eino-pad lived in an inline <style> block on the demo pages rather than in
   this file, so it has to be restated here or the listing sits flush against
   the viewport edge on narrow screens.

   .eino-single__cta is new: the demo had no call to action in the sidebar, but
   the WordPress template carries one over from the previous layout and it
   needs separating from the agent card above it.
   ------------------------------------------------------------------------ */

.eino-pad { padding-left: 20px; padding-right: 20px; }

.eino-single__cta { margin-top: 18px; }
.eino-single__cta .btn { display: block; text-align: center; }

/* ---------------------------------------------------------------------------
   Unit rows with a thumbnail.

   The signed-off card listed units as text only. A small image makes the row
   scannable - which home is which is a visual question, and on a development
   where every unit shares a street address the names alone ("Nuijatie 4 A",
   "Nuijatie 4 B") tell a buyer nothing.
   ------------------------------------------------------------------------ */

.project-unit__link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	text-decoration: none;
	color: inherit;
}
.project-unit__thumb {
	flex: none;
	width: 48px;
	height: 36px;
	object-fit: cover;
	background: var(--eino-cream-2);
	border: 1px solid #e2dccf;
}
.project-unit__thumb--empty {
	display: block;
}
.project-unit__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.project-unit__link:hover .project-unit__name {
	border-bottom-color: var(--eino-taupe);
}

/* ---------------------------------------------------------------------------
   Card alignment.

   A min-height would be a guess that breaks as soon as a development has more
   homes or a longer address. The grid already stretches every card to the
   tallest in its row; what was missing is anything pinning the footer, so a
   card without a "Käyttöönotto" line ended its call to action ~30px higher
   than its neighbours.

   Pushing the unit list down with margin-top:auto puts the list and the link
   against the bottom edge of every card, so the row reads as a row whatever
   each development happens to carry.
   ------------------------------------------------------------------------ */

.projects-grid > .project-card {
	height: 100%;
}
.project-card > .project-units {
	margin-top: auto;
}
.project-card > .link-arrow {
	margin-top: 14px;
}

/* The media box already has aspect-ratio 4/3; make the image fill it so a
   portrait photograph cannot stretch its card taller than the others. */
.project-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

/* Unit rows: keep the thumbnail small and the row on one line. Without an
   explicit width the flex item can take its intrinsic size, which on a 3 MB
   photograph is very large indeed. */
.project-unit__thumb {
	width: 44px;
	height: 33px;
	flex: 0 0 44px;
}
.project-unit__link {
	flex: 1 1 auto;
	min-width: 0;
}
.project-unit__status {
	margin-left: auto;
}

/* ---------------------------------------------------------------------------
   Reserve the "Käyttöönotto" line.

   Some developments have a handover year and some do not. The paragraph is
   now always rendered, and this min-height keeps it one line tall when empty,
   so the unit list and the link start at the same height across a row.
   ------------------------------------------------------------------------ */

.project-card > .project-ready {
	min-height: 1.45em;
	line-height: 1.45;
}