/* 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: 1400px;
	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;
}
.lsh-map-panel__banner {
	background: var(--ls-yellow);
	color: #000;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 5vw, 2.1rem);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -.01em;
	text-align: center;
	padding: 23px 10px;
	border-radius: 14px;
}
/* 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;
	}
}