/* ============================================================
   ARENEX DIGITAL THEME — responsive.css
   MEDIA QUERIES ONLY (Rule 11). No standalone rules here.
   Breakpoints: 1024 (tablet), 768 (mobile), plus reduced-motion + print.
   ============================================================ */

/* ---- Tablet ---- */
@media (max-width: 1024px) {

	/* ---- section library ---- */
	.arnx-hero { grid-template-columns: 1.2fr .8fr; min-height: 0; }
	.arnx-cards--cols-4 .arnx-cards__grid { grid-template-columns: repeat(2, 1fr); }
	.arnx-cards--cols-3 .arnx-cards__grid { grid-template-columns: repeat(2, 1fr); }
	.arnx-quotes--cols-3 .arnx-quotes__grid { grid-template-columns: repeat(2, 1fr); }
	.arnx-form__inner { grid-template-columns: 1fr; }
	.arnx-band { grid-template-columns: 1fr; }
	.arnx-band__media { min-height: clamp(260px, 42vw, 420px); }
	.arnx-spec__inner { grid-template-columns: 1fr; }
	.arnx-spec__media { height: clamp(240px, 40vw, 380px); }

	:root {
		--column-gap: 40px;
	}
	.cols-2 { grid-template-columns: 1fr; }
	.site-footer--cols-4 .site-footer__inner { grid-template-columns: 1fr 1fr; }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {

	/* ---- section library ---- */
	/* One column everywhere. Explicit height on the media, NOT aspect-ratio plus
	   max-height: those two fight, because capping the height shrinks the width to
	   preserve the ratio and the image ends up narrower than its column. */
	.arnx-hero,
	.arnx-hero--media-left,
	.arnx-hero--w-bleed-right { grid-template-columns: 1fr; }
	.arnx-hero__media { order: -1; height: clamp(230px, 34vh, 340px); }
	.arnx-hero--media-left .arnx-hero__text,
	.arnx-hero__text { padding: var(--gap-lg) var(--container-padding); }
	.arnx-hero--w-bleed-right .arnx-hero__text { grid-column: auto; }
	.arnx-hero--w-bleed-right .arnx-hero__media { grid-column: auto; }

	/* Copy runs full width here, so a left-weighted scrim would leave the end of
	   every line on bare photo. Go vertical instead. */
	.arnx-hero--media-background::after,
	.arnx-band--media-background::after,
	.arnx-phero::after {
		background: linear-gradient(0deg, var(--bg-color) 4%, rgb(0 0 0 / .86) 42%, rgb(0 0 0 / .34) 100%);
	}

	.arnx-cards__grid,
	.arnx-cards--cols-2 .arnx-cards__grid,
	.arnx-cards--cols-3 .arnx-cards__grid,
	.arnx-cards--cols-4 .arnx-cards__grid { grid-template-columns: 1fr; }
	.arnx-card--feature { grid-column: auto; }

	.arnx-quotes__grid,
	.arnx-quotes--cols-2 .arnx-quotes__grid,
	.arnx-quotes--cols-3 .arnx-quotes__grid { grid-template-columns: 1fr; }

	.arnx-process--row .arnx-process__list { grid-template-columns: 1fr; }

	.arnx-stats__list { grid-template-columns: repeat(2, 1fr); }

	/* The sticky column stops earning its place once the copy is full width, so it
	   goes and each item shows its own inline image instead. This is why every item
	   renders a picture it usually hides — the fallback needs no JS and no reflow. */
	.arnx-slist__grid { grid-template-columns: 1fr; }
	.arnx-slist__media { display: none; }
	.arnx-slist__item-media { display: block; height: clamp(200px, 46vw, 300px); margin-bottom: var(--gap-sm); border-radius: var(--radius); overflow: hidden; }
	.arnx-slist__item { padding-block: var(--gap-lg); }

	.arnx-areas__list { grid-template-columns: repeat(2, 1fr); }
	.arnx-spec__row { grid-template-columns: 1fr; gap: 2px; }
	.arnx-rail__head { flex-direction: column; align-items: flex-start; }
	.arnx-rail__card { flex-basis: 78vw; }
	.arnx-stats__item { border-left: 0; padding-left: 0; }

	/* Full-width buttons: easier to hit one-handed, which is when this gets used. */
	.arnx-hero__actions .arnx-btn,
	.arnx-cta__actions .arnx-btn { width: 100%; }

	/* --container-padding is NOT hardcoded here. It is a Customizer control with
	   Desktop/Tablet/Mobile steps; a value set here would silently beat the token
	   on small screens and make the control look broken. */
	.site-header__nav { display: none; }
	.site-header--logo-centered .site-header__inner { justify-content: space-between; }
	.site-header--logo-centered .site-header__nav { position: static; }
	.site-header__toggle { display: flex; }
	/* Mobile: tighten Apply button so it fits next to hamburger. */
	.site-header__apply { padding: 8px 16px; font-size: 0.85rem; margin-left: 8px; }
	.site-header__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.site-header__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.site-header__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.site-footer__inner,
	.site-footer--cols-4 .site-footer__inner { grid-template-columns: 1fr; gap: var(--gap-lg); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {

	/* ---- section library ---- */
	.arnx-btn, .arnx-faq__marker::before, .arnx-faq__marker::after { transition: none; }

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---- Print ---- */
@media print {

	/* ---- section library ----
	   Background photos print as a solid black page on most drivers and tell the
	   reader nothing, and a tel: link loses its number on paper. */
	.arnx-hero__media, .arnx-band__media, .arnx-phero__bg, .arnx-cta__bg,
	.arnx-form__map { display: none; }
	.arnx-hero, .arnx-band, .arnx-form__inner { grid-template-columns: 1fr; }
	.arnx-faq__item { break-inside: avoid; }
	.arnx-faq__a { display: block; }
	[class*="arnx-"] a[href^="tel:"]::after { content: " (" attr(href) ")"; }

	.site-header, .site-footer, .site-header__toggle, .skip-link { display: none !important; }
	body { color: #000; background: #fff; }
}