/* =====================================================================
   HOME PAGE — Responsive polish layer (Feature 344 / US-003)

   The individual landing sections (hero, trust badges, services grid,
   trust stats, hours, CTA) each ship their own responsive rules. This
   stylesheet is the thin cohesion layer on top of them: it locks the
   whole front page to the project's canonical breakpoints — tablet at
   768px and desktop at 1024px — guarantees there is no horizontal scroll
   or overflow at any width, and gives every home call-to-action a large,
   full-width, high-contrast tap target on mobile.

   Everything is scoped under `.site-main--front` (and the component is
   enqueued on the front page only) so none of it can leak onto interior
   templates. Colours, spacing, radii and motion come from the shared
   design tokens in style.css so the page tracks the theme, including
   [data-theme="dark"]. No JavaScript — the layout is pure CSS.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Overflow containment
   A hard guarantee that no landing section can push a horizontal
   scrollbar at 768px, 1024px or anywhere between. `overflow-x: clip`
   traps any full-bleed background / decorative pseudo-element without
   creating a scroll container (so the mobile position:fixed sticky CTA
   is unaffected), and the child guard stops an over-wide embed or grid
   from spilling past the viewport.
   ------------------------------------------------------------------- */
.site-main--front {
	overflow-x: clip;
}

.site-main--front > section,
.site-main--front > div {
	max-width: 100%;
}

/* Media inside the landing sections stays fluid regardless of intrinsic
   size, so a wide shop photo or map embed can never force a scroll. */
.site-main--front img,
.site-main--front iframe,
.site-main--front svg,
.site-main--front video {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------
   2. Section rhythm at the canonical breakpoints
   Keep the two content bands that wrap in a plain container aligned to
   the same centred measure and vertical breathing room as the token
   sections, so the page reads as one composed layout rather than a
   stack of independently-spaced blocks.
   ------------------------------------------------------------------- */
.site-main--front > .site-container {
	padding-block: var(--space-section);
}

/* ---------------------------------------------------------------------
   3. Services grid → graceful collapse
   The reusable [services_grid] already steps 1 → 2 → 3 columns; here we
   only harden the boundaries at the story's breakpoints so a card can
   never be orphaned or clipped, and the "View All Services" link reads
   as a comfortable, centred control.
   ------------------------------------------------------------------- */
.site-main--front .services-grid {
	/* Let cards shrink evenly instead of overflowing on narrow tablets. */
	grid-auto-rows: 1fr;
}

.site-main--front .home-services-more__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--mytheme-touch, 44px);
}

/* Tablet (768–1023px): two comfortable columns. */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.site-main--front .services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Desktop (≥1024px): the full three-column grid. */
@media (min-width: 1024px) {
	.site-main--front .services-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------
   4. Large, tappable, high-contrast CTAs on mobile
   Below the tablet breakpoint every home call-to-action group stacks and
   its buttons go full-width with a generous ≥48px tap target (comfortably
   above the 44×44px minimum), so the primary conversions are easy to hit
   on a phone. The button colours already come from the contrasting
   orange brand token via the shared .btn styles.
   ------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.site-main--front .home-hours__actions,
	.site-main--front .home-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.site-main--front .home-hours__actions .btn,
	.site-main--front .home-cta__actions .btn,
	.site-main--front .home-services-more__link {
		width: 100%;
		min-height: 48px;
	}
}

/* ---------------------------------------------------------------------
   5. Desktop composition
   Give the hours band's two columns a balanced gutter and keep the CTA
   groups on a single row from tablet up so the actions stay side by side
   where there's room for them.
   ------------------------------------------------------------------- */
@media (min-width: 768px) {
	.site-main--front .home-cta__actions {
		flex-direction: row;
		justify-content: center;
	}
}