/* Magiczne Geny — theme styles. Everything maps to Stellar design tokens. */

:root {
	--mg-bg: var(--neutral-2);
	--mg-surface: var(--neutral-1);
	--mg-ink: var(--neutral-12);
	--mg-muted: var(--neutral-8);
	--mg-line: var(--neutral-4);
	--mg-gold: var(--named-gold-0);
	--mg-gold-ink: var(--neutral-12);        /* dark text on gold — WCAG AA (~7:1) */
	--mg-dark: var(--primary-11);
	--mg-dark-ink: var(--neutral-1);
	--mg-accent: var(--named-forest-0);

	--mg-font-head: var(--font-antique);
	--mg-font-body: var(--font-geometric-humanist);

	--mg-shell: 72rem;
	--mg-ico-badge: 3rem;

	/* Unitless heading line-heights: Stellar's --font-line-height-* are absolute
	   rem values tuned to body text and overlap on fluid display sizes. */
	--mg-lh-tight: 1.1;
	--mg-lh-snug: 1.25;
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 6rem; }

body {
	margin: 0;
	background: var(--mg-bg);
	color: var(--mg-ink);
	font-family: var(--mg-font-body);
	font-size: var(--font-size-0);
	line-height: var(--font-line-height-2);
}

h1, h2, h3 {
	font-family: var(--mg-font-head);
	line-height: var(--mg-lh-snug);
	letter-spacing: var(--font-letter-spacing--1);
	text-wrap: balance;
	margin: 0 0 var(--size-4);
}

h1 { font-size: var(--font-size-7); }
h2 { font-size: var(--font-size-5); }
h3 { font-size: var(--font-size-2); }

p { margin: 0 0 var(--size-3); text-wrap: pretty; }

a { color: var(--mg-accent); }
a:hover { color: var(--mg-dark); text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.mg-skip {
	position: absolute;
	left: -9999px;
	top: var(--size-1);
	background: var(--mg-dark);
	color: var(--mg-dark-ink);
	padding: var(--size-2) var(--size-3);
	border-radius: var(--border-radius-2);
	z-index: var(--zindex-tooltip);
}
.mg-skip:focus { left: var(--size-3); }

/* ---------- layout ---------- */
.mg-shell {
	width: 100%;
	max-width: var(--mg-shell);
	margin-inline: auto;
	padding-inline: var(--size-4);
}

.mg-section { padding-block: var(--size-10); }
.mg-section--tint { background: var(--primary-1); }
.mg-section--dark { background: var(--mg-dark); color: var(--mg-dark-ink); }
.mg-section--dark h2 { color: var(--mg-dark-ink); }

.mg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--size-2);
	font-family: var(--mg-font-body);
	text-transform: uppercase;
	letter-spacing: var(--font-letter-spacing-3);
	font-size: var(--font-size-0);
	font-weight: var(--font-weight-semi-bold);
	color: var(--mg-accent);            /* forest green — passes AA on light */
	margin: 0 0 var(--size-3);
}
.mg-eyebrow::before {
	content: "";
	width: var(--size-5);
	height: var(--border-width-2);
	background: var(--mg-gold);
	border-radius: var(--border-radius-1);
}
.mg-section--dark .mg-eyebrow { color: var(--mg-gold); }   /* gold on dark — passes AA */

/* ---------- emblem / logo ---------- */
.mg-emblem {
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	background: var(--neutral-1);
	box-shadow: 0 0 0 var(--border-width-1) var(--mg-line);
}

/* ---------- icons ---------- */
.mg-ico { width: 1.5rem; height: 1.5rem; display: block; }
.mg-card__ico,
.mg-fact__ico,
.mg-contact__ico {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: var(--mg-ico-badge);
	height: var(--mg-ico-badge);
	border-radius: var(--border-radius-4);
	background: var(--primary-1);
	color: var(--mg-accent);
}
.mg-card__ico { margin-bottom: var(--size-3); }
.mg-section--dark .mg-contact__ico {
	background: color-mix(in oklch, var(--mg-gold) 18%, transparent);
	color: var(--mg-gold);
}

/* ---------- litter announcement banner ---------- */
.mg-announce { margin: var(--size-4) auto 0; max-width: 42rem; }
.mg-announce img { width: 100%; height: auto; border-radius: var(--border-radius-4); box-shadow: var(--shadow-3); }

/* ---------- dog (parent) cards ---------- */
.mg-dogcard { display: grid; gap: var(--size-2); align-content: start; }
.mg-dogcard h2 { font-size: var(--font-size-3); margin: 0; }
.mg-dogcard__role { display: inline-flex; align-items: center; gap: var(--size-2); margin: 0; text-transform: uppercase; letter-spacing: var(--font-letter-spacing-2); font-size: var(--font-size-0); font-weight: var(--font-weight-semi-bold); color: var(--mg-accent); }
.mg-dogcard__role .mg-card__ico { width: 1.6rem; height: 1.6rem; margin: 0; background: none; color: var(--mg-gold); }
.mg-dogcard__role .mg-ico { width: 1.6rem; height: 1.6rem; }
.mg-dogcard__char { color: var(--mg-muted); font-style: italic; margin: 0; }
.mg-dogcard__titles { font-weight: var(--font-weight-semi-bold); margin: 0; color: var(--mg-ink); }
.mg-dogcard__health { color: var(--mg-muted); font-size: var(--font-size-0); margin: 0; }
.mg-dogcard__ped { font-size: var(--font-size-0); margin: 0; }

/* ---------- parents list ---------- */
.mg-parents { list-style: none; margin: var(--size-3) 0; padding: 0; display: grid; gap: var(--size-2); }
.mg-parents li { color: var(--mg-muted); }
.mg-parents__k { font-family: var(--mg-font-head); font-weight: var(--font-weight-bold); color: var(--mg-ink); margin-inline-end: var(--size-1); }

/* ---------- footer lockup ---------- */
.mg-footer__lockup { display: flex; align-items: center; gap: var(--size-3); margin-bottom: var(--size-3); }
.mg-footer__mark { width: 2.5rem; height: 2.5rem; }
.mg-footer__brand { margin: 0; }

.mg-prose { max-width: 72ch; }
.mg-prose p { font-size: var(--font-size-1); }
.mg-prose--center { margin-inline: auto; text-align: center; }

/* ---------- header ---------- */
.mg-header {
	background: var(--mg-surface);
	border-bottom: var(--border-width-1) solid var(--mg-line);
	position: sticky;
	top: 0;
	z-index: var(--zindex-drawer);
}
.mg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--size-3);
	padding-block: var(--size-3);
	max-width: 80rem;
}
.mg-brand { text-decoration: none; color: var(--mg-ink); display: flex; align-items: center; gap: var(--size-3); }
.mg-brand:hover { color: var(--mg-ink); }
.mg-brand:hover .mg-emblem { box-shadow: 0 0 0 var(--border-width-2) var(--mg-gold); }
.mg-brand__text { display: grid; }
.mg-brand__name {
	font-family: var(--mg-font-head);
	font-size: var(--font-size-2);
	font-weight: var(--font-weight-bold);
	line-height: var(--mg-lh-tight);
	white-space: nowrap;
}
.mg-brand__sub {
	font-size: var(--font-size-0);
	color: var(--mg-muted);
	letter-spacing: var(--font-letter-spacing-1);
}

.mg-nav { display: flex; align-items: center; gap: var(--size-4); }
.mg-menu {
	list-style: none;
	display: flex;
	gap: var(--size-3);
	margin: 0;
	padding: 0;
}
.mg-menu a {
	text-decoration: none;
	color: var(--mg-ink);
	font-weight: var(--font-weight-medium);
	padding-block: var(--size-1);
	border-bottom: var(--size-0) solid transparent;
	white-space: nowrap;
}
.mg-menu a:hover,
.mg-menu .current-menu-item a { color: var(--mg-accent); border-bottom-color: var(--mg-gold); }

.mg-lang {
	list-style: none;
	display: flex;
	gap: var(--size-2);
	margin: 0;
	padding: 0;
	border-inline-start: var(--border-width-1) solid var(--mg-line);
	padding-inline-start: var(--size-4);
}
.mg-lang a {
	text-decoration: none;
	color: var(--mg-muted);
	font-size: var(--font-size-0);
	font-weight: var(--font-weight-semi-bold);
}
.mg-lang a[aria-current="true"] {
	color: var(--mg-gold-ink);
	background: var(--mg-gold);
	border-radius: var(--border-radius-2);
	padding-inline: var(--size-2);
}

.mg-menu a.is-current { color: var(--mg-accent); border-bottom-color: var(--mg-gold); font-weight: var(--font-weight-semi-bold); }

/* header call button — primary contact for a call-first audience */
.mg-callbtn {
	display: inline-flex;
	align-items: center;
	gap: var(--size-2);
	background: var(--mg-gold);
	color: var(--mg-gold-ink);
	text-decoration: none;
	font-weight: var(--font-weight-semi-bold);
	padding: var(--size-2) var(--size-4);
	border-radius: var(--border-radius-6);
	white-space: nowrap;
	transition: box-shadow var(--anim-duration-base) ease, transform var(--anim-duration-base) ease;
}
.mg-callbtn .mg-ico { width: 1.15rem; height: 1.15rem; }
.mg-callbtn:hover { color: var(--mg-gold-ink); box-shadow: var(--shadow-3); transform: translateY(calc(var(--size-0) * -0.5)); }
.mg-callbtn--mobile {
	display: none;
	padding: 0;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	justify-content: center;
}
.mg-callbtn--mobile .mg-ico { width: 1.25rem; height: 1.25rem; }

/* visible keyboard focus */
:focus-visible { outline: var(--border-width-2) solid var(--mg-accent); outline-offset: 2px; border-radius: var(--border-radius-1); }

.mg-burger { display: none; }
/* Toggle stays in the DOM and focusable (screen-reader only) so the mobile
   menu is keyboard-operable; focus is shown on the burger via the sibling rule. */
.mg-nav-toggle {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.mg-burger {
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
	padding: var(--size-2);
}
.mg-burger span {
	width: 1.5rem;
	height: 2px;
	background: var(--mg-ink);
	border-radius: var(--border-radius-1);
}

/* ---------- buttons ---------- */
.mg-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--size-2);
	text-decoration: none;
	font-family: var(--mg-font-body);
	font-weight: var(--font-weight-semi-bold);
	font-size: var(--font-size-0);
	letter-spacing: var(--font-letter-spacing-1);
	line-height: var(--mg-lh-tight);
	padding: var(--size-3) var(--size-5);
	border-radius: var(--border-radius-6);
	border: var(--border-width-2) solid transparent;
	transition: transform var(--anim-duration-base) ease, box-shadow var(--anim-duration-base) ease, background var(--anim-duration-base) ease, color var(--anim-duration-base) ease;
}
.mg-btn::after {
	content: "→";
	font-size: 1.05em;
	transition: transform var(--anim-duration-base) ease;
}
.mg-btn:hover::after { transform: translateX(var(--size-1)); }

.mg-btn--gold { background: var(--mg-gold); color: var(--mg-gold-ink); box-shadow: var(--shadow-2); }
.mg-btn--gold:hover { transform: translateY(calc(var(--size-0) * -0.5)); box-shadow: var(--shadow-4); color: var(--mg-gold-ink); }

.mg-btn--ghost { border-color: var(--mg-gold); color: var(--mg-ink); }
.mg-btn--ghost:hover { background: var(--mg-gold); color: var(--mg-gold-ink); transform: translateY(calc(var(--size-0) * -0.5)); }
.mg-section--dark .mg-btn--ghost { color: var(--mg-dark-ink); }
.mg-section--dark .mg-btn--ghost:hover { color: var(--mg-gold-ink); }

/* ---------- hero ---------- */
.mg-hero { background: linear-gradient(155deg, var(--primary-2), var(--mg-bg) 72%); }
.mg-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--size-8);
	align-items: center;
	padding-block: var(--size-11);
}
.mg-hero__title { font-size: var(--font-size-9); line-height: var(--mg-lh-tight); margin-bottom: var(--size-5); }
.mg-hero__lead { font-size: var(--font-size-2); line-height: var(--mg-lh-snug); color: var(--mg-muted); max-width: 32ch; text-wrap: balance; }
.mg-hero__cta { display: flex; gap: var(--size-3); flex-wrap: wrap; margin-top: var(--size-5); }
.mg-hero__media { margin: 0; }
.mg-hero__media img {
	border-radius: var(--border-radius-5);
	box-shadow: var(--shadow-4);
	aspect-ratio: var(--aspect-ratio-landscape);
	object-fit: cover;
	width: 100%;
}

/* ---------- cards ---------- */
.mg-cards { display: grid; gap: var(--size-5); }
.mg-cards--1 { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
.mg-puppies { list-style: none; margin: var(--size-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--size-4); }
.mg-puppy { margin: 0; background: var(--mg-surface); border: var(--border-width-1) solid var(--mg-line); border-radius: var(--border-radius-4); overflow: hidden; box-shadow: var(--shadow-1); }
.mg-puppy img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.mg-puppy__cap { display: flex; flex-direction: column; align-items: center; gap: var(--size-2); padding: var(--size-3) var(--size-3) var(--size-4); text-align: center; }
.mg-puppy__name { font-weight: 700; font-size: var(--font-size-2); }
.mg-puppy__tag { font-size: var(--font-size-0); color: var(--mg-muted); background: var(--primary-1); border-radius: 999px; padding: 0.15em 0.7em; }
.mg-cards--2 { grid-template-columns: repeat(2, 1fr); }
.mg-cards--3 { grid-template-columns: repeat(3, 1fr); }
.mg-cards--4 { grid-template-columns: repeat(4, 1fr); }

.mg-card {
	background: var(--mg-surface);
	border: var(--border-width-1) solid var(--mg-line);
	border-radius: var(--border-radius-4);
	padding: var(--size-5);
	box-shadow: var(--shadow-1);
}
.mg-card h3 { color: var(--mg-accent); margin-bottom: var(--size-2); }
.mg-card p { margin: 0; color: var(--mg-muted); }
.mg-card--mini { padding: var(--size-4); }
.mg-card--mini h3 { font-size: var(--font-size-1); }

/* ---------- breed facts ---------- */
.mg-facts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--size-4);
	margin-top: var(--size-6);
}
.mg-fact {
	display: flex;
	gap: var(--size-3);
	align-items: flex-start;
	padding: var(--size-4);
	background: var(--mg-surface);
	border: var(--border-width-1) solid var(--mg-line);
	border-radius: var(--border-radius-4);
	transition: border-color var(--anim-duration-base) ease, transform var(--anim-duration-base) ease;
}
.mg-fact:hover { border-color: var(--mg-gold); transform: translateY(calc(var(--size-0) * -0.5)); }
.mg-fact__body { display: grid; gap: var(--size-1); }
.mg-fact__k { font-weight: var(--font-weight-bold); font-family: var(--mg-font-head); font-size: var(--font-size-1); }
.mg-fact__v { color: var(--mg-muted); }

/* ---------- litter / dog blocks ---------- */
.mg-litter, .mg-contact, .mg-dog {
	display: grid;
	gap: var(--size-6);
	align-items: center;
}
.mg-litter { grid-template-columns: 0.9fr 1.1fr; }
.mg-litter__media img, .mg-dog__media img {
	border-radius: var(--border-radius-5);
	box-shadow: var(--shadow-3);
	aspect-ratio: var(--aspect-ratio-portrait);
	object-fit: cover;
	width: 100%;
}
.mg-dog {
	grid-template-columns: 1fr;
	gap: var(--size-4);
	background: var(--mg-surface);
	border: var(--border-width-1) solid var(--mg-line);
	border-radius: var(--border-radius-4);
	overflow: hidden;
	box-shadow: var(--shadow-1);
}
.mg-dog__media { margin: 0; }
.mg-dog__media img { border-radius: 0; aspect-ratio: var(--aspect-ratio-landscape); box-shadow: none; }
.mg-dog__body { padding: 0 var(--size-5) var(--size-5); }
.mg-dog__body h2 { font-size: var(--font-size-3); }

/* ---------- page heads ---------- */
.mg-pagehead {
	background: var(--primary-1);
	padding-block: var(--size-9) var(--size-7);
	text-align: center;
}
.mg-pagehead h1 { font-size: var(--font-size-8); }
.mg-pagehead__lead { color: var(--mg-muted); max-width: 42rem; margin-inline: auto; font-size: var(--font-size-1); }

/* ---------- galleries ---------- */
.mg-grid-photos, .mg-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--size-3);
	margin-bottom: var(--size-7);
}
.mg-grid-photos__item, .mg-gallery__item { margin: 0; display: block; overflow: hidden; border-radius: var(--border-radius-3); }
.mg-gallery__item img, .mg-grid-photos__item img {
	aspect-ratio: var(--aspect-ratio-square);
	object-fit: cover;
	width: 100%;
	transition: transform var(--anim-duration-base) ease;
}
.mg-gallery__item:hover img, .mg-grid-photos__item:hover img { transform: scale(1.05); }
.mg-gallery__item { cursor: zoom-in; }

/* ---------- lightbox ---------- */
body.mg-lb-open { overflow: hidden; }
.mg-lb[hidden] { display: none; }
.mg-lb {
	position: fixed;
	inset: 0;
	z-index: var(--zindex-dialog);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--size-2);
	padding: var(--size-3);
	background: color-mix(in oklch, var(--primary-12) 88%, transparent);
	backdrop-filter: blur(4px);
}
.mg-lb__stage {
	margin: 0;
	justify-self: center;
	align-self: center;
	max-width: min(92vw, 64rem);
	max-height: 88vh;
	display: flex;
}
.mg-lb__img {
	max-width: 100%;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--border-radius-3);
	box-shadow: var(--shadow-5);
	background: var(--mg-surface);
}
.mg-lb__btn {
	appearance: none;
	border: none;
	cursor: pointer;
	color: var(--neutral-1);
	background: color-mix(in oklch, var(--neutral-1) 14%, transparent);
	border-radius: var(--border-radius-round);
	width: 3rem;
	height: 3rem;
	font-size: 1.75rem;
	line-height: 1;
	display: grid;
	place-items: center;
	transition: background var(--anim-duration-base) ease, transform var(--anim-duration-base) ease;
}
.mg-lb__btn:hover { background: var(--mg-gold); color: var(--mg-gold-ink); }
.mg-lb__btn:focus-visible { outline: var(--size-0) solid var(--mg-gold); outline-offset: var(--size-1); }
.mg-lb__close { position: absolute; top: var(--size-3); right: var(--size-3); }
.mg-lb__counter {
	position: absolute;
	bottom: var(--size-3);
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	color: var(--neutral-1);
	font-size: var(--font-size-0);
	letter-spacing: var(--font-letter-spacing-2);
}

/* ---------- contact ---------- */
.mg-contact { grid-template-columns: 1fr 1fr; align-items: start; }
.mg-contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--size-4); }
.mg-contact__list li { display: flex; gap: var(--size-3); align-items: flex-start; }
.mg-contact__body { display: grid; gap: var(--size-0); }
.mg-contact__k {
	text-transform: uppercase;
	letter-spacing: var(--font-letter-spacing-2);
	font-size: var(--font-size-0);
	color: var(--mg-gold);
	font-weight: var(--font-weight-semi-bold);
}
.mg-contact__v { font-size: var(--font-size-1); }
.mg-contact__v a { color: var(--mg-dark-ink); text-decoration: underline; }
.mg-contact__v a:hover { color: var(--mg-gold); }

/* ---------- footer ---------- */
.mg-footer { background: var(--neutral-12); color: var(--neutral-3); }
.mg-footer__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--size-6);
	padding-block: var(--size-8) var(--size-6);
}
.mg-footer__brand { font-family: var(--mg-font-head); font-size: var(--font-size-3); color: var(--mg-dark-ink); margin-bottom: var(--size-2); }
.mg-footer__head { text-transform: uppercase; letter-spacing: var(--font-letter-spacing-2); color: var(--mg-gold); font-weight: var(--font-weight-semi-bold); margin-bottom: var(--size-2); }
.mg-footer a { color: var(--neutral-3); text-decoration: none; }
.mg-footer a:hover { color: var(--mg-gold); }
.mg-footer__bottom {
	border-top: var(--border-width-1) solid var(--neutral-10);
	padding-block: var(--size-4);
	font-size: var(--font-size-0);
	color: var(--neutral-6);
}

/* ---------- breed page: facts title, faq, owner note, photo band ---------- */
.mg-facts__title {
	margin: var(--size-8) 0 0;
	text-align: center;
	color: var(--mg-accent);
}
.mg-facts__title + .mg-facts { margin-top: var(--size-4); }

.mg-faq { display: grid; gap: var(--size-3); margin-top: var(--size-5); }
.mg-faq details {
	background: var(--mg-surface);
	border: var(--border-width-1) solid var(--mg-line);
	border-radius: var(--border-radius-4);
	padding: var(--size-3) var(--size-4);
	transition: border-color var(--anim-duration-base) ease;
}
.mg-faq details[open] { border-color: var(--mg-gold); }
.mg-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--size-3);
	font-family: var(--mg-font-head);
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-1);
	color: var(--mg-ink);
}
.mg-faq summary::-webkit-details-marker { display: none; }
.mg-faq summary::after {
	content: "+";
	flex: none;
	font-family: var(--mg-font-body);
	font-weight: var(--font-weight-bold);
	color: var(--mg-gold);
	font-size: 1.4em;
	line-height: 1;
	transition: transform var(--anim-duration-base) ease;
}
.mg-faq details[open] summary::after { transform: rotate(45deg); }
.mg-faq details p { margin: var(--size-3) 0 var(--size-1); color: var(--mg-muted); }

.mg-note {
	margin-top: var(--size-5);
	border-left: var(--size-1) solid var(--mg-gold);
}
.mg-note h3 { color: var(--mg-accent); margin-bottom: var(--size-2); }

.mg-readmore { margin-top: var(--size-7); }

.mg-photoband { margin: 0; }
.mg-photoband img {
	width: 100%;
	max-height: 30rem;
	object-fit: cover;
}

/* ---------- B1: parent portraits ---------- */
.mg-dog__media { position: relative; }
.mg-dog--portrait .mg-dog__media img { aspect-ratio: var(--aspect-ratio-square); }
.mg-dog__ribbon {
	position: absolute;
	top: var(--size-3);
	left: var(--size-3);
	display: inline-flex;
	align-items: center;
	gap: var(--size-1);
	background: var(--mg-gold);
	color: var(--mg-gold-ink);
	font-weight: var(--font-weight-semi-bold);
	font-size: var(--font-size-0);
	letter-spacing: var(--font-letter-spacing-1);
	padding: var(--size-1) var(--size-3);
	border-radius: var(--border-radius-6);
	box-shadow: var(--shadow-3);
}
.mg-dog__ribbon .mg-ico { width: 1rem; height: 1rem; }
.mg-dog__body.mg-dogcard { padding-top: var(--size-4); }

/* ---------- B4: gold rule under page heads ---------- */
.mg-pagehead h1 {
	position: relative;
	display: inline-block;
	padding-bottom: var(--size-3);
	margin-bottom: var(--size-4);
}
.mg-pagehead h1::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: var(--size-8);
	height: var(--border-width-2);
	background: var(--mg-gold);
	border-radius: var(--border-radius-1);
}

/* ---------- B6: footer polish ---------- */
.mg-footer__mark { width: 3.25rem; height: 3.25rem; }
.mg-footer__tel { color: var(--mg-gold); font-weight: var(--font-weight-semi-bold); font-size: var(--font-size-1); }
.mg-footer__tel:hover { color: var(--mg-gold); text-decoration: underline; }
.mg-footer__signoff { font-style: italic; color: var(--neutral-5); }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
	.mg-cards--4 { grid-template-columns: repeat(2, 1fr); }
	.mg-puppies { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 60rem) {
	.mg-hero__inner, .mg-litter, .mg-contact { grid-template-columns: 1fr; }
	.mg-hero__media { order: -1; }
	.mg-cards--2, .mg-cards--3, .mg-footer__grid { grid-template-columns: 1fr; }
	.mg-facts { grid-template-columns: 1fr; }
	.mg-grid-photos, .mg-gallery { grid-template-columns: repeat(2, 1fr); }

	.mg-burger { display: flex; }
	.mg-nav-toggle:focus-visible ~ .mg-burger {
		outline: var(--border-width-2) solid var(--mg-accent);
		outline-offset: 2px;
		border-radius: var(--border-radius-1);
	}
	.mg-callbtn--mobile { display: inline-flex; flex: none; margin-left: auto; margin-right: var(--size-2); }

	/* Keep brand from crowding the call button + burger off the viewport. */
	.mg-brand { min-width: 0; flex: 0 1 auto; gap: var(--size-2); }
	.mg-brand .mg-emblem { width: 2.4rem; height: 2.4rem; }
	.mg-brand__name { font-size: var(--font-size-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.mg-brand__text { min-width: 0; }
	.mg-brand__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.mg-nav .mg-callbtn { width: 100%; justify-content: center; }
	.mg-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: var(--size-4);
		background: var(--mg-surface);
		padding: var(--size-5);
		border-top: var(--border-width-1) solid var(--mg-line);
		box-shadow: var(--shadow-4);
		opacity: 0;
		visibility: hidden;
		transform: translateY(calc(var(--size-2) * -1));
		transition: opacity var(--anim-duration-base) ease, transform var(--anim-duration-base) ease, visibility var(--anim-duration-base);
		max-height: 80dvh;
		overflow: auto;
	}
	.mg-nav-toggle:checked ~ .mg-nav { opacity: 1; visibility: visible; transform: translateY(0); }
	.mg-menu { flex-direction: column; gap: var(--size-3); }
	.mg-menu a { padding-block: var(--size-2); }
	.mg-lang { border-inline-start: none; padding-inline-start: 0; padding-block-start: var(--size-2); border-block-start: var(--border-width-1) solid var(--mg-line); }

	/* burger -> X */
	.mg-burger span { transition: transform var(--anim-duration-base) ease, opacity var(--anim-duration-base) ease; transform-origin: center; }
	.mg-nav-toggle:checked ~ .mg-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.mg-nav-toggle:checked ~ .mg-burger span:nth-child(2) { opacity: 0; }
	.mg-nav-toggle:checked ~ .mg-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}