/* ==========================================================================
   ZA APEX — RESPONSIVE + MOTION SAFETY

   Order matters: this file is loaded last so its overrides always win.
   Every breakpoint below either stacks a grid or shrinks a value — none of
   them redefine layout from scratch, which is what stops a Customizer change
   from breaking a phone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   REVEAL ANIMATIONS
   Initial states only. animations.js (or the IntersectionObserver fallback)
   adds .is-revealed. If neither runs, the no-JS block at the bottom shows
   everything — content is never trapped behind an animation that never fires.
   -------------------------------------------------------------------------- */
.za-js [data-za-reveal] {
	opacity: 0;
	transition:
		opacity var(--za-dur) var(--za-ease),
		transform var(--za-dur) var(--za-ease),
		clip-path var(--za-dur) var(--za-ease),
		filter var(--za-dur) var(--za-ease);
	transition-delay: var(--za-delay, 0s);
	will-change: opacity, transform;
}
.za-js [data-za-reveal="rise"]  { transform: translate3d(0, 42px, 0); }
.za-js [data-za-reveal="fade"]  { transform: none; }
.za-js [data-za-reveal="scale"] { transform: scale(.94); }
.za-js [data-za-reveal="blur"]  { filter: blur(12px); transform: translate3d(0, 18px, 0); }
.za-js [data-za-reveal="clip"]  { clip-path: inset(0 0 100% 0); transform: translate3d(0, 24px, 0); }
.za-js [data-za-reveal="split"] { opacity: 1; }
.za-js [data-za-reveal="split"] .za-line__i { transform: translate3d(0, 108%, 0); }

[data-za-reveal].is-revealed {
	opacity: 1;
	transform: none;
	filter: none;
	clip-path: inset(0 0 0 0);
}
[data-za-reveal="split"].is-revealed .za-line__i { transform: none; }
[data-za-reveal="split"] .za-line__i {
	transition: transform var(--za-dur) var(--za-ease);
	transition-delay: calc(var(--za-delay, 0s) + var(--i, 0) * .08s);
}

/* --------------------------------------------------------------------------
   1280px — trim the widest spacing
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
	.za-svc { grid-template-columns: repeat(min(var(--cols, 3), 3), minmax(0, 1fr)); }
	.za-gal, .za-gal--masonry { grid-template-columns: repeat(min(var(--cols, 3), 3), minmax(0, 1fr)); }
	.za-hdr { padding-inline: clamp(1rem, 3vw, var(--za-hdr-x)); }
}

/* --------------------------------------------------------------------------
   1024px — mobile navigation, single-column heroes
   The breakpoint value mirrors --za-bp so the JS and CSS agree.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.za-nav--desktop { display: none; }
	.za-burger { display: inline-flex; }
	.za-hdr__cta { display: none; }

	.za-hdr--logo-center .za-hdr__inner { display: flex; }

	.za-hero { min-height: var(--za-hero-h-m); }
	.za-hero__title { font-size: clamp(2rem, 1rem + 7vw, var(--za-hero-fs-m)); max-width: none; }
	.za-hero__inner { padding-bottom: clamp(2.5rem, 6vh, 5rem); }

	/* The deck moves behind the copy and shrinks rather than being removed:
	   the narrative is the point of the hero, so it survives on tablets. */
	.za-hero__deck { opacity: .5; }
	.za-hero__deck-stage { width: min(340px, 70vw); height: min(380px, 48vh); }
	.za-hero__deck-rail { display: none; }
	.za-hero--split .za-hero__inner { max-width: 100%; }
	.za-hero--split .za-hero__deck { width: 100%; }

	.za-proc--sticky { grid-template-columns: 1fr; }
	.za-proc--sticky .za-proc__aside { position: static; }

	.za-mt { grid-template-columns: 1fr; }
	.za-mt--img-right .za-mt__media { order: 0; }
	.za-mt__frame { display: none; }

	.za-contact { grid-template-columns: 1fr; }
	.za-cta--split .za-cta__inner { grid-template-columns: 1fr; }
	.za-cta--split .za-cta__actions { justify-content: flex-start; margin-top: 2rem; }

	.za-ftr__top { grid-template-columns: 1fr; }
	.za-ftr--split .za-ftr__top { grid-template-columns: 1fr; }

	.za-stats { grid-template-columns: repeat(2, 1fr); }
	.za-stats__item:nth-child(odd)::before { display: none; }
}

/* --------------------------------------------------------------------------
   860px
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.za-svc,
	.za-gal,
	.za-gal--masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.za-gal--masonry .za-gal__item:nth-child(4n + 1) { grid-row: span 1; }
	.za-gal__item { grid-column: span 1; }

	.za-svc--list .za-svc__item { flex-direction: column; align-items: flex-start; gap: .8rem; }
	.za-svc--list .za-svc__title { flex: none; }

	.za-text__body.is-multicol { column-count: 1; }

	.za-adjacent__inner { grid-template-columns: 1fr; gap: 1.6rem; }
	.za-adjacent__link--next { grid-column: 1; text-align: left; }

	.za-posts { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   620px — phones
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
	:root {
		--za-gutter: 20px;
		--za-hdr-x: 20px;
	}

	.za-svc,
	.za-gal,
	.za-gal--masonry,
	.za-stats { grid-template-columns: 1fr; }
	.za-stats__item::before { display: none !important; }
	.za-stats { gap: 1.8rem; }

	.za-logo__tag { display: none; }
	.za-burger__label { display: none; }

	.za-hero__deck { opacity: .32; }
	.za-hero__deck-stage { width: min(290px, 82vw); height: min(320px, 42vh); }
	.za-hero__card { padding: 1.2rem; }
	.za-hero__card-body { display: none; }

	.za-form__grid { gap: .9rem; }
	.za-field { flex-basis: 100%; }

	.za-lb__nav { width: 44px; height: 44px; }
	.za-lb__nav--prev { left: .6rem; }
	.za-lb__nav--next { right: .6rem; }
	.za-lb__close { top: .8rem; right: .8rem; }

	.za-wa__label { display: none; }
	.za-top { bottom: 5.2rem; right: 1rem; }
	.za-wa--br { right: 1rem; }
	.za-wa--bl { left: 1rem; }

	.za-slider__nav { justify-content: center; }
	.za-ftr__bar { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   TOUCH — hover effects that need a pointer
   -------------------------------------------------------------------------- */
@media (hover: none) {
	/* Captions that only appear on hover are unreachable by touch, so they
	   are shown permanently instead of being lost. */
	.za-gal__cap { opacity: 1; transform: none; }
	.za-gal__veil { opacity: .75; }
	.za-svc__sheen { display: none; }
	.za-logos__item { opacity: 1; filter: none; }
	.za-wa { gap: .6rem; padding-inline: 1.2rem; }
	.za-wa__label { max-width: 200px; }
}

/* --------------------------------------------------------------------------
   MOTION SAFETY
   Two switches: the OS-level preference, and the theme's own kill switch.
   Both collapse every animation to an instant, readable end state.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	[data-za-reveal] {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
	}
	[data-za-reveal="split"] .za-line__i { transform: none !important; }
	.za-hero__deck-stage { transform: none !important; }
	.za-hero__card {
		position: relative;
		inset: auto;
		transform: none !important;
		opacity: 1 !important;
	}
	.za-hero__deck {
		position: relative;
		perspective: none;
		display: block;
		padding-block: 2rem;
	}
	.za-hero__deck-stage { width: 100%; height: auto; display: grid; gap: 1rem; }
	.za-hero__grain,
	.za-cta__glare,
	.za-wa__pulse { display: none; }
}

.za-no-motion [data-za-reveal] {
	opacity: 1 !important;
	transform: none !important;
	filter: none !important;
	clip-path: none !important;
}
.za-no-motion .za-hero__deck-stage { transform: none !important; }

/* --------------------------------------------------------------------------
   PRINT
   -------------------------------------------------------------------------- */
@media print {
	.za-hdr, .za-mobile, .za-wa, .za-top, .za-cursor, .za-lb,
	.za-hero__deck, .za-mq, .za-slider__nav, .za-slider__dots { display: none !important; }
	body { background: #fff; color: #000; }
	.za-sec { padding-block: 1.5rem; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}