/* Miami Guns -- /gun-store/ desktop-first rebuild, 2026-09-07.
   Layout rules (see MGR Gun Store Page/miami-guns-desktop-build-notes.md #1):
   - Desktop breakpoint >=1024px. Content capped at 1280px except the one
     intentional full-bleed band (.mg-shop-banner).
   - No fluid full-width images -- every image sits in a container with an
     explicit width/height, never width:100% on an unconstrained parent.
   - Images use object-fit:cover inside fixed-aspect-ratio/fixed-height boxes.
   All .mg-img-slot elements are PLACEHOLDERS -- see page-gun-store.php header
   comment. Each carries a data-dims caption (rendered via ::after) naming its
   exact target pixel size for the follow-up image-generation pass. */

.mg-gunstore { background: var(--bg); color: var(--ink); }
.mg-gunstore-wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-md) var(--space-lg); }

/* .mg-nav-pills / .mg-nav-pill -- moved to tokens.css 2026-09-10 (shared sitewide). */

/* .mg-gunstore-intro/.mg-gunstore-h1/.mg-gunstore-sub -- moved to tokens.css
   2026-09-11 (second consumer: Range Packages page's H1/intro paragraph reuse
   these exact classes verbatim, per Chris's "hero same as gun store" call). */


/* .mg-img-slot -- moved to tokens.css 2026-09-10 (shared sitewide). */

/* .mg-hero/.mg-hero-side/.mg-hero-map/.mg-hero-nap/.mg-nap-* + the shared
   min-width:0 rule + the desktop hero media query -- moved to tokens.css 2026-09-11
   (second consumer: Range Packages page reuses gun-store's exact hero layout,
   including the fixed 843/300px desktop split, per Chris's "hero same as gun
   store" call). Verbatim move, no rule changes -- /gun-store/ itself unaffected. */


/* .mg-cta base/.mg-cta-content/.mg-cta-btn/.mg-cta-has-photo/.mg-cta-photo/.mg-cta-scrim
   -- moved to tokens.css 2026-09-10 (shared base for every [mg_cta_*] shortcode's
   gp_elements markup, not just this page's own grid). */

/* .mg-cta-photo-lg -- moved to tokens.css 2026-09-11 (second consumer: this page's
   Concealed Carry/Shop Online/Indoor Range cards were silently falling back to the
   unstyled 22px base heading size, since this class's rules only existed here). */

/* .mg-cta-dominant -- moved to tokens.css 2026-09-11 (second consumer: the Range
   Packages page's Range Membership/Shop Online/Security Guard tiles were rendering
   at inconsistent, purely content-driven heights on mobile with no explicit sizing
   rule at all -- this was the missing rule). Verbatim move, no rule changes --
   /gun-store/ itself unaffected. */


/* CTA Block 1 -- Shop Online (dominant) + 7 brand tiles + 1 "more brands" filler. */
.mg-cta-block-1 { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-md); }

.mg-brand-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.mg-brand-card {
	background: var(--card-white);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-md);
	aspect-ratio: 1 / 1;
	text-decoration: none;
	/* grid items default to min-width:auto same as flex items -- without this, the
	   filler tile's text sets a min-content width that overflows its 1fr track. */
	min-width: 0;
}
.mg-brand-card img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* A background-color hover (tried first) revealed that some brand logo files are
   JPGs with a baked-in white background rather than transparent PNGs -- swapping the
   card behind them to grey exposed their rectangular crop edge. A border avoids that
   entirely since it doesn't touch the card's own background. Reserve the border space
   at all times (transparent by default) so hovering doesn't shift layout. */
.mg-brand-card { box-sizing: border-box; border: 1px solid transparent; transition: border-color 0.15s ease; }
.mg-brand-card:hover { border-color: var(--accent); }

.mg-brand-card-more {
	position: relative;
	background: var(--accent);
	color: #fff;
	font-family: var(--font-body);
	border: 1px solid transparent;
	transition: border-color 0.15s ease;
	/* Always spans 2 of the grid's 3 columns -- keeps the filler double-wide in the
	   last row on both breakpoints, matching the wireframe's 3-row brand grid. */
	grid-column: span 2;
	aspect-ratio: auto;
}
/* White border on hover (not the grey-background swap used elsewhere) -- background/
   text color stay fixed here on purpose, this card doesn't have the JPG-crop problem
   the logo cards do since it's a plain color card, not a photo/logo. */
.mg-brand-card-more:hover, .mg-brand-card-more:focus, .mg-brand-card-more:active { border-color: #fff; color: #fff; }
.mg-brand-card-more span {
	position: absolute;
	top: var(--space-sm);
	left: var(--space-sm);
	right: var(--space-sm);
	/* Same font treatment as the CTA tile headings (e.g. "Carry Permit") --
	   .mg-cta-content h2 -- rather than the body face used elsewhere in this card. */
	font-family: var(--font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 24px;
	line-height: 1.15;
	text-align: left;
}
.mg-brand-card-more strong {
	position: absolute;
	bottom: var(--space-sm);
	right: var(--space-sm);
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.mg-cta-block-1 { flex-direction: row; align-items: stretch; height: 420px; }
	.mg-cta-block-1 .mg-brand-grid { flex: 1; grid-template-rows: repeat(3, 1fr); height: 100%; }
	.mg-cta-block-1 .mg-brand-card { aspect-ratio: auto; }
}

/* .mg-cta-side-heading-lg -- moved to tokens.css 2026-09-10. */

/* CTA Block 2 -- Indoor Range (dominant) + Carry Permit + AR Package. */
.mg-cta-block-2 { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-md); }
/* .mg-cta-side-tile -- moved to tokens.css 2026-09-10. */
.mg-cta-side { display: flex; flex-direction: column; gap: var(--space-md); }

@media (min-width: 1024px) {
	.mg-cta-block-2 { flex-direction: row; height: 420px; }
	.mg-cta-block-2 .mg-cta-side { flex: 1; height: 100%; }
	.mg-cta-block-2 .mg-cta-side-tile { flex: 1; aspect-ratio: auto; }
}

/* CTA Block 3 -- the two Range Package tiles share ONE half of the row (wrapped in
   .mg-cta-quarters), Security Guard takes the other half. Wrapping them is what makes
   this a true 50/50 split -- as 3 separate flex siblings the row would split 3 ways
   instead, which is why the center line didn't land where Chris expected at first
   (2026-09-08 fix). This means Security Guard's width here (~576px) comes from this
   block's own 50/50 math, not the shared 600px .mg-cta-dominant rule -- see the
   override below. Slightly off from Shop Online/Indoor Range's exact 600px, but close
   enough that a photo sized for one still drops cleanly into the other. */
.mg-cta-block-3 { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-xl); }
/* Side by side on mobile too now (2026-09-08), not just desktop -- both portrait
   tiles fit comfortably at roughly half the screen width each. */
.mg-cta-quarters { display: flex; flex-direction: row; gap: var(--space-md); }
/* .mg-cta-quarter -- moved to tokens.css 2026-09-11 (second consumer: the Security
   Guard page's Range Package pair). Same class, same aspect-ratio, verbatim move. */

@media (min-width: 1024px) {
	.mg-cta-block-3 { flex-direction: row; height: 420px; }
	/* Fixed 600px here (matching Block 2's dominant tile exactly), not a 50/50 flex
	   split -- this is what actually lines the divider up with the section above.
	   An even 576/576 split (tried first) was internally symmetric but landed 24px
	   off from Block 1/2's divider, which read as visibly misaligned down the page. */
	.mg-cta-quarters { flex: 0 0 600px; width: 600px; flex-direction: row; gap: var(--space-md); height: 100%; }
	.mg-cta-block-3 .mg-cta-quarter { flex: 1; aspect-ratio: auto; height: 100%; }
	.mg-cta-block-3 .mg-cta-dominant { flex: 1; width: auto; }
}

/* Featured Guns -- fixed 2x3 grid mobile, single row of 6 desktop. Real product
   photos + brand logos, not placeholders. */
.mg-featured-guns { margin-bottom: var(--space-lg); }
.mg-featured-guns h2 { font-family: var(--font-heading); font-size: 22px; margin: 0 0 var(--space-md); }
.mg-guns-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
.mg-gun-card {
	background: var(--card-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	color: var(--interrupt-text);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border: 1px solid transparent;
	transition: border-color 0.15s ease;
}
.mg-gun-card:hover { border-color: var(--accent); }
.mg-gun-card-img { aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; padding: var(--space-sm); }
.mg-gun-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mg-gun-card-cutout .mg-gun-card-img img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25)); }
.mg-gun-card-brand { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--interrupt-text); padding: 0 var(--space-sm); text-transform: uppercase; letter-spacing: 0.03em; }
.mg-gun-card-title { font-family: var(--font-body); font-weight: 700; font-size: 14px; padding: 0 var(--space-sm); }
.mg-gun-card-link { font-family: var(--font-body); font-weight: 700; font-size: 13px; color: var(--accent); text-decoration: none; padding: var(--space-sm); margin-top: auto; }


/* Tablet gets its own step (3 across, 2 rows) instead of falling through to the
   mobile 2-column rule -- at tablet widths that made each card oversized. */
@media (min-width: 768px) and (max-width: 1023px) {
	.mg-guns-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.mg-guns-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Shop CTA banner -- boxed like every other section (not full-bleed, reversed
   2026-09-08), red background matching the site's accent CTA color. */
.mg-shop-banner {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	align-items: flex-start;
	background: var(--accent);
	text-decoration: none;
	border-radius: var(--radius-md);
	padding: var(--space-lg) var(--space-md);
	margin-bottom: var(--space-lg);
	box-sizing: border-box;
	border: 1px solid transparent;
	transition: border-color 0.15s ease;
}
/* White border on hover (not red) -- same reasoning as the "Shop 1,000+ more brands"
   mini-CTA: this card is already red, a red border wouldn't read against it. Also
   locks text color explicitly since this is an <a> -- otherwise GeneratePress's global
   a:hover{color:var(--contrast)} rule wins and the white text goes dark on hover. */
.mg-shop-banner:hover, .mg-shop-banner:focus, .mg-shop-banner:active { border-color: #fff; color: #fff; }
.mg-shop-banner-text { font-family: var(--font-heading); font-weight: 700; font-size: 20px; color: #fff; }
.mg-shop-banner-btn {
	background: var(--card-white);
	color: var(--interrupt-text);
	border-radius: var(--radius-sm);
	padding: 10px 20px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}
.mg-shop-banner:hover .mg-shop-banner-btn { background: var(--interrupt-bg); }

@media (min-width: 1024px) {
	.mg-shop-banner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* .mg-reviews/.mg-review-grid/.mg-review* -- moved to tokens.css 2026-09-10 (shared
   sitewide -- every service page's Reviews section reuses this exact component). */