/**
 * Photos on the six service landing pages — SB 721, SB 326, SF Section 604,
 * HOA balcony, deck and balcony inspections (inc/service-photos.php).
 *
 *   .page-hero--photo        featured image beside the H1
 *   .service-photo--wide     one photo under the Compliance section header
 *   .service-photo--side     one photo beside the Our Process steps
 *   .service-gallery         grid of the remaining photos before the FAQ
 *
 * Loaded on those six slugs only (functions.php), after service-pages.css /
 * sf-section-604.css. Intentionally unlayered like them, so it sits above
 * main.css's @layer'ed rules. Adds components; the one existing theme block it
 * touches is the penalty-card grid (side fix at the end of this file). Built on
 * main.css design tokens.
 */

/* ──────────────────────────────────────────────
   Hero with a real photo (featured image)
   The theme's .page-hero is a gradient-only band. The service landings
   show the page's featured image beside the copy: two columns on desktop,
   photo under the CTAs on small screens. Without a featured image the
   modifier class is absent and the hero renders exactly as before.
   (Moved here from service-pages.css so SB 721 / SB 326 / SF 604 get it too.)
   ────────────────────────────────────────────── */
.page-hero--photo .page-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 44%);
	gap: var(--space-2xl) var(--space-3xl);
	align-items: center;
}

.page-hero--photo .page-hero__content { min-width: 0; }

/* The title shares the row with the photo, so it gets roughly half the
   container instead of all of it. Scaled by viewport so "HOA Balcony
   Inspection" stays on one line above the hard break at every two-column
   width (measured: 633px at the theme's 52px vs a 578px column at 1512px).
   Bottoms out at the theme's own mobile size (--text-3xl ≈ 30px). */
@media (min-width: 901px) {
	.page-hero--photo .page-hero__title {
		font-size: clamp(1.875rem, 0.5rem + 2.4vw, 2.875rem);
	}
}

.page-hero__media {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--color-primary-light);
	box-shadow: var(--shadow-dark);
}

/* Hairline so the photo edge reads on the dark gradient. */
.page-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
	pointer-events: none;
}

.page-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

@media (max-width: 900px) {
	.page-hero--photo .page-hero__grid { grid-template-columns: 1fr; }
	/* Stacked under the CTAs: keep the photo from becoming a second screen on tablets. */
	.page-hero__media { aspect-ratio: 16 / 10; max-height: 400px; }
}

/* ──────────────────────────────────────────────
   Single photo inside a section
   ────────────────────────────────────────────── */
.service-photo {
	margin: 0;
	min-width: 0;
}

.service-photo__frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-surface-alt);
	box-shadow: var(--shadow-md);
}

.service-photo__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.service-photo__caption {
	margin-top: var(--space-sm);
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
}

/* Wide band directly under the Compliance section header, above the
   penalty cards / law table. 21:9 keeps it a band, not a second hero. */
.service-photo--wide {
	margin-bottom: var(--space-3xl);
}

.service-photo--wide .service-photo__frame { aspect-ratio: 21 / 9; }

.service-photo--wide .service-photo__caption { text-align: center; }

@media (max-width: 700px) {
	.service-photo--wide { margin-bottom: var(--space-2xl); }
	.service-photo--wide .service-photo__frame { aspect-ratio: 16 / 10; }
}

/* ──────────────────────────────────────────────
   Our Process: steps on the left, photo on the right
   The wrapper only becomes a grid when the photo slot is filled
   (.service-process__layout--photo), so the steps keep the theme's centered
   680px column on a page without a photo. The theme's .process-list draws
   the connector line relative to itself, so it is unaffected by the grid.
   ────────────────────────────────────────────── */
.service-process__layout--photo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 40%);
	gap: var(--space-2xl) var(--space-3xl);
	align-items: start;
}

@media (min-width: 961px) {
	.service-process__layout--photo .process-list {
		max-width: none;
		margin-inline: 0;
	}
}

/* Stays in view while the five steps scroll past. The sticky offset clears
   the fixed site header. */
.service-photo--side {
	position: sticky;
	top: calc(76px + var(--space-lg));
}

.admin-bar .service-photo--side {
	top: calc(76px + 32px + var(--space-lg));
}

.service-photo--side .service-photo__frame { aspect-ratio: 4 / 3; }

@media (max-width: 960px) {
	.service-process__layout--photo { grid-template-columns: 1fr; }

	.service-photo--side {
		position: static;
		max-width: 680px;
		margin-inline: auto;
		width: 100%;
	}

	.service-photo--side .service-photo__frame { aspect-ratio: 16 / 10; }
}

/* ──────────────────────────────────────────────
   Gallery before the FAQ
   Six-track grid: a tile spans 2 (three across). Leftovers in the last row
   are widened server-side (template-parts/service-gallery.php) — half = 3
   tracks, wide = the full row — so no row ends with a lone small tile.
   ────────────────────────────────────────────── */
.service-gallery { background-color: var(--color-white); }
.service-gallery--surface { background-color: var(--color-surface); }

.service-gallery__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-lg);
}

.service-gallery__item {
	grid-column: span 2;
	position: relative;
	margin: 0;
	min-width: 0;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--color-surface-alt);
	box-shadow: var(--shadow-md);
}

.service-gallery__item--half { grid-column: span 3; }

.service-gallery__item--wide {
	grid-column: span 6;
	aspect-ratio: 21 / 9;
}

.service-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Two across: every tile takes three tracks; an odd last tile takes the row. */
@media (max-width: 1000px) {
	.service-gallery__item,
	.service-gallery__item--half,
	.service-gallery__item--wide {
		grid-column: span 3;
		aspect-ratio: 16 / 10;
	}

	.service-gallery__item--tab-full {
		grid-column: span 6;
		aspect-ratio: 2 / 1;
	}
}

/* One across. */
@media (max-width: 700px) {
	.service-gallery__grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.service-gallery__item,
	.service-gallery__item--half,
	.service-gallery__item--wide,
	.service-gallery__item--tab-full {
		grid-column: auto;
		aspect-ratio: 16 / 10;
	}
}

/* ──────────────────────────────────────────────
   Side fix: penalty cards between 481px and 1100px
   The theme's .service-penalties__grid keeps four columns down to 769px and
   the word labels ("Personal", "Lawsuits", "Denied") at --text-4xl do not fit
   a track that narrow: the grid pushed the page into horizontal scroll on
   SB 721 / SB 326 / SF 604 at 1024px and the copy inside the cards broke one
   word per line on every service page at 820px (pre-existing, measured on
   production 2026-09-24). Two columns give each card ~350px at 769px; the
   four-column track only clears the longest label ("Lawsuits", 241px at
   --text-4xl) from 1200px up, which also matches the theme's own
   .service-links breakpoint. The deck / balcony pages already use the
   two-column --word variant, which is left alone. Lives here because this
   sheet is the one loaded on all six service pages.
   ────────────────────────────────────────────── */
.service-penalties__grid > .service-penalty-card { min-width: 0; }

@media (max-width: 1199px) and (min-width: 481px) {
	.service-penalties__grid:not(.service-penalties__grid--word) {
		grid-template-columns: 1fr 1fr;
	}
}