/* Location page styles (city, county, state pages)
   Layout and structure for location-based pages using .pg-loc-* classes
   These pages also load cities.css for shortcode component styles */

/* ---------------------------------------------------------------- Location Page Hero Section */
/* Hero section for location pages - 40% text / 60% image layout
   Removed aspect ratio constraint, reduced padding, no image padding so it fills space */
.pg-loc-hero {
	padding: 4rem 0 3rem;
	aspect-ratio: auto;
}
.pg-loc-hero .wrap {
	grid-template-columns: 1fr 1.5fr;
	gap: 2rem;
}
@media (max-width: 1024px) {
	.pg-loc-hero .wrap {
		grid-template-columns: 1fr;
	}
}
.pg-loc-hero .col-visual {
	padding: 0;
}
.pg-loc-hero .col-visual img,
.pg-loc-hero .col-visual picture {
	padding: 0;
	margin: 0;
}

/* ---------------------------------------------------------------- Location Page Intro Section */
/* 2-column grid layout for city/county intro sections:
   Left column (~70%): text content (.pg-loc-intro-copy)
   Right column (~30%): TOC + author bio (.pg-loc-intro-sidebar)
   Responsive: stacks to single column on mobile */
.pg-loc-intro-layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 3rem;
	align-items: start;
}
.pg-loc-intro-copy { display: block; }
.pg-loc-intro-sidebar {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	height: 100%;
}
@media (max-width: 860px) {
	.pg-loc-intro-layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}