/* GabionX — responsive layout chrome (mobile-first structural breakpoints).
		3-tier system: 1040 (tablet landscape) · 768 (tablet portrait, nav toggle) · 560 (large phone). */

/* ---- Tablet landscape (≤1040px): 4-col grids to 2-col + nav toggle ----
				Nav switches to hamburger here (not at 768) because the full desktop
				row — Головна+dropdown, Зроби сам, Контакти, phone pill — stops
				fitting somewhere around 1040-1200px depending on locale string
				widths; 768 left a "squeeze zone" where items got cut off/overlapped. */
@media (max-width: 1040px) {
	/* nav: swap the desktop link row for a hamburger-triggered dropdown panel */
	nav {
		position: relative;
	}

	.nav-toggle {
		display: inline-flex;
	}

	/* the fixed .gx-callbar already carries "Подзвонити" on every mobile page —
			the header's phone pill would be a second, redundant call button */
	.gx-btn--phone {
		display: none;
	}

	.gx-hero__logo {
		width: 132px;
		height: auto;
	}

	.gx-hero__head {
		gap: 20px;
	}

	.nav-links {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		position: absolute;
		top: calc(100% + 14px);
		right: 0;
		min-width: 230px;
		padding: 14px var(--gutter);
		border-radius: var(--radius-md);
		background: rgba(12, 17, 24, .88);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		border: 1px solid var(--white-13);
		box-shadow: 0 24px 54px rgba(0, 0, 0, .5);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		pointer-events: none;
		transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
	}

	.nav-links>a {
		width: 100%;
	}

	.nav-links a {
		padding: 9px 0;
	}

	.nav-links.is-open {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}
}

/* ---- Tablet portrait (≤768px): full single-column stack ---- */
@media (max-width: 768px) {

	/* .gx-page prefix: these grids get their desktop columns from page CSS,
			which loads after this file — the extra class outranks those 0-1-0 rules */
	.gx-page .calc-grid,
	.gx-page .gx-cta-split,
	.gx-page .contacts-grid {
		grid-template-columns: 1fr;
	}

	/* single-column stack: a sticky result panel would float over the sliders above it */
	.gx-panel--sticky {
		position: static;
	}

	/* header rows with a title + a side lead paragraph stack full-width */
	.gx-head-split {
		flex-direction: column;
		align-items: flex-start;
	}

	/* the dark image cell is a hover preview for pointer devices — no use on touch/mobile */
	.gx-cta-split__media {
		min-height: 320px;
	}

	/* desktop-only hero project card overlaps content on small screens
			(nothing else declares display for it, so no specificity fight) */
	#gxh-slider {
		display: none;
	}

	/* let the draggable works canvas breathe a little less tall.
			:not(.works-mob) — once gallery.js switches the section to the mobile
			carousel it must size to content instead; 1-1-1 here outranks the
			.works-shell sizing in home.css */
	#works:not(.works-mob) {
		min-height: 78vh;
	}

	/* hero: avoid mobile-browser address-bar viewport jump */
	.gx-hero--full {
		height: 100svh;
	}

	/* tall-hero pages (contacts): the mobile header is position:fixed (out of
	   flow), so the flow content must clear its ~84px — the base 9vh top padding
	   left the eyebrow tucked under the logo */
	.gx-hero--tall .gx-hero__content--flow {
		padding-top: 116px;
	}
}

/* ---- Desktop sticky header: a condensed translucent bar slides in once the
				static header has scrolled out of view. In-flow heroes (constructions/contacts)
				compensate the removed header height via :has(), so the layout never jumps;
				the home hero's header is absolute and needs no compensation. ---- */
@media (min-width: 769px) {
	@keyframes gx-head-in {
		from {
			transform: translateY(-100%);
		}

		to {
			transform: translateY(0);
		}
	}

	/* Paint (bg/shadow) eases BOTH ways so the header reads as one element
	   changing state. GEOMETRY (padding + logo height) is direction-aware: the
	   transition lives on .is-scrolled, so it animates when the class is ADDED
	   (pin — header is fixed/out of flow, content is held by the 84px :has()
	   pad, so morphing is safe) but SNAPS when removed (release). Snapping on
	   release is the whole fix: the in-flow header returns to its full 84px in
	   the same frame the 84px compensation is dropped, so the content below
	   never jumps by the 24px the old easing left uncovered. */
	.gx-page .gx-hero__head {
		transition: background-color .35s ease, box-shadow .35s ease;
	}

	.gx-page .gx-hero__head .gx-hero__logo {
		transition: none; /* overrides the components.css base — snap on release */
	}

	.gx-page .gx-hero__head.is-scrolled {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 950;
		padding-top: 12px;
		padding-bottom: 12px;
		background: rgba(12, 17, 24, .72);
		-webkit-backdrop-filter: blur(14px);
		backdrop-filter: blur(14px);
		box-shadow: 0 10px 34px rgba(0, 0, 0, .22);
		transition: background-color .35s ease, box-shadow .35s ease,
			padding .3s var(--ease);
		animation: gx-head-in .45s var(--ease);
	}

	.gx-page .gx-hero__head.is-scrolled .gx-hero__logo {
		height: 36px;
		transition: height .3s var(--ease); /* morphs on pin only (added-class state) */
	}

	.gx-page .gx-hero--tall:has(> .gx-hero__head.is-scrolled) {
		padding-top: 84px;
	}

	/* anchor targets stay clear of the fixed bar */
	.gx-page [id] {
		scroll-margin-top: 92px;
	}
}

/* ---- Large phone (≤560px): tighten header/hero side gutters ---- */
@media (max-width: 560px) {
	.gx-hero__head {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* ---- Mobile content refinements (placed after the generic collapse above
				so these more-specific layouts win the cascade) ---- */
@media (max-width: 768px) {

	/* footer CTA band: heading above the phone form — the desktop 1.5fr/1fr pair
			pushed the form off the right edge of the screen on phones */
	.gx-cta-band {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 30px;
	}

	.gx-pill-form {
		max-width: none;
	}

	/* footer: logo full-width, link columns pair up side by side */
	.gx-grid-footer {
		grid-template-columns: 1fr 1fr;
	}

	.gx-grid-footer>div:first-child {
		grid-column: 1 / -1;
	}

	/* ---- mobile header + full-screen drawer (shared: every page has the same nav) ---- */
	/* ---- sticky header ---- */
	.gx-page .gx-hero__head {
		position: fixed; top: 0; left: 0; right: 0; z-index: 950;
		background-color: transparent;
		transition: background-color .35s ease, padding .35s ease;
	}
	.gx-page .gx-hero__head.is-scrolled {
		background-color: rgba(12,17,24,.72);
		-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	}
	/* while the fullscreen menu is open the header must NOT carry backdrop-filter:
	   in Chromium it becomes the containing block for fixed descendants, so the
	   inset:0 drawer would collapse to the header's 90px box (links floating over
	   the page with no backdrop). The drawer brings its own dark blur anyway. */
	.gx-page .gx-hero__head:has(.nav-links.is-open) {
		-webkit-backdrop-filter: none; backdrop-filter: none;
		background-color: transparent;
	}
	/* header children must stack above the full-screen drawer (z 940, a child of this
			header) — otherwise the open drawer covers the hamburger and the menu can't be closed */
	.gx-page .gx-hero__logo,
	.gx-page .nav-calc,
	.gx-page .nav-toggle { position: relative; z-index: 941; }
	/* the quick-calculator icon matches the phone circle */
	.gx-page .nav-calc {
		width: 44px; height: 44px;
		border: 1px solid var(--white-24);
		background: rgba(12,17,24,.4);
		-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	}
	/* fixed header ≈ 96px tall: keep anchor targets (#calc, #services…) out from under it */
	.gx-page [id] { scroll-margin-top: 104px; }
	.gx-page .nav-toggle {
		border: 1px solid var(--white-24);
		background: rgba(12,17,24,.4);
		-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	}

	/* ---- full-screen drawer (replaces the small dropdown panel) ---- */
	.gx-page .nav-links > a,
	.gx-page .nav-links > .gx-nav-item { display: none; }
	.gx-page .nav-links {
		position: fixed; inset: 0; top: 0; right: 0; z-index: 940;
		display: flex; flex-direction: column; justify-content: center; align-items: stretch;
		padding: 0 28px; gap: 0; min-width: 0;
		background: rgba(9, 12, 17, .82); border: none; border-radius: 0; box-shadow: none;
		-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
		opacity: 0; visibility: hidden; pointer-events: none; transform: none;
		transition: opacity .45s ease, visibility .45s ease;
	}
	.gx-page .nav-links.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
	.gx-page .mobile-drawer-links { display: flex; flex-direction: column; gap: 6px; counter-reset: mnav; }
	.gx-page .mobile-drawer-links::before {
		content: 'Меню';
		font: 600 10.5px/1 var(--font-sans); letter-spacing: .22em; text-transform: uppercase;
		color: var(--white-50); margin-bottom: 16px;
	}
	/* direct children only — the CTA button and social links inside have their own look */
	.gx-page .mobile-drawer-links > a {
		width: 100%; padding: 13px 0;
		font: 300 37px/1.1 var(--font-serif); color: var(--white); text-decoration: none;
		border-bottom: 1px solid var(--white-13);
	}
	.gx-page .mobile-drawer-links > a::before {
		counter-increment: mnav;
		content: counter(mnav, decimal-leading-zero);
		display: inline-block;
		margin-right: 16px;
		font: 600 11px/1 var(--font-sans); letter-spacing: .08em;
		color: var(--green);
		transform: translateY(-14px);
	}
	.gx-page .mobile-drawer-links > a:last-of-type { border-bottom: none; }
	/* staggered entrance: links rise one after another as the overlay settles;
	   collapse instantly on close (delays live only under .is-open) */
	.gx-page .mobile-drawer-links > a,
	.gx-page .mobile-drawer-cta {
		opacity: 0; transform: translateY(22px);
		transition: opacity .45s var(--ease), transform .5s var(--ease);
	}
	.gx-page .nav-links.is-open .mobile-drawer-links > a,
	.gx-page .nav-links.is-open .mobile-drawer-cta { opacity: 1; transform: none; }
	.gx-page .nav-links.is-open .mobile-drawer-links > a:nth-of-type(1) { transition-delay: .08s; }
	.gx-page .nav-links.is-open .mobile-drawer-links > a:nth-of-type(2) { transition-delay: .13s; }
	.gx-page .nav-links.is-open .mobile-drawer-links > a:nth-of-type(3) { transition-delay: .18s; }
	.gx-page .nav-links.is-open .mobile-drawer-links > a:nth-of-type(4) { transition-delay: .23s; }
	.gx-page .nav-links.is-open .mobile-drawer-links > a:nth-of-type(5) { transition-delay: .28s; }
	.gx-page .nav-links.is-open .mobile-drawer-links > a:nth-of-type(6) { transition-delay: .33s; }
	.gx-page .nav-links.is-open .mobile-drawer-cta { transition-delay: .4s; }
	@media (prefers-reduced-motion: reduce) {
		.gx-page .mobile-drawer-links > a,
		.gx-page .mobile-drawer-cta { opacity: 1; transform: none; transition: none; }
	}
	.gx-page .mobile-drawer-cta { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
	.gx-page .mobile-drawer-cta .gx-btn--primary { padding-top: 17px; padding-bottom: 17px; }
	.gx-page .mobile-drawer-cta .gx-btn { font-size: 12px; letter-spacing: .02em; padding-left: 16px; padding-right: 16px; }
	.gx-page .mobile-drawer-social { display: flex; justify-content: center; gap: 22px; padding-top: 10px; }
	.gx-page .mobile-drawer-social a {
		font: 500 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
		color: var(--white-60); text-decoration: none;
	}

	/* calculator material photos stay a compact pair, never single-column
			(.gx-page outranks the single-class desktop rule in home.css) */
	.gx-page .calc-materials {
		grid-template-columns: 1fr 1fr;
	}
}