/**
 * Location Listing (/hospitals/) — hero, styled map, location grid.
 * Shared .loc-hero and .ne-map rules are mirrored in single-hospital.css
 * (per-template CSS convention — no cross-file imports).
 */

/* ---- Hero ------------------------------------------------------------ */
.loc-hero {
	position: relative;
	background: var(--ne-primary-500);
	background-image: var(--loc-hero-img, none);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.loc-hero::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(14,7,57,0.92) 0%, rgba(14,7,57,0.84) 50%, rgba(23,11,91,0.7) 100%);
}
/* Plain (image-less) hero for the aggregate listing — add depth with glows. */
.loc-hero--plain {
	background:
		radial-gradient(120% 120% at 85% 0%, rgba(21,144,238,0.28) 0%, rgba(21,144,238,0) 55%),
		radial-gradient(90% 90% at 0% 100%, rgba(18,207,234,0.16) 0%, rgba(18,207,234,0) 50%),
		var(--ne-primary-500);
}
.loc-hero--plain::before { background: linear-gradient(90deg, rgba(14,7,57,0.55) 0%, rgba(14,7,57,0.15) 60%, rgba(14,7,57,0) 100%); }
.loc-hero__inner {
	position: relative;
	min-height: 380px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--ne-space-m);
	padding-block: var(--ne-space-5xl);
}
.loc-hero__eyebrow {
	align-self: flex-start;
	background: rgba(255,255,255,0.14);
	color: var(--ne-neutral-100);
	backdrop-filter: blur(2px);
}
.loc-hero__title {
	margin: 0;
	color: var(--ne-neutral-100);
	font-size: var(--ne-h1-size);
	line-height: 1.08;
	max-width: 16ch;
}
.loc-hero__sub {
	margin: 0;
	color: var(--ne-neutral-200);
	font-size: var(--ne-h8-size);
	line-height: 1.6;
	max-width: 52ch;
}

/* Styled/live map (.ne-map) now lives in components.css — shared by the
   hospitals archive, unit contact pages and the booking page. */

/* ---- Location grid --------------------------------------------------- */
.loc-map-section { padding-top: var(--ne-space-4xl); }
.loc-card__foot { padding-top: var(--ne-space-m); }
.loc-card__foot .ne-btn { flex: 1 1 0; }
.loc-empty { text-align: center; color: var(--ne-neutral-700); padding-block: var(--ne-space-4xl); }

/* ---- Responsive ------------------------------------------------------ */
@media (max-width: 1024px) {
	.loc-hero__inner { min-height: 320px; padding-block: var(--ne-space-4xl); }
}
@media (max-width: 640px) {
	.loc-hero__inner { min-height: 260px; }
	.loc-hero__title { font-size: 32px; }
	.loc-card__foot { flex-wrap: wrap; }
}