/**
 * Sign-in page.
 *
 * The homepage mockup: a full-bleed Ticino photograph with the sign-in card
 * overlaid to the right on wide screens, stacking beneath it on narrow ones.
 *
 * Loaded only for signed-out visitors, so the portal's component styles never
 * reach the one page an unauthenticated visitor can see.
 */

/* ==========================================================================
   Layout
   ========================================================================== */

.ke-body--public .ke-main {
	display: flex;
	flex-direction: column;
}

/*
 * Hero height.
 *
 * A single token so the photograph band can be made taller or shorter by
 * changing one value, rather than hunting through three breakpoints.
 *
 * On wide screens this acts as a *floor*, not a cap — see the overlap rules
 * below. On stacked layouts it is the exact band height.
 */
:root {
	--ke-hero-height: 44rem;

	/*
	 * Backdrop behind the photograph.
	 *
	 * A deep lake tone rather than the near-white page surface, so nothing
	 * white is ever visible: not while the JPEG decodes, not behind a
	 * transparent PNG someone uploads later, and not in the sliver a fractional
	 * viewport height can leave at the bottom edge.
	 */
	--ke-hero-backdrop: #2b4552;

	/*
	 * How far the sign-in card sits above the vertical centre of the hero.
	 * Increase to lift it further; set to 0 for true centring.
	 */
	--ke-card-offset: 4rem;
}

/*
 * Stacked by default: photograph, then card beneath it.
 *
 * Height is left to the content. The hero has its own band height and the card
 * needs whatever the form takes — constraining the container would squash both.
 */
.ke-login {
	position: relative;
	flex: 1 0 auto;
	display: grid;
	background-color: var(--ke-hero-backdrop);
}

/*
 * Hero and card share one grid cell on wide screens, so the card floats over
 * the photograph exactly as the mockup shows. On narrow screens they stay two
 * rows — overlaying a form on a busy photograph at phone width is unreadable,
 * and the specification requires the portal to work on mobile.
 *
 * The container gets a height only in this overlapping mode, and only enough to
 * hold the taller of the two.
 */
@media (min-width: 60rem) {
	.ke-login {
		grid-template-areas: "stage";

		/*
		 * `max()`, not `min()`.
		 *
		 * The stage must always reach the footer. `.ke-main` is a stretching
		 * flex child of a `min-height: 100vh` body, so capping the stage at a
		 * fixed height leaves the page background showing through beneath the
		 * photograph on any tall viewport — which is the white band. Taking the
		 * larger of the token and the viewport remainder closes that gap while
		 * still guaranteeing a decent hero on short screens.
		 */
		min-height: max(
			var(--ke-hero-height),
			calc(100vh - var(--ke-header-height) - 3.5rem)
		);
	}

	.ke-login__hero,
	.ke-login__panel { grid-area: stage; }

	/* Fill the stage rather than keeping the fixed band height, so the
	   photograph covers every pixel the container occupies. */
	.ke-login__hero { height: 100%; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

/*
 * The photograph band.
 *
 * Fixed to the hero token rather than stretched, so "make it smaller" is one
 * value change and the result is identical in both layout modes.
 */
.ke-login__hero {
	position: relative;
	overflow: hidden;
	background-color: var(--ke-hero-backdrop);
	height: var(--ke-hero-height);
}

/*
 * `object-fit: cover` guarantees the image fills the box at any aspect ratio,
 * cropping rather than letterboxing — letterboxing is what would expose the
 * backdrop as bars top and bottom.
 *
 * The photograph's interest sits on its left (maple, irises, church), so the
 * crop is biased that way; the calmer sky and water fall on the right, under
 * the sign-in card.
 */
.ke-login__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 35% center;
	display: block;
}

/* A gentle wash so white text and the card edge stay legible over any
   photograph the editor happens to upload. */
.ke-login__hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgb(24 24 27 / 12%) 0%, rgb(24 24 27 / 0%) 45%);
	pointer-events: none;
}

/*
 * Default hero, used when no featured image has been set on the page.
 *
 * The bundled Brissago lakefront photograph — a general view of the town, not
 * a picture of the flat. §4.1 permits a generic Ticino photograph on the public
 * page; §4.2 forbids publishing the property itself.
 *
 * The gradient sits beneath as a paint-time fallback, so a slow connection or a
 * missing file shows lake-and-sky colours rather than a grey rectangle.
 *
 * `object-position` is irrelevant here since this is a background rather than a
 * replaced element, so the focal point is set with `background-position`:
 * biased left on wide screens to keep the maple and irises in frame while
 * leaving the calmer sky and water on the right, where the sign-in card sits.
 */
.ke-login__image--placeholder {
	min-height: 100%;
	background-color: var(--ke-hero-backdrop);
	background-image:
		linear-gradient(180deg, rgb(191 219 254 / 35%) 0%, rgb(236 252 203 / 20%) 100%),
		url("../images/brissago.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 35% center;
}

@media (max-width: 59.999rem) {
	/*
	 * Stacked layout: the card sits below the photograph, so the whole scene
	 * can be centred, and the band is shortened further — on a phone the hero
	 * is scenery, and every pixel it takes is a pixel the sign-in form loses.
	 */
	:root { --ke-hero-height: 24rem; }

	.ke-login__image--placeholder { background-position: center; }
	.ke-login__image { object-position: center; }
}

/* ==========================================================================
   Card
   ========================================================================== */

/*
 * No bottom padding: the card sits flush to the foot of the stage, so the
 * photograph runs right up to the footer with no gap beneath the card.
 * Written as longhand so the desktop rule below can override the inline
 * padding without reinstating the block padding.
 */
.ke-login__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: var(--ke-space-6);
	padding-bottom: 0;
	padding-inline: var(--ke-space-4);
}

@media (min-width: 60rem) {
	.ke-login__panel {
		justify-content: flex-end;
		padding-inline: clamp(var(--ke-space-6), 6vw, 6rem);
	}

	/*
	 * Lift the card above the optical centre.
	 *
	 * A transform rather than padding or margin, because the panel now has no
	 * bottom padding to trade against and margins on a centred flex item shift
	 * it by only half their value — confusing to tune. This moves the card by
	 * exactly the token's value.
	 *
	 * Only in the overlapping layout: below 60rem the card sits beneath the
	 * photograph, where lifting it would pull it over the image.
	 *
	 * Kept to whole pixels (2rem = 32px) so the card's text and its backdrop
	 * blur stay on the pixel grid and render crisply.
	 */
	.ke-card--login {
		transform: translateY(calc(-1 * var(--ke-card-offset, 2rem)));
	}
}

.ke-card--login {
	width: 100%;
	max-width: 27rem;
	padding: var(--ke-space-8);
	border-radius: var(--ke-radius-lg);
	box-shadow: var(--ke-shadow-raised);
	background: rgb(255 255 255 / 97%);
	backdrop-filter: blur(6px);
}

.ke-card--login .ke-card__header { align-items: center; gap: var(--ke-space-4); margin-bottom: var(--ke-space-4); }
.ke-card--login .ke-card__heading { font-size: var(--ke-text-xl); }

.ke-lock {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--ke-surface-sunken);
	color: var(--ke-ink);
	flex: none;
}

.ke-card__lede { color: var(--ke-ink-muted); font-size: var(--ke-text-sm); margin-bottom: var(--ke-space-2); }

.ke-card__notice {
	color: var(--ke-brand);
	font-size: var(--ke-text-sm);
	font-weight: 600;
	margin-bottom: var(--ke-space-6);
}

/* ==========================================================================
   Form
   ========================================================================== */

.ke-login-form .ke-field { margin-bottom: var(--ke-space-5); }

.ke-login-form .ke-field input {
	padding-block: 0.75rem;
	font-size: var(--ke-text-base);
}

.ke-login-form .ke-button {
	padding-block: 0.8rem;
	font-size: var(--ke-text-base);
	margin-top: var(--ke-space-2);
}

.ke-login-form__forgot {
	margin: var(--ke-space-4) 0 0;
	text-align: center;
	font-size: var(--ke-text-sm);
}

.ke-login-form__forgot a { text-decoration: underline; }

/* ==========================================================================
   Header adjustments
   ========================================================================== */

/* The public header carries no navigation, so the trust strip sits alone on
   the right and can afford to show at a smaller breakpoint than in the portal. */
@media (min-width: 48rem) {
	.ke-header--public .ke-trust { display: flex; }
}

@media (max-width: 47.999rem) {
	.ke-card--login { padding: var(--ke-space-6); }
}