/* luggagesorted-homepage.css
   Front page — three columns: hero (sell) / map (location) / booking form.
   Loaded only on is_front_page(). Brand tokens (--ls-navy etc.) come from the
   child theme's global style.css, already enqueued on every page.
   Isolated from luggagesorted-booking.css and style.css — layout only here.
*/

/* Astra's #page has min-height:100vh (its sticky-footer trick) with
   #content as a flex child that grows to fill any leftover viewport height.
   On wide/short screens our content is shorter than the viewport, so #content
   stretches and shoves the footer down — a visible cream gap below the
   affiliate banner. Disable it for this template only; we don't want a
   viewport-pinned footer, we want it flush after the content. */
body.lsh-homepage #page {
	min-height: 0;
}

.lsh-home {
	/* Astra's .ast-container (the ancestor) is display:flex; without an
	   explicit width this flex item shrinks to content size and sits
	   flush-left instead of spanning the container. */
	width: 100%;
	background: var(--ls-cream);
	padding: 48px 24px 0;
}
/* .ls-partners is shared global CSS (style.css) — override its spacing here,
   scoped to the homepage only, rather than touching the shared class.
   Negative side margins break it out of .lsh-home's 24px padding so it runs
   full viewport width, flush against the footer below. */
.lsh-home .ls-partners {
	width: calc(100% + 48px);
	margin: 50px -24px 0;
}
.lsh-home__columns {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1.2fr;
	gap: 32px;
	align-items: stretch;
}
.lsh-home__columns > * {
	min-width: 0;
	height: 100%;
}

/* ── Sell column ───────────────────────────────── */
.lsh-home__col--hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.lsh-home__hero-headline {
	margin: 0 0 20px;
}
.lsh-home__hero-headline span {
	display: block;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: clamp(2.4rem, 4vw, 4.8rem);
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -.01em;
}
.lsh-home__hero-headline-1,
.lsh-home__hero-headline-3 { color: var(--ls-navy); }
.lsh-home__hero-headline-2 { color: var(--ls-yellow-dark); }

.lsh-home__hero-image {
	width: 100%;
	max-width: 380px;
}
.lsh-home__hero-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}

/* ── Map column ────────────────────────────────── */
/* Same double-border chrome as the booking .lsb-panel, so the two side-by-side
   panels read as one branded system. */
.lsh-map-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	background: #02163b;
	padding: 10px;
	border: 4px solid #02163b;
	border-radius: 22px;
	box-shadow: 0 0 0 3px #ffc107;
}
/* Square, shown whole — was flex:1 (stretch to fill leftover column height)
   with object-fit:cover, which cropped the square map to fill a non-square
   box. aspect-ratio keeps it square and un-stretched; the leftover vertical
   space in a taller panel goes to the bars below instead (margin-top:auto,
   next rule) so the map itself never distorts or crops. */
.lsh-map-panel__map {
	display: block;
	flex: none;
	width: 100%;
	aspect-ratio: 1 / 1;
	line-height: 0;
	border-radius: 14px;
	overflow: hidden;
}
.lsh-map-panel__map img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.lsh-map-panel__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--ls-yellow);
	color: #000;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	padding: 23px 10px;
	border-radius: 14px;
	text-decoration: none !important;
}
/* First bar sits right after the (now fixed-height) map — pushing it down
   with the leftover flex space pins both address + hours bars to the panel
   bottom, whatever height the neighbouring form panel currently is. */
.lsh-map-panel__map + .lsh-map-panel__bar { margin-top: auto; }
.lsh-map-panel__bar svg { flex-shrink: 0; width: 36px; height: 36px; }
a.lsh-map-panel__bar:hover { background: var(--ls-yellow-dark); }

/* ── Booking form column ───────────────────────── */
/* The shared .lsb-panel already fills its column via height:100% (set in
   luggagesorted-booking.css); nothing extra needed here for the panel itself. */

/* ── Responsive: stack hero → map → form ───────── */
@media (max-width: 900px) {
	.lsh-home__columns {
		grid-template-columns: 1fr;
	}
	.lsh-home__col--hero {
		align-items: center;
		text-align: center;
	}
	.lsh-home__hero-image {
		max-width: 220px;
	}
}

/* ── Density pass — desktop only ───────────────── */
/* Target: 1536×722 effective (1920×1080 @ 125% Windows scaling) fitting
   without scroll. Vertical space, not type size, is the lever — the hero
   illustration and decorative map image were the two biggest single
   contributors to row height (the grid stretches all three columns to the
   tallest one), so both shrink here. Scoped to min-width:901px so the
   stacked mobile layout above is untouched. */
@media (min-width: 901px) {
	.lsh-home {
		padding-top: 28px;
	}
	.lsh-home__columns {
		gap: 20px;
	}
	.lsh-home__hero-headline {
		margin: 0 0 10px;
	}
	.lsh-home__hero-headline span {
		font-size: clamp(2.2rem, 4vw, 4rem);
		line-height: 1;
	}
	.lsh-home__hero-image {
		max-width: 240px;
	}

	.lsh-map-panel {
		padding: 8px;
		gap: 8px;
		justify-content: start;
	}
	.lsh-map-panel__map + .lsh-map-panel__bar {
		margin-top: 0;
	}
	.lsh-map-panel__map {
		max-width: 340px;
		margin: 0 auto;
	}
	.lsh-map-panel__bar {
		padding: 12px 10px;
		font-size: 1.05rem;
	}
	.lsh-map-panel__bar svg {
		width: 28px;
		height: 28px;
	}

	/* Booking form column — same card, tighter internal padding. Scoped to
	   the homepage column only, not .lsb-panel generally, so /book (which
	   shares luggagesorted-booking.css) is unaffected. */
	.lsh-home__col--form .lsb-panel {
		padding: 8px;
		gap: 8px;
	}
	/* Map column reuses .lsb-panel__banner verbatim (see template-homepage.php)
	   for guaranteed pixel-parity with BOOK STORAGE, rather than a second,
	   separately-maintained banner style — so it needs the same desktop
	   tightening applied here too. */
	.lsh-home__col--form .lsb-panel__banner,
	.lsh-home__col--map .lsb-panel__banner {
		padding: 10px;
		font-size: 2.2rem;
	}
	.lsh-home__col--form .lsb-panel__body {
		padding: 10px;
		gap: 10px;
	}
	.lsh-home__col--form .lsb-bags {
		margin-top: 10px;
		padding: 10px 10px 8px;
	}
	.lsh-home__col--form .lsb-bag-row {
		padding: 5px 0;
	}
}