/* =====================================================================
   Paarhk — Home 3-Category Splash
   THREE VERTICAL COLUMNS side by side (split-screen hero):
   Real Estate | Landscape | Mortgages
   Brand: #02504c  ·  Font: Lexend (inherited from Proty)
   ===================================================================== */

.ps-splash {
	--ps-brand: #02504c;
	--ps-brand-deep: #023a37;
	--ps-header: 92px;              /* approx Proty header height */
	display: flex;
	flex-direction: row;            /* <-- columns side by side */
	width: 100%;
	height: calc(100dvh - var(--ps-header));
	min-height: 560px;
	margin: 0;
	overflow: hidden;
}

/* Hide the Proty page-title / breadcrumb banner on this template */
body.page-template-tpl-home-splash .page-header,
body.tmpl-home-splash .page-header {
	display: none !important;
}
/* Let the panels sit flush, full-bleed edge to edge */
body.tmpl-home-splash #themesflat-content,
body.tmpl-home-splash .page-wrap,
body.tmpl-home-splash #main-content {
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/* ---------- Vertical panel (column) ---------- */
.ps-panel {
	position: relative;
	flex: 1 1 0;
	display: flex;
	align-items: flex-end;          /* content anchored to bottom */
	height: 100%;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	text-decoration: none;
	isolation: isolate;
	border-right: 1px solid rgba(255, 255, 255, .10);
	transition: flex-grow .6s cubic-bezier(.22, 1, .36, 1);
}
.ps-panel:last-child { border-right: 0; }

/* Desktop: hovered column expands, siblings shrink (accordion) */
@media (min-width: 901px) {
	.ps-splash:hover .ps-panel { flex-grow: .8; }
	.ps-splash .ps-panel:hover { flex-grow: 2; }
}

/* Background image layer (zoom target) */
.ps-panel__media {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: var(--ps-img);
	background-size: cover;
	background-position: var(--ps-pos, center);
	background-repeat: no-repeat;
	transform: scale(1.03);
	transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
	will-change: transform;
}

/* Gradient scrim (bottom-up, brand-tinted) for text legibility */
.ps-panel__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(0deg, rgba(2, 44, 42, .92) 0%, rgba(2, 44, 42, .55) 30%, rgba(2, 44, 42, .12) 60%, rgba(2, 44, 42, 0) 100%),
		linear-gradient(0deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .18));
	transition: opacity .5s ease;
}

/* Large ghost index numeral (top) */
.ps-panel__index {
	position: absolute;
	z-index: 3;
	left: clamp(18px, 2.2vw, 40px);
	top: clamp(18px, 3vh, 44px);
	font-size: clamp(48px, 5vw, 96px);
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, .16);
	letter-spacing: -.04em;
	pointer-events: none;
	transition: color .5s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
}

/* Content */
.ps-panel__inner {
	position: relative;
	z-index: 4;
	width: 100%;
	padding: clamp(28px, 4vh, 56px) clamp(22px, 2.4vw, 46px) clamp(34px, 5vh, 64px);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.ps-panel__eyebrow {
	display: inline-block;
	font-size: clamp(10px, .8vw, 12px);
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .82);
	margin-bottom: 12px;
	padding-left: 40px;
	position: relative;
}
.ps-panel__eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 28px;
	height: 2px;
	background: #fff;
	transform: translateY(-50%);
	transition: width .5s cubic-bezier(.22, 1, .36, 1);
}

.ps-panel__title {
	font-size: clamp(26px, 2.9vw, 46px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.02em;
	color: #fff;
	margin: 0 0 14px;
}

.ps-panel__desc {
	font-size: clamp(14px, 1.05vw, 17px);
	line-height: 1.55;
	color: rgba(255, 255, 255, .9);
	max-width: 38ch;
	margin: 0 0 24px;
	/* reveal fully on hover; show a hint by default */
	opacity: .95;
}

/* CTA — glass pill that fills with brand on hover */
.ps-panel__cta {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 13px 26px;
	border: 1.5px solid rgba(255, 255, 255, .7);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	color: #fff;
	font-size: clamp(13px, .95vw, 15px);
	font-weight: 600;
	white-space: nowrap;
	transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s ease;
}
.ps-panel__arrow { transition: transform .4s cubic-bezier(.22, 1, .36, 1); }

/* ---------- Hover / focus states ---------- */
.ps-panel:hover .ps-panel__media,
.ps-panel:focus-visible .ps-panel__media { transform: scale(1.1); }

.ps-panel:hover .ps-panel__scrim,
.ps-panel:focus-visible .ps-panel__scrim { opacity: .96; }

.ps-panel:hover .ps-panel__eyebrow::before,
.ps-panel:focus-visible .ps-panel__eyebrow::before { width: 52px; }

.ps-panel:hover .ps-panel__index,
.ps-panel:focus-visible .ps-panel__index { color: rgba(255, 255, 255, .26); }

.ps-panel:hover .ps-panel__cta,
.ps-panel:focus-visible .ps-panel__cta {
	background: var(--ps-brand);
	border-color: var(--ps-brand);
	color: #fff;
	transform: translateY(-2px);
}
.ps-panel:hover .ps-panel__arrow,
.ps-panel:focus-visible .ps-panel__arrow { transform: translateX(6px); }

.ps-panel:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

/* Pagination dots + swipe hint (mobile carousel only) */
.ps-dots, .ps-swipe-hint { display: none; }

/* ---------- Responsive: full-screen SWIPE CAROUSEL on tablet/mobile ---------- */
@media (max-width: 900px) {
	.ps-splash {
		flex-direction: row;
		height: calc(100svh - 70px);          /* fill viewport under the header */
		min-height: 480px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.ps-splash::-webkit-scrollbar { display: none; }

	.ps-panel {
		flex: 0 0 100vw;
		width: 100vw;
		height: 100%;
		scroll-snap-align: center;
		scroll-snap-stop: always;
		border-right: 0;
	}
	.ps-splash .ps-panel:hover { flex-grow: 0; }   /* no accordion on touch */

	.ps-panel__inner { justify-content: flex-end; padding-bottom: clamp(56px, 13vh, 96px); }
	.ps-panel__title { font-size: clamp(34px, 9vw, 52px); }
	.ps-panel__desc  { font-size: 16px; max-width: 42ch; }
	.ps-panel__index { top: clamp(20px, 7vw, 40px); transform: none; font-size: clamp(72px, 24vw, 120px); }
	.ps-panel:hover .ps-panel__index { transform: none; }

	/* Dots */
	.ps-dots {
		position: fixed; left: 0; right: 0;
		bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
		z-index: 20; display: flex; justify-content: center; gap: 10px;
		pointer-events: none;
	}
	.ps-dot {
		pointer-events: auto; width: 9px; height: 9px; padding: 0;
		border-radius: 999px; border: 0;
		background: rgba(255, 255, 255, .45);
		box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
		transition: width .3s ease, background .3s ease; cursor: pointer;
	}
	.ps-dot.is-active { width: 26px; background: #fff; }

	/* Swipe hint */
	.ps-swipe-hint {
		position: fixed; right: 16px;
		bottom: calc(env(safe-area-inset-bottom, 0px) + 38px);
		z-index: 20; display: inline-flex; align-items: center; gap: 6px;
		padding: 8px 14px; border-radius: 999px;
		background: rgba(2, 51, 47, .8); color: #fff;
		font-size: 12px; font-weight: 600;
		backdrop-filter: blur(4px);
		animation: ps-hint 2.4s ease-in-out 1s 3 both;
		pointer-events: none;
	}
	@keyframes ps-hint {
		0%, 100% { transform: translateX(0); opacity: .92; }
		50% { transform: translateX(-8px); opacity: 1; }
	}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ps-panel,
	.ps-panel__media,
	.ps-panel__cta,
	.ps-panel__arrow,
	.ps-panel__index,
	.ps-panel__scrim,
	.ps-panel__eyebrow::before { transition: none !important; }
	.ps-panel:hover .ps-panel__media { transform: scale(1.03); }
	.ps-splash:hover .ps-panel,
	.ps-splash .ps-panel:hover { flex-grow: 1; }
}

/* =====================================================================
   Splash — minimal header (logo only) + minimal footer
   Gateway feel: no menu, no topbar; the three panels are the focus.
   ===================================================================== */
body.tmpl-home-splash .themesflat-top,          /* topbar */
body.tmpl-home-splash .header-ct-center,        /* main nav menu */
body.tmpl-home-splash .header-ct-right,         /* phone / login / button */
body.tmpl-home-splash .mobile-button,           /* burger */
body.tmpl-home-splash .header-mobile-button { display: none !important; }

/* Center the logo, make header transparent-clean */
body.tmpl-home-splash #header .header-wrap {
	justify-content: center !important;
	text-align: center;
}
body.tmpl-home-splash #header .header-ct-left {
	float: none !important;
	margin: 0 auto !important;
	display: flex;
	justify-content: center;
	width: 100%;
}
body.tmpl-home-splash #header { box-shadow: none; }

/* Minimal splash footer */
.ps-splash-footer {
	background: #02332f;
	padding: 26px 20px;
}
.ps-splash-footer__inner {
	max-width: 1200px; margin: 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
}
.ps-splash-footer__brand img { height: 38px; width: auto; }
.ps-splash-footer__copy { margin: 0; color: rgba(255,255,255,.7); font-size: 13px; }
@media (max-width: 600px) {
	.ps-splash-footer__inner { flex-direction: column; text-align: center; }
}