/*
 * ECR original photography — gallery grid, hero photo band, and photo
 * nav cards. Shared by template-parts/ecr-photo-gallery.php and any
 * template that renders ecr_theme_photo_img() directly.
 */

.ecr-photo-gallery {
	padding: clamp(48px, 7vw, 88px) 0;
	font-family: 'Manrope', Arial, sans-serif;
}

.ecr-photo-gallery--cream { background: #f7f2ea; }
.ecr-photo-gallery--white { background: #fff; }

.ecr-photo-gallery__inner {
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 32px);
}

.ecr-photo-gallery__head { margin: 0 0 28px; }

.ecr-photo-gallery__label {
	margin: 0 0 12px;
	color: #b08d2e;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ecr-photo-gallery__title {
	margin: 0;
	color: #2c3e2d;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	font-weight: 500;
	line-height: 1.12;
}

.ecr-photo-gallery__note {
	margin: 10px 0 0;
	max-width: 64ch;
	color: #4a5568;
	font-size: 0.88rem;
	line-height: 1.5;
}

/* Mosaic ------------------------------------------------------------------ */
.ecr-mosaic {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: clamp(140px, 16vw, 210px);
	gap: 10px;
}

.ecr-mosaic + .ecr-mosaic { margin-top: 10px; }

.ecr-mosaic__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 8px;
	background: #e9e2d5;
}

.ecr-mosaic__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ecr-mosaic__item:hover img,
.ecr-mosaic__item:focus-visible img { transform: scale(1.04); }

.ecr-mosaic > .ecr-mosaic__item:first-child { grid-column: span 2; grid-row: span 2; }

.ecr-mosaic--1 { grid-template-columns: 1fr; grid-auto-rows: clamp(240px, 42vw, 540px); }
.ecr-mosaic--1 > .ecr-mosaic__item:first-child { grid-column: auto; grid-row: auto; }
.ecr-mosaic--2 > .ecr-mosaic__item:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.ecr-mosaic--3 > .ecr-mosaic__item:nth-child(n+2) { grid-column: span 2; }
.ecr-mosaic--4 > .ecr-mosaic__item:nth-child(2) { grid-column: span 2; }
.ecr-mosaic--row > .ecr-mosaic__item:first-child { grid-column: auto; grid-row: auto; }

@media (max-width: 640px) {
	.ecr-mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-auto-rows: 130px;
		gap: 8px;
	}
	.ecr-mosaic > .ecr-mosaic__item:nth-child(n) { grid-column: auto; grid-row: auto; }
	.ecr-mosaic > .ecr-mosaic__item:first-child { grid-column: span 2; grid-row: span 2; }
	.ecr-mosaic--1 { grid-template-columns: 1fr; grid-auto-rows: 230px; }
	.ecr-mosaic--1 > .ecr-mosaic__item:first-child { grid-row: auto; }
	.ecr-mosaic--row > .ecr-mosaic__item:first-child { grid-column: auto; grid-row: auto; }
	.ecr-mosaic--2 > .ecr-mosaic__item:nth-child(2),
	.ecr-mosaic--4 > .ecr-mosaic__item:nth-child(4) { grid-column: span 2; }
	.ecr-mosaic + .ecr-mosaic { margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   Hero photo band — a single full-bleed photo strip, used near the top of
   street and park guides directly under the hero section.
   -------------------------------------------------------------------------- */
.ecr-photo-band {
	width: 100%;
	max-height: 420px;
	overflow: hidden;
	background: var( --ecr-photos-cream, #F7F3EC );
}

.ecr-photo-band img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 420px;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Photo nav cards — used on hub pages to link out to real guides
   (e.g. Parks & Trails → the three named park guides).
   -------------------------------------------------------------------------- */
.ecr-photo-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.ecr-photo-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 0.6rem;
	overflow: hidden;
	background: #fff;
	box-shadow: var( --shadow-sm, 0 2px 8px rgba(0,0,0,0.06) );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ecr-photo-card:hover,
.ecr-photo-card:focus-visible {
	transform: translateY(-2px);
	box-shadow: var( --shadow-md, 0 4px 20px rgba(0,0,0,0.10) );
}

.ecr-photo-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.ecr-photo-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecr-photo-card__body {
	padding: 1rem 1.1rem 1.2rem;
}

.ecr-photo-card__body h3 {
	margin: 0 0 0.3rem;
	font-family: var( --font-serif, 'Playfair Display', serif );
	font-size: 1.05rem;
	color: var( --ecr-photos-forest, #2C3E2D );
}

.ecr-photo-card__cta {
	display: inline-block;
	margin-top: 0.4rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var( --ecr-photos-gold, #B08D2E );
}

@media ( max-width: 760px ) {
	.ecr-photo-cards {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Arrival — entrance video + photos (neighbourhood page)
   -------------------------------------------------------------------------- */
.ecr-arrival {
	padding: clamp(48px, 7vw, 88px) 0;
	background: #fff;
}

.ecr-arrival__inner {
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 32px);
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

.ecr-arrival__copy p:not(.ecr-photo-gallery__label) {
	margin: 16px 0 0;
	color: #4a5568;
	font-size: 1rem;
	line-height: 1.7;
}

.ecr-arrival__media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.ecr-arrival__lead {
	grid-column: 1 / -1;
	overflow: hidden;
	border-radius: 10px;
}

.ecr-arrival__lead img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ecr-video.ecr-arrival__video { background: transparent; }

.ecr-arrival__thumb {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 16 / 9;
}

.ecr-arrival__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.ecr-arrival__thumb:hover img { transform: scale(1.04); }

@media (max-width: 900px) {
	.ecr-arrival__inner { grid-template-columns: 1fr; }
}