/* Responsive adjustments — breakpoints in em to respect OS scaling. */

/* Tablets & below */
@media (max-width: 64em) {           /* ≤1024px @ 16px */
	.section--about__grid,
	.section--hub__grid,
	.section--why__grid,
	.section--contact__grid { grid-template-columns: 1fr; }
	.contact-form__row { grid-template-columns: 1fr; }

	/* Mobile header: brand | (flex spacer) | CTA + hamburger on right.
	   The CTA sits immediately before the hamburger so the right side
	   reads as a tight action cluster instead of an isolated centered
	   pill. */
	.site-header__inner {
		grid-template-columns: auto 1fr auto auto;
		gap: var(--sp-3);
	}
	.site-header__cta { order: 2; justify-self: end; margin-left: auto; }
	.site-nav        { order: 3; justify-self: end; }

	.site-nav__toggle { display: inline-flex; z-index: 102; position: relative; }

	/* Full-viewport overlay menu — items start near the top with a
	   comfortable offset from the X button. */
	.site-nav__menu {
		position: fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		width: 100%;
		height: 100svh;
		background: #000;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: var(--sp-4);
		padding: clamp(5rem, 12vh, 8rem) var(--sp-5) var(--sp-6);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity var(--dur-2) var(--ease-out-quint), visibility 0s linear var(--dur-2);
		z-index: 101;
		font-size: var(--fs-h3);
		overflow-y: auto;
	}
	.site-nav.is-open .site-nav__menu {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity var(--dur-2) var(--ease-out-quint), visibility 0s;
	}
	.site-nav__menu a { color: #fff; opacity: 1; padding-block: var(--sp-2); display: block; }
	.site-nav__menu a:hover { opacity: 0.7; }

	/* Hamburger → X animation when menu is open. */
	.site-nav__toggle-bar { transition: transform var(--dur-1) var(--ease-out-quint), opacity var(--dur-1); transform-origin: center; }
	.site-nav.is-open .site-nav__toggle-bar:nth-child(1) { transform: translateY(0.425rem) rotate(45deg); }
	.site-nav.is-open .site-nav__toggle-bar:nth-child(2) { opacity: 0; }
	.site-nav.is-open .site-nav__toggle-bar:nth-child(3) { transform: translateY(-0.425rem) rotate(-45deg); }
}

/* Tablets: multi-col grids collapse */
@media (max-width: 64em) {
	.service-grid { grid-template-columns: repeat(3, 1fr); }
	.product-grid { grid-template-columns: repeat(2, 1fr); }
	.channel-grid { grid-template-columns: repeat(2, 1fr); }
	.section--channels__head { flex-direction: column; align-items: flex-start; }
	.section--channels__cta { align-self: flex-start; }
}

/* Testimonials: stack person above body on small screens; hide
   prev/next arrows — pagination dots + auto-advance carry the
   carousel. Centre everything so the card reads as a single
   stacked column on phones. */
@media (max-width: 48em) {
	.testimonial-carousel { padding: var(--sp-4) var(--sp-3); }
	.testimonial-card,
	.testimonial-card.is-active { grid-template-columns: 1fr; row-gap: var(--sp-4); text-align: center; }
	.testimonial-card__person { border-right: 0; padding-right: 0; padding-bottom: var(--sp-4); border-bottom: 0; align-items: center; text-align: center; }
	.testimonial-card .testimonial-card__body,
	.testimonial-carousel .testimonial-card__body {
		font-size: var(--fs-h5);
		color: #000104;
		line-height: 1.5;
		margin: 0;
		padding: 0;
		border: 0;
		font-weight: 500;
		text-align: center;
		letter-spacing: -0.005em;
	}
	.testimonial-card__body-wrap { width: 100%; align-items: center; text-align: center; }
	.testimonial-carousel__nav { display: none; }
	/* Show dots only on mobile (where arrows are hidden) so the user
	   knows multiple testimonials exist. Hidden on desktop because
	   the prev/next arrows already cover that role. */
	.testimonial-carousel__dots { display: flex; margin-top: var(--sp-4); }
}

/* Tablet: footer collapses top row */
@media (max-width: 64em) {
	.footer-top { grid-template-columns: 1fr; gap: var(--sp-5); }
	.footer-nav { justify-content: flex-start; }
	.footer-nav__menu { justify-content: flex-start; }
	.footer-partner { text-align: left; }
	.footer-partner__logo,
	.footer-partner__address { margin-left: 0; }
}

/* intl-tel-input phone field — mobile-only padding so the
   placeholder/cursor sits just after the dial code with one
   space of breathing room. The native --iti-selected-country-
   arrow-padding only accounts for the flag + arrow (~36px); with
   separateDialCode: true we need ~30px more for "+XXX" plus a
   small gap, so we use a calc that adds 3em (≈48px at the input
   font size) on top of the library's base padding. !important is
   needed to beat the desktop clamp rule (also !important) in
   main.css. */
@media (max-width: 48em) {
	.iti--allow-dropdown input.iti__tel-input,
	.iti--allow-dropdown input.iti__tel-input[type="tel"],
	.iti--allow-dropdown input.iti__tel-input[type="text"] {
		padding-right: var(--iti-input-padding) !important;
		padding-left: calc(var(--iti-selected-country-arrow-padding) + 2.5em) !important;
		padding-inline-start: calc(var(--iti-selected-country-arrow-padding) + 2.5em) !important;
		margin-left: 0 !important;
	}
}

/* Phones */
@media (max-width: 40em) {           /* ≤640px */
	.service-grid { grid-template-columns: repeat(2, 1fr); }
	.footer-bottom { flex-direction: column; align-items: flex-start; }
	/* Hide the footer Quick Links nav on phones — the same links
	   are reachable from the hamburger menu, so the duplicate row
	   just adds vertical noise. */
	.footer-nav { display: none; }

	/* Shared scroll-snap slider behaviour for grids that benefit from
	   horizontal swipe on mobile. */
	.product-grid,
	.channel-grid {
		display: flex;
		grid-template-columns: none;
		gap: var(--sp-3);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		overscroll-behavior-x: contain;
		padding-block: var(--sp-2) var(--sp-3);
		padding-inline: var(--container-pad);
		margin-inline: calc(-1 * var(--container-pad));
		scrollbar-width: none;
		scroll-padding-inline: var(--container-pad);
	}
	.product-grid::-webkit-scrollbar,
	.channel-grid::-webkit-scrollbar { display: none; }

	/* Card widths — products and channels both show one full card with
	   the next peeking, since each has rich imagery. */
	.product-card { flex: 0 0 80%; scroll-snap-align: start; scroll-snap-stop: always; }
	.channel-card { flex: 0 0 80%; scroll-snap-align: start; scroll-snap-stop: always; }
	.product-card__inner,
	.channel-card__inner { transition: transform var(--dur-2) var(--ease-out-quint), box-shadow var(--dur-2); }
	.product-card:last-child,
	.channel-card:last-child { margin-right: var(--container-pad); }
	.footer-grid { grid-template-columns: 1fr; }
	.contact-form__row { grid-template-columns: 1fr; }
	/* Phones: shorter banner so it doesn't eat the entire first
	   viewport. The headline + CTAs still fit comfortably and the
	   image stays prominent without being an 80svh wall. Releasing
	   aspect-ratio prevents the wide 1920×950 ratio from forcing
	   extra height on a portrait viewport. */
	.section--banner {
		aspect-ratio: auto;
		min-height: 0;
		max-height: none;
		height: clamp(26rem, 60svh, 32rem);
	}
	.section--banner__inner { max-width: 100%; }

	/* Tighter CTA on phones so centered pill doesn't crowd the hamburger */
	.site-header__cta {
		padding: clamp(0.55rem, 0.4rem + 0.4vw, 0.8rem) clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
		font-size: var(--fs-sm);
	}
}

/* TV / 4K — expand container & chunk up fonts */
@media (min-width: 120em) {          /* ≥1920px */
	:root {
		--container-max: var(--container-max-tv);
	}
}
@media (min-width: 160em) {          /* ≥2560px */
	:root { --container-max: 140rem; }
}

/* Safe-area for notched devices */
@supports (padding: max(0px)) {
	.site-header__inner { padding-inline: max(var(--container-pad), env(safe-area-inset-left)); }
}

/* Contrast / forced colors */
@media (forced-colors: active) {
	.btn--primary, .btn--ghost { border: 1px solid CanvasText; }
}