/* Miami Guns -- /gun-range2/ (Range Packages), built 2026-09-11. Reuses two existing
   component systems verbatim rather than redefining them: gun-store's H1/intro/hero
   (tokens.css .mg-gunstore- and .mg-hero- classes, per Chris's "hero same as gun store" call)
   and Security Guard's services-page skeleton (tokens.css .mg-svc-*, crumb/jump-pills/
   service-cards/note/cross-page-cta-row). This file only holds what's genuinely new
   to this page: the 4-box price row, and the service-card image treatment (Security
   Guard's cards have no images -- "none exist for these courses" -- but real package
   photos exist here, so cards get a top image block the shared .mg-svc-card base
   doesn't already provide). */

/* Price row -- 4 boxes desktop, 2x2 mobile, per Chris 2026-09-11. Large price value,
   smaller label above it -- same white-card-on-dark-page pattern as .mg-svc-card/
   .mg-review/.mg-brand-card (not a new color pair). */
.mg-price-row {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-sm);
	margin-bottom: var(--space-xl);
}
.mg-price-box {
	background: var(--card-white);
	color: var(--interrupt-text);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
}
.mg-price-box-label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--interrupt-text);
}
.mg-price-box-value {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 32px;
	line-height: 1;
}
@media (min-width: 1024px) {
	.mg-price-row { grid-template-columns: repeat(4, 1fr); }
	.mg-price-box-value { font-size: 40px; }
}

/* .mg-svc-card-img (+ its 768px image-left/details-right layout) -- moved to
   tokens.css 2026-09-11 (second consumer: the Concealed Carry page uses it for its
   one photographed course card). Verbatim, same pattern as every other .mg-svc-*
   move already made this session. */

/* Package "includes" bullet list -- BigCommerce's own product descriptions for these
   3 packages are feature lists ("Package Includes: 1 hour of range time..."), not
   prose sentences, so this page renders a real <ul> instead of reusing Security
   Guard's mg_svc_split_first_sentence() prose-splitting helper (page-security-guard.php)
   built for paragraph copy. Matches .mg-svc-card-desc's existing type size/weight. */
.mg-svc-card-list {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
	padding-left: 1.1em;
}
.mg-svc-card-list li { margin-bottom: 2px; }
.mg-svc-card-list li:last-child { margin-bottom: 0; }

/* CTA row alignment fix, per Chris 2026-09-11 ("center line for the top and bottom
   row of ctas doesn't match up"). The shared .mg-svc-cta-quarters rule (tokens.css,
   moved from security-guard.css) is a FIXED 600px, tuned there to match gun-store's
   own fixed-600px .mg-cta-dominant elsewhere on that page -- correct for Security
   Guard, but wrong here: this page's two CTA rows sit directly on top of each other,
   so they need to split at the SAME point, not each be independently "close to"
   600px. Row 2 (Shop Online + Security Guard) already splits a true 50/50 via
   flex:1 on both .mg-cta-dominant tiles (tokens.css); overriding the quarters
   wrapper to flex:1 here too makes Row 1 split at the identical 50% line instead of
   "whatever's left after a fixed 600px," which is what was landing a few percent off
   depending on viewport width. */
@media (min-width: 1024px) {
	/* Selector must match tokens.css's compound `.mg-svc-cta-row .mg-svc-cta-quarters`
	   specificity -- a bare `.mg-svc-cta-quarters` (tried first) lost the cascade to
	   that more specific rule regardless of file load order, so the override silently
	   never applied (caught via getBoundingClientRect() showing quarters still at a
	   fixed 600px after this "fix"). */
	.mg-svc-cta-row .mg-svc-cta-quarters { flex: 1; width: auto; min-width: 0; }
}

/* Extra gap above the hero slider, per Chris 2026-09-11 -- the shared .mg-svc-jump
   rule's padding-bottom (tokens.css, --space-xl) doesn't render as real visible
   space here: overflow-x:auto on that row reserves scrollbar-gutter space that eats
   into the declared padding, so the pills and the slider ended up nearly touching
   despite the CSS value looking correct. Added directly on .mg-hero rather than
   further inflating .mg-svc-jump's own padding (shared with Security Guard, wasn't
   asked to change that page). */
.mg-hero { margin-top: var(--space-md); }

/* Jump-link pills, mobile only -- per Chris 2026-09-11, matching the pattern already
   established for .mg-nav-pills (tokens.css) elsewhere on the site. Scoped to this
   page's own file (not tokens.css) since Security Guard wasn't asked to change. */
@media (min-width: 1024px) {
	.mg-svc-jump { display: none; }
}

/* Carry Permit + Gun Safety should match the taller portrait-tile look used
   elsewhere on the site (gun-store's own Range Package pair, .mg-cta-quarter,
   41/60) instead of .mg-cta-side-tile's shared 2/1 landscape ratio -- confirmed by
   Chris via a gun-store mobile screenshot showing that pair matching Become a
   Security Guard's height exactly. flex:1/min-width:0 (not present on the shared
   .mg-cta-side-tile) makes the two tiles split evenly instead of by natural text
   width ("Carry Permit" vs "Gun Safety" measured 164px/148px before this). Desktop
   is unaffected -- already correct there via the row's own align-items:stretch
   (confirmed by screenshot), so this fix is deliberately mobile-scoped only. */
@media (max-width: 1023.98px) {
	.mg-svc-cta-quarters .mg-cta-side-tile {
		aspect-ratio: 41 / 60;
		flex: 1;
		min-width: 0;
	}
}

/* Range Membership's heading was wrapping to 2 lines on mobile inside the shared
   .mg-cta-photo-lg .mg-cta-content's 50% width (tokens.css) -- per Chris 2026-09-11,
   widened for just this tile via a second class added directly on its gp_elements
   markup (id 4663), not a change to the shared .mg-cta-photo-lg rule other CTA
   tiles also use. 62% roughly matches the scrim gradient's own dark coverage
   (tokens.css .mg-cta-scrim stops at 62%), so text stays over the dark portion of
   the photo instead of extending into the lighter, harder-to-read area. */
.mg-cta-content-wide { width: 62% !important; }

/* Extra breathing room between the packages and the FAQ, per Chris 2026-09-11 --
   the shared .mg-svc-body rule (tokens.css) only sets margin-BOTTOM, so the gap
   above it was just .mg-svc-note's own margin-bottom (--space-lg, 32px). Compound
   selector (.mg-svc-wrap .mg-svc-body) matches tokens.css's own bare .mg-svc-body
   at higher specificity so this wins regardless of file load order -- same fix
   shape as the CTA-quarters override above, applied correctly the first time here. */
.mg-svc-wrap .mg-svc-body { margin-top: var(--space-xl); }