/* =========================================================================
   Responsive — redesigned per breakpoint, not just scaled down.
   ========================================================================= */

/* ---------- Header nav switch ----------
   Raised well above the point where the full 7-link nav can actually fit:
   calculating real character/padding widths showed the nav needs roughly
   1165-1200px minimum just for its own content, before accounting for
   font-rendering variance across browsers — and a previous, more modest
   fix (letting .nav-links shrink + tightening its padding) still wasn't
   enough, because shrinking the CONTAINER doesn't shrink links that
   individually still don't fit; centered content that doesn't fit
   overflows equally in both directions, which is exactly why the logo
   and the phone number were each colliding with the nav text next to
   them. Switching to the hamburger menu well before that point avoids
   the cramming problem entirely instead of trying to out-tune it. */
@media (max-width: 1320px) {
	.nav-links { display: none; }
	.nav-toggle { display: flex; }
	.mobile-nav { display: block; }
	.nav-cta .btn:not(.btn-primary) { display: none; }
}

/* ---------- Laptop / small desktop ---------- */
@media (max-width: 1180px) {
	.footer-top { grid-template-columns: 1fr 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }
	.process-row { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
	.process-step { border-right: none; padding-right: 0; }
	.process-step:nth-child(odd) { padding-right: 28px; border-right: 1px solid var(--stone-line); }
	.section--ink .process-step:nth-child(odd) { border-color: rgba(245,242,234,0.15); }
}

/* ---------- Tablet ---------- */
@media (max-width: 960px) {
	.hero .container { grid-template-columns: 1fr; min-height: auto; padding-block: 40px; gap: 28px; }
	.hero-media-side { order: -1; aspect-ratio: 16/10; }
	.promo-split { grid-template-columns: 1fr; }
	.trust-bar .container { gap: 14px; justify-content: center; flex-direction: column; align-items: center; text-align: center; }

	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
	.split { grid-template-columns: 1fr; }
	.split.is-reversed .split-media { order: 0; }
	.stat-row { grid-template-columns: repeat(3, 1fr); gap: 16px; }

	.booking-layout { grid-template-columns: 1fr; }
	.summary-panel { position: static; }

	.masonry { columns: 2; }

	.footer-top { grid-template-columns: 1fr 1fr; }

	.pd-tabs { overflow-x: auto; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	:root { --container-pad: 16px; }

	/* .btn's base white-space:nowrap is the right default for typical
	   short labels, but a full-width button pairing an icon with a
	   longer label ("Send via WhatsApp Instead") has no room to wrap on
	   a narrow screen — nowrap just forces it past the available width
	   instead. Only overridden for .btn-block, which is always a
	   standalone, full-width button where wrapped text isn't the
	   cramped-looking problem it would be for a normal inline button. */
	.btn-block { white-space: normal; text-align: center; }

	/* The equipment-picker row (Quote page's "Equipment Requirements", and
	   the Booking flow's own equipment step) packs an image, item name,
	   quantity stepper and a Remove button into a single flex row — at
	   this width, the stepper and Remove button had no protection against
	   being shrunk into illegibility (or effectively invisible) once the
	   item name's own text claimed the remaining space, since neither had
	   flex-shrink:0. Wrapping the row lets those controls drop to their
	   own line at full, readable size instead of everything cramming into
	   one row no matter how little space is actually available. */
	.picked-item-row { flex-wrap: wrap; row-gap: 10px; }
	.picked-item-info { flex-basis: calc(100% - 80px); }
	.qty-stepper { flex-shrink: 0; }
	.picked-item-row > .btn-ghost { flex-shrink: 0; margin-left: auto; }

	/* The Services checkboxes (Delivery/Setup/Dismantling/Collection) sit
	   in a 2-column grid on desktop, where left-aligned checkbox+label
	   pairs read naturally within each column. Once that grid collapses
	   to a single full-width column at this breakpoint, left-aligned rows
	   end up hugging one edge of an otherwise-centered form instead of
	   reading as a unified, centered group. */
	.services-grid.form-grid { justify-items: center; }
	.services-grid .checkbox-row { justify-content: center; }

	.nav-row { height: 64px; gap: 8px; }
	.mobile-nav { top: 64px; }
	.logo { font-size: 1.05rem; gap: 6px; }
	.logo-mark { height: 22px; width: auto; }
	/* The header's own "Request a Quote" button is redundant at this width
	   (the mobile nav drawer already shows a full-width version) and was
	   overflowing alongside the logo and hamburger on 320-375px screens —
	   confirmed by estimating actual rendered widths, not assumed. */
	.nav-cta .btn-primary { display: none; }

	.hero { min-height: 92vh; align-items: flex-end; }
	.hero-content { padding-block: 40px 56px; }
	.hero-ctas { flex-direction: column; align-items: stretch; }
	.hero-ctas .btn { width: 100%; }
	.hero-trust { flex-direction: column; gap: 10px; }

	.grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
	.section-head--split { flex-direction: column; align-items: flex-start; gap: 16px; }

	.process-row { grid-template-columns: 1fr; gap: 28px; }
	.process-step { border-right: none !important; padding-right: 0 !important; }

	.stat-row { grid-template-columns: 1fr; gap: 20px; text-align: left; }

	.form-grid { grid-template-columns: 1fr; }
	.field.full { grid-column: 1; }

	.catalogue-toolbar { flex-direction: column; align-items: stretch; }
	.catalogue-sort-wrap { flex-direction: column; align-items: stretch; gap: 8px; }
	.sort-select { width: 100%; }
	.search-box { max-width: none; }
	.filter-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }

	.masonry { columns: 1; }

	.booking-nav { flex-direction: column-reverse; gap: 12px; }
	.booking-nav .btn { width: 100%; }

	.footer-top { grid-template-columns: 1fr; gap: 36px; padding-bottom: 32px; }
	.footer-bottom { flex-direction: column; text-align: center; }
	.footer-newsletter-inner { flex-direction: column; align-items: flex-start; text-align: left; }
	.footer-newsletter-form { width: 100%; }
	.footer-newsletter-form input { flex: 1; min-width: 0; }

	.pd-price-box .amount { font-size: 1.6rem; }
	.pd-meta-list li { flex-direction: column; gap: 2px; }

	.pricing-table { display: block; overflow-x: auto; white-space: nowrap; }

	.back-to-top { width: 42px; height: 42px; bottom: 16px; left: 16px; }
	.toast-stack { left: 16px; right: 16px; bottom: 16px; }
	.toast { max-width: none; }

	.lightbox { padding: 16px; }
	.lightbox-prev, .lightbox-next { width: 38px; height: 38px; }
}

@media (max-width: 400px) {
	h1, .h1 { font-size: 2.1rem; }
	.category-card, .product-card { border-radius: var(--radius-sm); }
}