/* Homepage hero -- Phase 4. BOXED 2026-09-19 (was full-bleed): full-bleed made the
   hero photo upscale past its native width and the host's image optimizer
   softened it. Now sits in the same 1280px column as .mg-svc-wrap (same 16px
   side gutters) with --radius-md corners like the CTA tiles below. The hero
   and the 4-button CTA bar share this wrapper so they read as one card;
   overflow:hidden rounds the outer corners of both. Explicit calc width, not
   width:auto -- .site-content is display:flex on this theme and auto would
   shrink the item to its content. */
.mg-home-hero-wrap {
	width: calc(100% - 2 * var(--space-md));
	max-width: calc(1280px - 2 * var(--space-md));
	margin: var(--space-md) auto 0;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--bg);
}

.mg-home-hero {
	/* object-fit:cover is distortion-safe here since the box's own aspect-ratio
	   always matches the source image's. */
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1; /* mobile pair */
	overflow: hidden;
}
@media (min-width: 768px) {
	.mg-home-hero {
		aspect-ratio: 1600 / 700; /* desktop static image, wider format */
	}
}

.mg-home-hero-photo,
.mg-home-hero-text {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mg-home-hero-text {
	z-index: 2;
}
.mg-home-hero-photo {
	z-index: 1;
}
/* Ken Burns test on mobile removed 2026-09-14 -- Chris decided to keep the
   hero fully static on both breakpoints, matching desktop. */

.mg-home-is-desktop {
	display: none;
}
@media (min-width: 768px) {
	.mg-home-is-desktop {
		display: block;
	}
	.mg-home-is-mobile {
		display: none;
	}
}

.mg-home-cta-bar {
	position: relative;
	width: 100%;
	display: flex;
	background: var(--bg-alt);
}
.mg-home-cta-bar a {
	flex: 1;
	text-align: center;
	color: var(--ink);
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: var(--space-md) var(--space-sm);
	font-size: clamp(0.8rem, 1.6vw, 1.1rem);
	border-right: 1px solid var(--line-soft);
	transition: background-color 0.15s ease;
}
.mg-home-cta-bar a:last-child {
	border-right: none;
}
/* All four buttons share the Shop Online hover (2026-09-20): darker red background, and the label grows a little
   (the label is a span so the button box itself does not scale). Color is set on every state because GP's global
   a:hover color would otherwise win. */
.mg-home-cta-bar a:hover,
.mg-home-cta-bar a:focus,
.mg-home-cta-bar a:active {
	background: var(--accent-hover);
	color: #fff;
}
.mg-home-cta-bar a span {
	display: inline-block;
	transition: transform 0.15s ease;
}
.mg-home-cta-bar a:hover span,
.mg-home-cta-bar a:focus span {
	transform: scale(1.08);
}
/* Desktop only: below 1024px the nav pills (same destinations) are showing, so this bar would duplicate them. */
@media (max-width: 1023px) {
	.mg-home-cta-bar { display: none; }
}
@media (max-width: 640px) {
	.mg-home-cta-bar {
		flex-wrap: wrap;
	}
	.mg-home-cta-bar a {
		flex: 1 1 50%;
		border-bottom: 1px solid var(--line-soft);
	}
}

/* Visit-us row -- 1/3 address : 2/3 map, page-specific (not shared elsewhere
   yet, unlike gun-store's slider-dominant .mg-hero layout). Reuses the bare
   .mg-hero-nap/.mg-hero-map classes for their background/radius/padding (both
   already shared in tokens.css) -- only the flex ratio is overridden here. */
.mg-home-visit {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	margin-bottom: var(--space-lg);
}
.mg-home-visit .mg-hero-map {
	height: 320px;
}
.mg-home-visit .mg-hero-map iframe {
	width: 100%;
	height: 100%;
	display: block;
}
@media (min-width: 1024px) {
	.mg-home-visit {
		flex-direction: row;
		height: 420px;
	}
	/* Explicit calc'd widths, not flex-grow ratios -- flex:1/flex:2 alone measured
	   ~1.84:1 instead of 2:1 here because .mg-hero-nap's own padding (content-box
	   sizing) adds on top of its flex-computed content width. box-sizing:border-box
	   + an exact width calc sidesteps that instead of fighting it. */
	.mg-home-visit .mg-hero-nap {
		flex: 0 0 calc((100% - var(--space-md)) / 3);
		height: 100%;
		box-sizing: border-box;
		min-width: 0;
	}
	.mg-home-visit .mg-hero-map {
		flex: 0 0 calc((100% - var(--space-md)) * 2 / 3);
		height: 100%;
		box-sizing: border-box;
		min-width: 0;
	}
}

/* CTA bar (2026-09-14): Shop Online gets a red background instead of the
   shared dark one -- scoped override, not a change to .mg-home-cta-bar a
   itself since the other 3 buttons stay dark. */
.mg-home-cta-bar a.mg-home-cta-shop {
	background: var(--accent);
}
.mg-home-cta-bar a.mg-home-cta-shop:hover {
	background: var(--accent-hover);
}

/* Breathing room between the hero and the first CTA row -- Chris flagged it
   as too tight. Scoped to .mg-home so it doesn't touch .mg-svc-wrap's shared
   padding on every other page that uses that class. */
.mg-home .mg-svc-wrap {
	padding-top: var(--space-xl);
}

/* Quick-link pills above the hero (2026-09-19) -- the shared .mg-nav-pills row every services page uses, aligned to the same box as the hero. Mobile-only via tokens.css. */
.mg-home-pills {
	width: calc(100% - 2 * var(--space-md));
	max-width: calc(1280px - 2 * var(--space-md));
	margin: var(--space-md) auto 0;
}

/* Staccato dealer/exporter CTA (2026-09-23) -- one full-width photo tile that is
   the sole child of its own .mg-svc-cta-row, placed directly above the AR
   Package/Gun Safety row. Reuses that same row wrapper (boxed to the shared
   1280px .mg-svc-wrap column, 420px tall at desktop per .mg-svc-cta-row) so
   its height matches the AR Package row exactly without a new height value. */
.mg-cta-staccato {
	width: 100%;
	aspect-ratio: 2 / 1;
}
/* Mobile crops left/right (container is narrower-ratio than the 3.09:1 source
   photo) -- shift the visible crop window toward the pistol on the right side
   of the source image instead of the default center crop, which split the
   difference and cut into the subject on both edges. */
@media (max-width: 1023px) {
	.mg-cta-staccato .mg-cta-photo { object-position: 25% center; }
}
.mg-cta-staccato .mg-cta-content { max-width: 100%; }
.mg-cta-staccato .mg-cta-content h2 { font-size: 27px; }
.mg-cta-staccato .mg-cta-content p { font-size: 13px; }

/* Row height matches a single AR Package/Gun Safety tile (202px), not the
   full .mg-svc-cta-row default of 420px -- Chris's ask: same height as "the
   AR package cta" itself, which is half of that row's height since AR
   Package/Gun Safety share the row's right column as a stacked pair. */
@media (min-width: 1024px) {
	.mg-svc-cta-row-staccato { height: 202px; }
	.mg-cta-staccato {
		flex: 1;
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
	}
	.mg-cta-staccato .mg-cta-content { max-width: 65%; }
	.mg-cta-staccato .mg-cta-content h2 { font-size: 32px; }
	.mg-cta-staccato .mg-cta-content p { font-size: 15px; max-width: 560px; }
}

/* Two-button row inside a CTA tile -- Visit Store stays the existing solid
   .mg-cta-btn; Export is a new outline variant (transparent + white border)
   since a second solid red block next to it would compete rather than read
   as primary/secondary. */
.mg-cta-btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	margin-top: auto;
}
.mg-cta-btns .mg-cta-btn,
.mg-cta-btns .mg-cta-btn-outline {
	margin-top: 0;
}
/* Visit Store is a real separate <a> here (two different hrefs in one tile,
   unlike every other .mg-cta-btn instance which sits inside the single <a>
   that IS .mg-cta) -- GeneratePress's theme default a{text-decoration:underline}
   normally never reaches .mg-cta-btn because it's not an anchor itself
   elsewhere, so it never needed its own override. It does here. */
.mg-cta-btns .mg-cta-btn,
.mg-cta-btns .mg-cta-btn:hover,
.mg-cta-btns .mg-cta-btn:focus,
.mg-cta-btns .mg-cta-btn:active {
	text-decoration: none;
}
.mg-cta-btn-outline {
	display: inline-block;
	background: transparent;
	color: #fff;
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 12px;
	padding: 8px 14px;
	white-space: nowrap;
	border-radius: var(--radius-sm);
	border: 1px solid #fff;
	box-sizing: border-box;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.mg-cta-btn-outline:hover,
.mg-cta-btn-outline:focus,
.mg-cta-btn-outline:active {
	color: #fff;
	background: rgba(255, 255, 255, 0.15);
	transform: scale(1.06);
}

/* Whole-card click target (2026-09-23, rebuilt via JS -- see home.js):
   every other CTA on the site is a single <a> wrapping the whole tile, but
   Staccato has two separate hrefs, so it can't be. A pure-CSS stretched-link
   overlay (an invisible <a> absolutely positioned over the card) was tried
   first and worked in every synthetic/desktop test, but real mobile devices
   registered the tap's :active/:hover state on the card without the click
   ever reaching the overlay anchor -- through three different variations
   (z-index tweaks, removing aria-hidden) it never became reliable, so this
   was rebuilt as a plain click listener instead (home.js) rather than a 4th
   CSS-stacking theory. cursor:pointer restores the affordance a native <a>
   would have given for free, since the card itself is a <div>. */
.mg-cta-staccato {
	cursor: pointer;
}