/* Blog post template (single.php). 2026-09-20. Loads only on single posts, after tokens.css.
   Mobile: one column, DOM order = title, hero, body, verified-by, then the aside. The aside
   is display:contents on mobile so its two children (topic CTA, Visit block) can be placed
   with grid areas: title, hero, body, verified-by, CTA, Visit. Desktop 1024px+: body column +
   sticky sidebar. */
.mg-post { background: var(--bg); color: var(--ink); width: 100%; }
.mg-post-wrap { max-width: 1280px; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-xl); }

.mg-post-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "head" "hero" "body" "verified" "cta" "visit";
	gap: 0;
	margin: 0;
}
.mg-post-head { grid-area: head; }
.mg-post-hero { grid-area: hero; }
.mg-post-content { grid-area: body; }
.mg-post-verified { grid-area: verified; }
.mg-post-side { display: contents; }
.mg-post-cta { grid-area: cta; }
.mg-post-visit { grid-area: visit; }

.mg-post-h1 { font-family: var(--font-heading); font-weight: 700; font-size: 32px; line-height: 1.1; margin: 0 0 var(--space-md); color: var(--ink); }

.mg-post-hero { margin-bottom: var(--space-lg); }
.mg-post-hero img { width: 100%; height: auto; border-radius: var(--radius-md); display: block; }

.mg-post-content { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--ink); }
.mg-post-content > * { max-width: 760px; }
.mg-post-content p { margin: 0 0 var(--space-md); }
.mg-post-content h2 { font-family: var(--font-heading); font-weight: 700; font-size: 27px; line-height: 1.15; text-transform: uppercase; margin: var(--space-lg) 0 var(--space-sm); border-left: 3px solid var(--accent); padding-left: var(--space-sm); color: var(--ink); }
.mg-post-content h3 { font-family: var(--font-heading); font-weight: 700; font-size: 22px; margin: var(--space-md) 0 var(--space-sm); color: var(--ink); }
.mg-post-content ul, .mg-post-content ol { margin: 0 0 var(--space-md); padding-left: 1.4em; }
.mg-post-content li { margin-bottom: 6px; }
.mg-post-content a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.mg-post-content a:hover, .mg-post-content a:focus, .mg-post-content a:active { color: var(--ink); text-decoration-color: var(--ink); }
.mg-post-content figure, .mg-post-content .wp-block-image { margin: var(--space-lg) 0; max-width: 100%; }
.mg-post-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); display: block; }

.mg-post-verified { margin: var(--space-md) 0 var(--space-lg); padding: var(--space-md); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 14px; color: var(--ink-soft); }
.mg-post-verified a { color: var(--ink); font-weight: 700; text-decoration: underline; }
.mg-post-verified a:hover, .mg-post-verified a:focus, .mg-post-verified a:active { color: var(--ink); }

.mg-post-cta { margin-bottom: var(--space-lg); }
/* Existing [mg_cta_*] tiles are landing-page weight (.mg-cta-dominant = fixed 600x420 on desktop).
   Wrapper-scoped overrides make them fluid + compact here without touching the shared Hook
   Elements. Extra .mg-cta in the selectors beats tokens.css's 1024px+ .mg-cta-photo-lg rules. */
.mg-post-cta .mg-cta { width: 100%; flex: none; height: auto; aspect-ratio: 10 / 7; }
.mg-post-cta .mg-cta .mg-cta-content { width: auto; max-width: 75%; }
.mg-post-cta .mg-cta .mg-cta-content h2 { font-size: 27px; }
.mg-post-cta .mg-cta .mg-cta-content p { font-size: 14px; max-width: 100%; }

.mg-post-visit { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-md); margin-bottom: var(--space-lg); }
.mg-post-visit h2 { font-family: var(--font-heading); font-weight: 700; font-size: 22px; text-transform: uppercase; margin: 0 0 var(--space-sm); color: var(--ink); }
.mg-post-visit-links { display: flex; flex-direction: column; gap: var(--space-sm); }
.mg-post-visit-pair { display: flex; gap: var(--space-sm); }
.mg-post-visit-links > .mg-post-visit-btn { flex: none; }
.mg-post-visit-btn { flex: 1 1 0; min-width: 0; text-align: center; padding: 10px 12px; border: 1px solid var(--accent); border-radius: var(--radius-sm); color: var(--ink); background: transparent; text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.mg-post-visit-btn.is-primary { background: var(--accent); color: #fff; }
.mg-post-visit-btn:hover, .mg-post-visit-btn:focus, .mg-post-visit-btn:active { color: #fff; background: var(--accent-hover); border-color: var(--accent-hover); }


/* Reviews: shared .mg-reviews/.mg-review-grid/.mg-svc-see-more components from tokens.css; only the top spacing is blog-specific. */
.mg-post-reviews { margin-top: var(--space-xl); margin-bottom: 0; }

@media (min-width: 1024px) {
	.mg-post-wrap { padding-top: var(--space-xl); }
	.mg-post-grid {
		grid-template-columns: minmax(0, 1fr) 320px;
		column-gap: var(--space-lg);
		grid-template-areas: "head side" "hero side" "body side" "verified side";
		grid-template-rows: auto auto auto 1fr;
	}
	.mg-post-h1 { font-size: 44px; }
	.mg-post-content { font-size: 18px; }
	.mg-post-content h2 { font-size: 30px; }
	.mg-post-side { display: flex; flex-direction: column; gap: var(--space-md); grid-area: side; align-self: start; position: sticky; top: var(--space-md); }
	.mg-post-cta, .mg-post-visit { grid-area: auto; margin-bottom: 0; }
}

/* ===== Blog index (home.php), 2026-09-20. Cards reuse .mg-svc-card / .mg-svc-card-img /
   .mg-svc-card-name / .mg-svc-card-desc from tokens.css (the Range Packages card layout: white
   card, photo left 320px on desktop, top-bleed photo on mobile). Only the pieces specific to a
   whole-card link + this body wrapper live here. ===== */
.mg-blog-index { background: var(--bg); color: var(--ink); width: 100%; }
.mg-blog-index-wrap { max-width: 1280px; margin: 0 auto; padding: var(--space-lg) var(--space-md) var(--space-xl); }
.mg-blog-index-h1 { font-family: var(--font-heading); font-weight: 700; font-size: 32px; text-transform: uppercase; margin: 0 0 var(--space-lg); color: var(--ink); }
.mg-blog-index-list { display: flex; flex-direction: column; gap: var(--space-md); }

.mg-blog-card { text-decoration: none; border: 1px solid transparent; transition: border-color 0.15s ease; }
.mg-blog-card:hover, .mg-blog-card:focus, .mg-blog-card:active { color: var(--interrupt-text); border-color: var(--accent); }
.mg-blog-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); min-width: 0; }
.mg-blog-card-body .mg-svc-card-name { margin: 0; }
.mg-blog-card-body .mg-cta-btn { margin-top: var(--space-sm); }

@media (min-width: 768px) {
	.mg-blog-card:has(.mg-svc-card-img) { grid-template-columns: 320px 1fr; }
	.mg-blog-card:has(.mg-svc-card-img) .mg-blog-card-body { grid-column: 2; grid-row: 1; align-self: center; }
}
@media (min-width: 1024px) {
	.mg-blog-index-h1 { font-size: 50px; }
}

.mg-blog-pagination { margin-top: var(--space-lg); }
.mg-blog-index .nav-links { margin-top: var(--space-lg); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }
.mg-blog-index .nav-links .page-numbers { padding: 8px 14px; border: 1px solid var(--ink-soft); border-radius: 999px; color: var(--ink); text-decoration: none; font-family: var(--font-body); font-weight: 600; font-size: 13px; }
.mg-blog-index .nav-links a.page-numbers:hover, .mg-blog-index .nav-links a.page-numbers:focus, .mg-blog-index .nav-links a.page-numbers:active { border-color: var(--accent); color: var(--ink); }
.mg-blog-index .nav-links .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Card image: fixed box + absolutely-placed photo, so a lazy-loaded (not yet sized) image can never
   stretch the card row. Overrides the shared .mg-svc-card-img img height:100%/aspect-ratio rules. */
.mg-blog-card .mg-svc-card-img { position: relative; aspect-ratio: 16 / 9; }
.mg-blog-card .mg-svc-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
@media (min-width: 768px) {
	.mg-blog-card .mg-svc-card-img { aspect-ratio: auto; min-height: 240px; }
}