/*
 * DESIGN-LANGUAGE-G Wave 3 — Hub landing pages.
 * Applies the G language (§2.2) to /bird-basics/, /routine-care/,
 * /bird-health/, /vet-corner/.
 *
 * Scope: `.avg-hub` body class (added via avianvets_g_hub_body_class()
 * on the four hub page IDs 959-962). Every selector below is scoped
 * so the styles never leak to other page types.
 *
 * Enqueued AFTER chrome-g.css / homepage-g.css and AFTER the child
 * theme's legacy style.css, so it overrides the pre-charter
 * .av-hub-hero / .av-section-band / .av-link-card styles.
 *
 * Hub-hue wayfinding: each body carries data-hub="basics|routine|
 * health|vet" which sets --hub / --hub-deep / --hub-tint (see
 * design-tokens.css). Every accent below reads through the token
 * so one CSS file colors all four hubs.
 */

/* ————————————————————————————————————————
   Shared wrap parity with homepage/chrome
   ———————————————————————————————————————— */
.avg-hub main .row .columns { max-width: none; }
.avg-hub .av-hub-hero,
.avg-hub .av-glance,
.avg-hub .av-hub-toc,
.avg-hub .av-section-band,
.avg-hub .av-link-card__grid,
.avg-hub .av-topics-in-hub,
.avg-hub .av-hub-vet-exit,
.avg-hub .av-hub-outro,
.avg-hub .av-hub-all-posts { max-width: var(--wrap); margin-left: auto; margin-right: auto; }

.avg-hub .meta { font-family: var(--meta); font-weight: var(--meta-w); text-transform: uppercase; letter-spacing: var(--meta-track); }

/* Body ground picks up the paper cream so the hub band + cards read on
   the warm ground rather than parent-theme white. */
.avg-hub { background: var(--paper); }

/* ————————————————————————————————————————
   §2.2 point 2 — Hub hero band
   Cream ground, 1.5px --rule bottom, hub-hue eyebrow underlined by
   2px coral (matches the homepage .sec-head .sig treatment).
   ———————————————————————————————————————— */
.avg-hub .av-hub-hero {
	background: var(--cream);
	border-top: 1.5px solid var(--hair);
	border-bottom: 1.5px solid var(--rule);
	padding: 56px var(--wrap-gutter-dt) 68px;
	margin: 0 auto 0;
	max-width: none;
	position: relative;
}
.avg-hub .av-hub-hero__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 56px;
	align-items: center;
}
@media (max-width: 900px) {
	.avg-hub .av-hub-hero { padding: 36px var(--wrap-gutter-mb) 48px; }
	.avg-hub .av-hub-hero__inner { grid-template-columns: 1fr; gap: 28px; }
}

.avg-hub .av-hub-hero__eyebrow {
	display: inline-block;
	font-family: var(--meta);
	font-weight: var(--meta-w);
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hub-deep);
	padding-bottom: 6px;
	border-bottom: 2px solid var(--coral);
	margin: 0 0 22px;
}

.avg-hub .av-hub-hero__title {
	font-family: var(--display);
	font-weight: var(--display-w);
	font-size: 56px;
	line-height: 1.03;
	letter-spacing: -.028em;
	color: var(--ink);
	text-wrap: balance;
	margin: 0 0 22px;
}
@media (max-width: 900px) {
	.avg-hub .av-hub-hero__title { font-size: 36px; }
}

.avg-hub .av-hub-hero__promise {
	font-family: var(--body);
	font-size: 19px;
	line-height: 1.6;
	color: var(--ink-2);
	font-weight: 500;
	max-width: 620px;
	margin: 0 0 28px;
}
@media (max-width: 900px) {
	.avg-hub .av-hub-hero__promise { font-size: 16.5px; }
}

/* Hero-image slot — .hero-figure frame per §4.3. Real caption via
   figcaption when authored; we don't inject one, so we ship a plain
   framed image. Bird Health hides the hero image below 900px per the
   pre-existing YMYL fold rule (see style.css line ~1240) — that rule
   still holds. */
.avg-hub .av-hub-hero__image {
	background: var(--page);
	border: 1.5px solid var(--rule);
	padding: 10px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	border-radius: 0;
}
.avg-hub .av-hub-hero__image img,
.avg-hub .av-hub-hero__image .av-img-slot {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
	display: block;
	filter: contrast(1.02) saturate(1.02);
	aspect-ratio: auto;
}
/* S2 fix — if the slot resolves to the "Image coming soon" placeholder
   (no <img>), collapse the whole hero-image column instead of leaving a
   grey rectangle at 375. Also fires desktop side. */
.avg-hub .av-hub-hero__image:has(.av-img-slot):not(:has(img)) { display: none; }
.avg-hub .av-hub-hero__image:has(.av-img-slot):not(:has(img)) + * { grid-column: 1 / -1; }
/* Extra guard: on <900px if no img, the grid is already 1 col — remove
   the container so the paragraph doesn't get pushed by an empty frame. */
@media (max-width: 900px) {
	.avg-hub .av-hub-hero__image { max-width: 100%; }
}

/* ==== HERO-BAND-B BLOCK — 2026-08-26 ==================================
   Owner escalation 2026-08-26: same uncontrolled-image-height defect
   the article HERO-BAND-A ruling addressed. Prior state:
   .av-hub-hero__image locked to aspect-ratio 4/5 (portrait) at every
   breakpoint. At 1440 the image column is ~475px wide, so the frame
   rendered ~594px tall on every hub. Text-column content on all four
   hubs measured 400-500px (title + promise + pills), which meant the
   IMAGE drove band height (measured 742px vs a text-driven ~525-620px
   floor). Landscape source images (natural 16:9, e.g. Routine Care
   chickens-at-feeder) were forced into portrait crops that cut most
   of the scene.

   Fix: 3:2 desktop frame — same aspect the article HERO-BAND-A
   adopted (reviews/hero-band-height-options.md §9). At 475px column
   the image renders ~316px tall, shorter than the title column on
   every hub, so band becomes title-driven everywhere. 3:2 also
   matches the mobile cap article-g.css uses (cross-template
   consistency). object-position: center 42% (inherited from the
   base rule above) keeps portrait-source subjects framed — heads
   stay in the top region of the crop.

   Applies at all breakpoints so tablet (601-1023) also gets the
   contained crop; on stacked layouts (<=900) the max-width:100%
   guard above still fires. Mobile <=600px adds a 55vh cap to match
   the article mobile pattern.

   Rule: image never drives band height (owner escalation, 2026-08-26). */
.avg-hub .av-hub-hero__image {
	aspect-ratio: 3 / 2 !important;
}
@media (max-width: 600px) {
	.avg-hub .av-hub-hero__image {
		aspect-ratio: 3 / 2 !important;
		max-height: 55vh;
	}
}
/* ==== END HERO-BAND-B BLOCK ============================================ */

/* Hero audience pills — G buttons in hub-hue outline */
.avg-hub .av-audience-pills {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 10px;
}
.avg-hub .av-audience-pills a {
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--display); font-weight: var(--display-w-2);
	font-size: 13.5px; letter-spacing: .01em;
	color: var(--ink);
	background: rgba(255,255,255,.85);
	border: 1.5px solid var(--rule);
	padding: 10px 16px;
	border-radius: var(--radius-2);
	text-decoration: none;
	min-height: 44px; box-sizing: border-box;
}
.avg-hub .av-audience-pills a:hover,
.avg-hub .av-audience-pills a:focus {
	background: var(--hub-tint);
	border-color: var(--hub-deep);
	color: var(--hub-deep);
	text-decoration: none;
}

/* ————————————————————————————————————————
   Institutional attribution (hero-adjacent) — the .av-hub__attrib
   paragraph injected by avianvets_canonical_top_anatomy().
   ———————————————————————————————————————— */
.avg-hub .av-hub__attrib {
	max-width: var(--wrap);
	margin: -14px auto 32px;
	padding: 12px var(--wrap-gutter-dt) 0;
	font-family: var(--meta);
	font-size: 11.5px;
	font-weight: var(--meta-w);
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.avg-hub .av-hub__attrib-label { color: var(--hub-deep); }

/* ————————————————————————————————————————
   §2.2 point 3 — Hub sub-hub visual TOC (color-tinted tiles)
   The pre-charter .av-hub-toc__card gets restyled as a hue-tinted card
   with a saturated left border. Same markup, new visual grammar.
   ———————————————————————————————————————— */
.avg-hub .av-hub-toc {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	padding: 0 var(--wrap-gutter-dt);
	margin: 48px auto 32px;
	list-style: none;
}
.avg-hub .av-hub-toc--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 900px) {
	.avg-hub .av-hub-toc { padding: 0 var(--wrap-gutter-mb); margin: 32px auto 24px; }
}
.avg-hub .av-hub-toc__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 22px 24px;
	background: var(--hub-tint);
	border: 1.5px solid var(--hair);
	border-left: 4px solid var(--hub-deep);
	border-radius: var(--radius-2);
	color: var(--ink);
	text-decoration: none;
	transition: transform .15s;
	min-height: 132px;
}
.avg-hub .av-hub-toc__card:hover,
.avg-hub .av-hub-toc__card:focus {
	transform: translateY(-2px);
	text-decoration: none;
	border-color: var(--hub-deep);
}
.avg-hub .av-hub-toc__icon {
	font-size: 26px;
	color: var(--hub-deep);
	line-height: 1;
	display: block;
	margin-bottom: 4px;
}
.avg-hub .av-hub-toc__label {
	font-family: var(--display);
	font-weight: var(--display-w);
	font-size: 20px;
	color: var(--ink);
	letter-spacing: -.01em;
}
.avg-hub .av-hub-toc__desc {
	font-family: var(--body);
	font-size: 14px;
	color: var(--ink-2);
	line-height: 1.5;
	font-weight: 500;
}

/* ————————————————————————————————————————
   §2.2 point 2 — "before you start" glance block
   Restyled as a warm cream note block with hub-hue label.
   Also covers the "when to see a vet" spine on Bird Health (id="vet").
   ———————————————————————————————————————— */
.avg-hub .av-glance {
	max-width: var(--wrap);
	margin: 28px auto 32px;
	padding: 22px 26px;
	background: var(--page);
	border: 1.5px solid var(--hair);
	border-left: 4px solid var(--hub);
	border-radius: var(--radius-2);
}
.avg-hub .av-glance__label {
	display: block;
	font-family: var(--meta);
	font-weight: var(--meta-w);
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hub-deep);
	margin-bottom: 8px;
}
.avg-hub .av-glance p {
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-2);
	margin: 0 0 10px;
	font-weight: 500;
}
.avg-hub .av-glance p:last-child { margin-bottom: 0; }
.avg-hub .av-glance p strong { color: var(--ink); }
.avg-hub .av-glance a {
	color: var(--hub-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* On-page copy paragraphs (the two intro paragraphs and outros).
   Same rhythm as .av-glance but no chrome. */
.avg-hub main .row .columns > p {
	max-width: var(--wrap);
	margin: 20px auto;
	padding: 0 var(--wrap-gutter-dt);
	font-family: var(--body);
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--ink-2);
	font-weight: 500;
}
.avg-hub main .row .columns > p a {
	color: var(--hub-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.avg-hub main .row .columns > p a:hover { color: var(--coral-deep); }
@media (max-width: 900px) {
	.avg-hub main .row .columns > p { padding: 0 var(--wrap-gutter-mb); font-size: 16px; }
}

/* ————————————————————————————————————————
   §2.2 point 4 — Section-header bands (photo + icon)
   Paper ground, top + bottom 1.5px rules, G eyebrow + H2.
   Photo bands: keep the image as a hero-figure–style frame beside the
   header text so the "photo" isn't a full-bleed scrim (charter mandate:
   real imagery, not free-template scrims).
   ———————————————————————————————————————— */
.avg-hub .av-section-band {
	max-width: var(--wrap);
	margin: 56px auto 24px;
	padding: 26px var(--wrap-gutter-dt);
	background: var(--page);
	border-top: 1.5px solid var(--rule);
	border-bottom: 1.5px solid var(--hair);
	position: relative;
}
.avg-hub .av-section-band::before {
	content: "";
	position: absolute; top: -1.5px; left: 0;
	width: 88px; height: 3px;
	background: var(--hub);
}
@media (max-width: 900px) {
	.avg-hub .av-section-band { padding: 22px var(--wrap-gutter-mb); margin: 40px auto 20px; }
}
.avg-hub .av-section-band h2 {
	font-family: var(--display);
	font-weight: var(--display-w);
	font-size: 32px;
	letter-spacing: -.024em;
	line-height: 1.1;
	color: var(--ink);
	margin: 0 0 8px;
}
@media (max-width: 900px) {
	.avg-hub .av-section-band h2 { font-size: 26px; }
}
.avg-hub .av-section-band p {
	font-family: var(--body);
	font-size: 15.5px;
	color: var(--ink-2);
	line-height: 1.55;
	margin: 0;
	font-weight: 500;
}

/* Icon variant — small hue-colored glyph left of the H2 */
.avg-hub .av-section-band--icon {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 22px;
	align-items: center;
}
.avg-hub .av-section-band--icon .av-section-band__icon,
.avg-hub .av-section-band--icon [class^="icon-"],
.avg-hub .av-section-band--icon [class*=" icon-"] {
	font-size: 44px;
	color: var(--hub-deep);
	line-height: 1;
}

/* -----------------------------------------------------------------
   Emergency variant — Trust-subtlety punchpass 2026-08-24 (critic 2 / item 5).
   Was: `--photo` variant with generic photo bg + H2 "Start here: something's
   wrong right now" — the third of three near-identical CTAs stacked above the
   fold on /bird-health/. Restyled as a TRUE emergency band matching the
   money-page /talk-to-an-avian-vet/ av-emergency component:
     - red-family background so the band is unmistakeably the emergency exit
     - alert icon on the H2 axis (no more icon-in-corner + centered-H2)
     - H2 is a LABEL ("Emergency signs"), not a sentence; body carries the
       concrete signs list + call-your-vet routing
   Icon lives inside .av-section-band--icon (grid: auto 1fr, align:center),
   so the icon/text-axis alignment (critic LOW item 7 red-band alignment) is
   inherited without extra rules.
   -------------------------------------------------------------------- */
.avg-hub .av-section-band--emergency {
	background: #FBECEC;
	border-top: 3px solid #C0392B;
	border-bottom: 1.5px solid #E6BFBB;
}
.avg-hub .av-section-band--emergency::before { background: #C0392B; }
.avg-hub .av-section-band--emergency .av-section-band__icon,
.avg-hub .av-section-band--emergency [class^="icon-"],
.avg-hub .av-section-band--emergency [class*=" icon-"] {
	color: #C0392B;
}
.avg-hub .av-section-band--emergency h2 {
	color: #7A1F14;
}
.avg-hub .av-section-band--emergency p {
	color: var(--ink);
	margin: 6px 0 0;
	max-width: 62ch;
}

/* Photo variant — re-cast as small framed thumb beside the header */
.avg-hub .av-section-band--photo {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 26px;
	align-items: center;
	min-height: 0;
	background: var(--page);
}
.avg-hub .av-section-band--photo::before {
	content: "";
	position: absolute; top: -1.5px; left: 0;
	width: 88px; height: 3px;
	background: var(--hub);
}
.avg-hub .av-section-band--photo::after { display: none; }
.avg-hub .av-section-band--photo > *:not(.av-section-band__bg) {
	position: static;
	transform: none;
	color: var(--ink);
	max-width: none;
	padding: 0;
	margin: 0;
	text-align: left;
}
.avg-hub .av-section-band--photo > *:not(.av-section-band__bg) h2 { color: var(--ink); text-shadow: none; }
.avg-hub .av-section-band--photo > *:not(.av-section-band__bg) p  { color: var(--ink-2); text-shadow: none; }
.avg-hub .av-section-band--photo .av-section-band__bg {
	position: static;
	width: 240px;
	height: 180px;
	overflow: hidden;
	background: var(--cream);
	border: 1.5px solid var(--rule);
	padding: 6px;
}
.avg-hub .av-section-band--photo .av-section-band__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: contrast(1.02) saturate(1.02);
}
.avg-hub .av-section-band--photo .av-section-band__bg .av-img-slot { width: 100%; height: 100%; background: var(--cream); display: flex; align-items: center; justify-content: center; }
.avg-hub .av-section-band--photo .av-section-band__bg .av-img-slot__caption { font-family: var(--meta); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 900px) {
	.avg-hub .av-section-band--photo { grid-template-columns: 1fr; }
	.avg-hub .av-section-band--photo .av-section-band__bg { width: 100%; height: 180px; }
}

/* ————————————————————————————————————————
   §2.2 point 5 — Link-card grids (reference cards, G restyle)
   ———————————————————————————————————————— */
.avg-hub .av-link-card__grid {
	max-width: var(--wrap);
	margin: 24px auto 40px;
	padding: 0 var(--wrap-gutter-dt);
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	list-style: none;
}
@media (max-width: 900px) {
	.avg-hub .av-link-card__grid { padding: 0 var(--wrap-gutter-mb); grid-template-columns: 1fr; gap: 16px; }
}
.avg-hub .av-link-card {
	display: flex;
	flex-direction: column;
	background: var(--page);
	border: 1.5px solid var(--rule);
	border-radius: 0; /* charter §1.4 — hard corners on reference cards */
	overflow: hidden;
	transition: transform .15s, border-color .15s;
	list-style: none;
}
.avg-hub .av-link-card:hover,
.avg-hub .av-link-card:focus-within {
	transform: translateY(-2px);
	border-color: var(--hub-deep);
}
.avg-hub .av-link-card__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--cream);
	overflow: hidden;
	border-bottom: 1.5px solid var(--hair);
}
.avg-hub .av-link-card__thumb img,
.avg-hub .av-link-card__thumb .av-img-slot,
.avg-hub .av-link-card__thumb .av-img-slot-img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	filter: contrast(1.02) saturate(1.02);
}
.avg-hub .av-link-card__thumb .av-img-slot { display: flex; align-items: center; justify-content: center; }
.avg-hub .av-link-card__thumb .av-img-slot__caption { font-family: var(--meta); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.avg-hub .av-link-card__body {
	display: flex; flex-direction: column; gap: 10px;
	padding: 20px 22px 22px;
	flex: 1;
}
.avg-hub .av-link-card__title {
	font-family: var(--display);
	font-weight: var(--display-w);
	font-size: 20px;
	letter-spacing: -.015em;
	line-height: 1.2;
	margin: 0;
	color: var(--ink);
}
.avg-hub .av-link-card__title a {
	color: var(--ink);
	text-decoration: none;
	background-image: linear-gradient(var(--hub) 0 0);
	background-size: 0 2px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size .18s;
}
.avg-hub .av-link-card__title a:hover,
.avg-hub .av-link-card__title a:focus {
	background-size: 100% 2px;
	color: var(--hub-deep);
	text-decoration: none;
}
.avg-hub .av-link-card__desc {
	font-family: var(--body);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ink-2);
	font-weight: 500;
	margin: 0;
}
.avg-hub .av-link-card__desc a { color: var(--hub-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ————————————————————————————————————————
   Coming-soon G treatment — quiet cream tile, dashed hair border,
   muted pill. Markup class conventions preserved
   (.av-link-card--pending + "Coming Sprint" text remain — the
   invariants script asserts their presence on DEV and absence on
   STAGING).
   ———————————————————————————————————————— */
.avg-hub .av-link-card--pending {
	background: var(--cream);
	border: 1.5px dashed var(--hair);
	transform: none !important;
}
.avg-hub .av-link-card--pending:hover,
.avg-hub .av-link-card--pending:focus-within {
	transform: none;
	border-color: var(--hair);
}
.avg-hub .av-link-card--pending .av-link-card__thumb {
	background: var(--hub-tint);
	display: flex; align-items: center; justify-content: center;
	border-bottom: 1.5px dashed var(--hair);
}
.avg-hub .av-link-card--pending .av-link-card__thumb [class^="icon-"],
.avg-hub .av-link-card--pending .av-link-card__thumb [class*=" icon-"] {
	font-size: 32px;
	color: var(--hub-deep);
	opacity: .55;
}
.avg-hub .av-link-card--pending .av-link-card__pill {
	display: inline-block;
	align-self: flex-start;
	font-family: var(--meta);
	font-weight: var(--meta-w);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-3);
	background: var(--page);
	border: 1px solid var(--hair);
	padding: 4px 10px;
	border-radius: var(--radius-round);
	margin-bottom: 2px;
}
.avg-hub .av-link-card--pending .av-link-card__title {
	color: var(--ink-2);
	font-size: 18px;
}
.avg-hub .av-link-card--pending .av-link-card__desc {
	color: var(--ink-3);
}

/* ————————————————————————————————————————
   NEW §HG-1 — "Topics in [Hub]" section (the Wave 2 category gate)
   Anchor: .av-topics-in-hub
   Every hub landing page must link its subcategory archives here.
   ———————————————————————————————————————— */
.avg-hub .av-topics-in-hub {
	max-width: var(--wrap);
	margin: 48px auto;
	padding: 32px var(--wrap-gutter-dt);
	background: var(--page);
	border-top: 1.5px solid var(--rule);
	border-bottom: 1.5px solid var(--hair);
	position: relative;
}
.avg-hub .av-topics-in-hub::before {
	content: "";
	position: absolute; top: -1.5px; left: 0;
	width: 88px; height: 3px;
	background: var(--hub);
}
@media (max-width: 900px) {
	.avg-hub .av-topics-in-hub { padding: 26px var(--wrap-gutter-mb); margin: 36px auto; }
}
.avg-hub .av-topics-in-hub__eyebrow {
	display: block;
	font-family: var(--meta);
	font-weight: var(--meta-w);
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hub-deep);
	margin: 0 0 6px;
}
.avg-hub .av-topics-in-hub__title {
	font-family: var(--display);
	font-weight: var(--display-w);
	font-size: 24px;
	letter-spacing: -.02em;
	color: var(--ink);
	margin: 0 0 6px;
}
.avg-hub .av-topics-in-hub__lede {
	font-family: var(--body);
	font-size: 15px;
	color: var(--ink-2);
	line-height: 1.55;
	margin: 0 0 20px;
	font-weight: 500;
	max-width: 640px;
}
.avg-hub .av-topics-in-hub__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.avg-hub .av-topics-in-hub__list a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--hub-tint);
	color: var(--hub-deep);
	font-family: var(--display);
	font-weight: var(--display-w-2);
	font-size: 14px;
	letter-spacing: .01em;
	border: 1.5px solid var(--hub-deep);
	border-radius: var(--radius-2);
	text-decoration: none;
	min-height: 44px; box-sizing: border-box;
}
.avg-hub .av-topics-in-hub__list a::before {
	content: "";
	display: inline-block;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--hub-deep);
	flex: none;
}
.avg-hub .av-topics-in-hub__list a:hover,
.avg-hub .av-topics-in-hub__list a:focus {
	background: var(--hub-deep);
	color: var(--paper);
	text-decoration: none;
}
.avg-hub .av-topics-in-hub__list a:hover::before,
.avg-hub .av-topics-in-hub__list a:focus::before {
	background: var(--paper);
}

/* NEW §HG-2 — "All [hub] posts →" tail link.
   Small, subtle, sits just before the outro. Anchor .av-hub-all-posts. */
.avg-hub .av-hub-all-posts {
	max-width: var(--wrap);
	margin: 32px auto 0;
	padding: 20px var(--wrap-gutter-dt);
	border-top: 1px solid var(--hair);
	text-align: right;
}
@media (max-width: 900px) {
	.avg-hub .av-hub-all-posts { padding: 18px var(--wrap-gutter-mb); text-align: left; }
}
.avg-hub .av-hub-all-posts a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--meta);
	font-weight: var(--meta-w);
	font-size: 12px;
	letter-spacing: .10em;
	text-transform: uppercase;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1.5px solid var(--ink);
	padding-bottom: 3px;
}
.avg-hub .av-hub-all-posts a:hover,
.avg-hub .av-hub-all-posts a:focus {
	color: var(--hub-deep);
	border-color: var(--hub-deep);
	text-decoration: none;
}

/* ————————————————————————————————————————
   §2.2 point 7 — end-of-page "when it isn't really a health question"
   The .av-hub-outro block. Restyled on cream, hub-hue accents.
   ———————————————————————————————————————— */
.avg-hub .av-hub-outro {
	max-width: none;
	background: var(--cream);
	border-top: 1.5px solid var(--rule);
	border-bottom: 1.5px solid var(--hair);
	margin: 48px 0 0;
	padding: 48px var(--wrap-gutter-dt);
}
.avg-hub .av-hub-outro > * {
	max-width: var(--wrap);
	margin-left: auto; margin-right: auto;
}
@media (max-width: 900px) {
	.avg-hub .av-hub-outro { padding: 36px var(--wrap-gutter-mb); }
}
.avg-hub .av-hub-outro h2 {
	font-family: var(--display);
	font-weight: var(--display-w);
	font-size: 30px;
	letter-spacing: -.024em;
	color: var(--ink);
	margin: 0 0 16px;
}
@media (max-width: 900px) {
	.avg-hub .av-hub-outro h2 { font-size: 24px; }
}
.avg-hub .av-hub-outro p {
	font-family: var(--body);
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--ink-2);
	font-weight: 500;
	margin: 0 0 16px;
	max-width: 720px;
}
.avg-hub .av-hub-outro p a {
	color: var(--hub-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.avg-hub .av-hub-outro p a:hover { color: var(--coral-deep); }

/* Post-outro <hr> + "About the author" block */
.avg-hub main hr {
	display: none;
}
.avg-hub main h2 + p {
	max-width: var(--wrap);
	margin: 16px auto;
	padding: 0 var(--wrap-gutter-dt);
}
.avg-hub main > .row > .columns > h2 {
	max-width: var(--wrap);
	margin: 48px auto 8px;
	padding: 0 var(--wrap-gutter-dt);
	font-family: var(--display);
	font-weight: var(--display-w);
	font-size: 22px;
	color: var(--ink);
}
@media (max-width: 900px) {
	.avg-hub main > .row > .columns > h2 { padding: 0 var(--wrap-gutter-mb); }
	.avg-hub main h2 + p { padding: 0 var(--wrap-gutter-mb); }
}

/* Suppress the [av_byline] byline strip on hub pages — Option C
   preserved: no personal byline on hubs. The
   avianvets_canonical_top_anatomy() filter already removes the shortcode
   from hub post_content, but a defensive CSS hide handles any
   residual .av-byline--hero that might slip through a cache. */
.avg-hub .av-byline--hero { display: none; }

/* Reduced-motion respect for the transforms above. */
@media (prefers-reduced-motion: reduce) {
	.avg-hub .av-link-card,
	.avg-hub .av-hub-toc__card { transition: none; }
	.avg-hub .av-link-card:hover,
	.avg-hub .av-hub-toc__card:hover { transform: none; }
}

/* ===================================================================
 * WAVE 3 FIX PASS (2026-08-19) — closes design-critic P1s, ux
 * WARNINGs, and copy MEDIUM/LOW findings from
 * reviews/wave3-review-{copy,ux,seo,design-critic}.md.
 * Appended below the Wave 3 spec so every override reads as a fix,
 * not a re-spec. Every rule is scoped to `.avg-hub` (or a hub-hue
 * body attribute) so nothing leaks off the four hub pages.
 * =================================================================== */

/* [FIX-1] Kicker eyebrow underline was hardcoded to var(--coral) so it
   only matched Bird Health. Rebind to the hub token so every hub
   underlines in its own hue. */
.avg-hub .av-hub-hero__eyebrow { border-bottom-color: var(--hub); }

/* [FIX-2] Active primary-nav tab underline was brand-red sitewide.
   On hub pages the hub-hue owns the wayfinding channel, so the
   stripe adopts the hub token and agrees with the dot. */
.avg-hub nav.primary a.active::after { background: var(--hub) !important; }

/* [FIX-3] Endplate "Where to go next" — card accent MUST equal the
   DESTINATION hub's hue (not the icon glyph's color) and the band
   grounds on cream, not the pre-charter var(--surface-alt) gray.
   The tier→hue mapping: care=Routine Care (sun), health=Bird Health
   (coral), basics=Bird Basics (sky), vet=Vet Corner (forest). */
.avg-hub .av-endplate {
	background: var(--cream);
	border-top: 4px solid var(--rule);
}
.avg-hub .av-endplate .av-eop-card {
	background: var(--page);
	border: 1.5px solid var(--hair);
	border-left-width: 4px;
	border-radius: var(--radius-2);
}
.avg-hub .av-endplate .av-eop-card--basics { border-left-color: var(--sky-deep); }
.avg-hub .av-endplate .av-eop-card--care   { border-left-color: var(--sun-deep); }
.avg-hub .av-endplate .av-eop-card--health { border-left-color: var(--coral-deep); }
.avg-hub .av-endplate .av-eop-card--vet    { border-left-color: var(--forest); }
.avg-hub .av-endplate .av-eop-card:hover,
.avg-hub .av-endplate .av-eop-card:focus-visible {
	border-color: var(--hub-deep);
}

/* Endplate glyph rework — the decorative filled clip-art icons read
   as wallpaper. Hide the icon and use the hub-dot convention from
   the topics-in-hub chips: a small colored dot in the destination
   hub's deep hue lives to the left of the card body. Semantic
   (destination = colored dot), on-system, no fake glyphs. */
.avg-hub .av-endplate .av-eop-card__icon { display: none; }
.avg-hub .av-endplate .av-eop-card__body {
	position: relative;
	padding-left: 20px;
}
.avg-hub .av-endplate .av-eop-card__body::before {
	content: "";
	position: absolute;
	left: 0; top: 8px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--hair);
}
.avg-hub .av-endplate .av-eop-card--basics .av-eop-card__body::before { background: var(--sky-deep); }
.avg-hub .av-endplate .av-eop-card--care   .av-eop-card__body::before { background: var(--sun-deep); }
.avg-hub .av-endplate .av-eop-card--health .av-eop-card__body::before { background: var(--coral-deep); }
.avg-hub .av-endplate .av-eop-card--vet    .av-eop-card__body::before { background: var(--forest); }

/* [FIX-4] Collapse "IMAGE COMING SOON" placeholders on link-card
   thumbnails. Same :has pattern already applied to the hero
   (line ~133) — a card whose thumb resolves to the .av-img-slot
   fallback (no real <img>) renders as a text-only card, not a
   broken image slot. Dealbreaker-class fix: no reader sees the
   literal "IMAGE COMING SOON" string on a live card any more. */
.avg-hub .av-link-card__thumb:has(.av-img-slot):not(:has(img)) { display: none; }

/* [FIX-15] Same collapse pattern for category term pages so
   Parasites/Hatchling term heroes match Conures/Chickens by
   running imageless when no asset exists, instead of showing a
   blank right column. (Design-critic + UX SUGGESTION 1.) */
body.category .av-term-hero__image:has(.av-img-slot):not(:has(img)) { display: none; }

/* [FIX-5] Bird Health-only — Coming-Soon tile thumb ground was
   pink-red (hub-tint = coral-tint) + warning-triangle icons, so
   the tiles read "warning about a health topic" instead of "not
   built yet". Mute the thumb ground to cream + neutralize the
   icon color on this hub only. Other hubs keep the hue-tint. */
body[data-hub="health"].avg-hub .av-link-card--pending .av-link-card__thumb {
	background: var(--cream);
}
body[data-hub="health"].avg-hub .av-link-card--pending .av-link-card__thumb [class^="icon-"],
body[data-hub="health"].avg-hub .av-link-card--pending .av-link-card__thumb [class*=" icon-"] {
	color: var(--ink-3);
	opacity: .55;
}

/* [FIX-7] Bird Health mobile — the "Topics in Bird Health" chip
   row must sit within one viewport of the hero on mobile, not
   at the bottom of a 20k-pixel scroll. A mobile-only duplicate
   of the topics-in-hub row is injected right after the hero
   (see functions.php `avianvets_wave3_health_mobile_chips`),
   flagged with the `--mobile-first` modifier class. It renders
   below the hero on ≤899px and is hidden ≥900px. The original
   topics-in-hub block at page bottom is hidden on ≤899px so we
   don't ship the chip row twice on mobile. */
body[data-hub="health"].avg-hub .av-topics-in-hub--mobile-first { display: none; }
@media (max-width: 899px) {
	body[data-hub="health"].avg-hub .av-topics-in-hub--mobile-first {
		display: block;
		margin-top: 8px;
		margin-bottom: 24px;
	}
	body[data-hub="health"].avg-hub .av-topics-in-hub:not(.av-topics-in-hub--mobile-first) {
		display: none;
	}
}

/* [FIX-8] Section-band photo — light photos crop-to-cover in a
   240×180 frame can read as blank when the subject sits at the
   edge of the source image. Give the frame a hub-tint ground so
   the "no visible bird" state still reads as photo, and shift the
   crop bias to center 45% to favor the middle third where subjects
   tend to sit. */
.avg-hub .av-section-band--photo .av-section-band__bg {
	background: var(--hub-tint);
}
.avg-hub .av-section-band--photo .av-section-band__bg img {
	object-position: center 45%;
}

/* [FIX-13] Vet Corner directory tile — the copy strip
   (removing "10-state pilot in Sprint 8; full 50-state
   directory by Sprint 11.") is a post-content filter fix. The
   tile styling already matches the standard quiet Coming Soon
   treatment (.av-link-card--pending). No CSS override needed;
   marker kept for grep. */

/* ================================================================
   MAJOR 5 (2026-08-20) — Hub Coming-Sprint condensation.
   design/S1-A: 15-20 individual Coming-Sprint tiles per hub read
   as empty shelves. Fix path A (designer prescription): collapse
   each pending tile into a compact grouped quiet-roadmap row —
   full-width slim rows inside the existing grid, no full-size
   card, no thumb, no description. The .av-link-card--pending +
   "Coming Sprint" markers stay in the DOM so the staging-sweep
   invariants (which assert their PRESENCE on DEV and ABSENCE on
   staging) still fire correctly.
   ================================================================ */
.avg-hub .av-link-card--pending {
	/* Break out of the multi-column grid so pending tiles stack as
	   slim horizontal rows regardless of grid template. */
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 14px;
	padding: 10px 16px !important;
	min-height: 0;
	background: var(--paper) !important;
	border: 1px dashed var(--hair-2) !important;
	border-radius: var(--radius-2);
	box-shadow: none;
	transform: none !important;
}
.avg-hub .av-link-card--pending:hover,
.avg-hub .av-link-card--pending:focus-within {
	transform: none !important;
	border-color: var(--hair) !important;
}
/* Hide the empty thumbnail slot — carries no information in condensed row. */
.avg-hub .av-link-card--pending .av-link-card__thumb {
	display: none !important;
}
/* Body becomes an inline flex row: pill + title on one line. */
.avg-hub .av-link-card--pending .av-link-card__body {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 0;
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}
.avg-hub .av-link-card--pending .av-link-card__pill {
	flex: 0 0 auto;
	margin: 0;
	font-size: 10px;
	letter-spacing: 0.14em;
}
.avg-hub .av-link-card--pending .av-link-card__title {
	font-family: var(--body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--ink-2) !important;
	margin: 0 !important;
	line-height: 1.25;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Description hidden in the condensed treatment — the title carries enough. */
.avg-hub .av-link-card--pending .av-link-card__desc {
	display: none !important;
}
/* At mobile: allow pill to sit above title so nothing truncates painfully. */
@media (max-width: 560px) {
	.avg-hub .av-link-card--pending {
		grid-template-columns: 1fr;
		padding: 10px 14px !important;
	}
	.avg-hub .av-link-card--pending .av-link-card__body {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.avg-hub .av-link-card--pending .av-link-card__title {
		white-space: normal;
		text-overflow: clip;
	}
}


/* ================================================================
   AMENDMENT 3 — BLEED LAW (owner ruling 2026-08-20)
   Section BACKGROUNDS bleed viewport-edge-to-edge. CONTENT stays
   inside the content column. Every color-banded section on a hub
   page uses Pattern A: outer full-width container with background
   color; inner .wrap carries max-width: var(--wrap) + gutters.
   Owner's #1 walkthrough complaint: hub-hero currently reads as a
   "content-width cream card" beside bands (vet-band, finale) that
   already bleed. This block enforces bleed across ALL banded
   surfaces on the four hubs.
   ================================================================ */

/* Kill the max-width constraint on hub-band OUTER containers so
   their color grounds run to viewport edge. Inner .wrap / __inner
   still carries the content-column max-width + gutters. Precedes
   line 32's blanket max-width rule via later cascade. */
.avg-hub .av-hub-hero,
.avg-hub .av-section-band,
.avg-hub .av-topics-in-hub,
.avg-hub .av-hub-vet-exit,
.avg-hub .av-hub-outro {
	max-width: none !important;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* Hub-hero: full-width cream ground, content stays in .wrap. The
   inner __inner grid was already at max-width var(--wrap) — good.
   Add a wrap gutter so content doesn't butt against the viewport. */
.avg-hub .av-hub-hero { padding: 56px 0 68px; }
.avg-hub .av-hub-hero__inner {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--wrap-gutter-dt);
}
@media (max-width: 900px) {
	.avg-hub .av-hub-hero { padding: 36px 0 48px; }
	.avg-hub .av-hub-hero__inner { padding: 0 var(--wrap-gutter-mb); }
}

/* Section-band (per-sub-hub bucket rows) — --paper ground with rules
   is the section device; the section header + card grid live in the
   inner column. Retain interior alignment to var(--wrap). */
.avg-hub .av-section-band > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--wrap-gutter-dt); padding-right: var(--wrap-gutter-dt); }
@media (max-width: 900px) {
	.avg-hub .av-section-band > * { padding-left: var(--wrap-gutter-mb); padding-right: var(--wrap-gutter-mb); }
}

/* Vet-exit ("when routine tips into something else") — --cream band,
   bled. Content in .wrap. Same pattern as .av-hub-outro finale. */
.avg-hub .av-hub-vet-exit { background: var(--cream); padding: var(--section-py-dt) 0; border-top: 1.5px solid var(--rule); border-bottom: 1.5px solid var(--rule); }
.avg-hub .av-hub-vet-exit > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--wrap-gutter-dt); padding-right: var(--wrap-gutter-dt); }
@media (max-width: 900px) {
	.avg-hub .av-hub-vet-exit { padding: var(--section-py-mb) 0; }
	.avg-hub .av-hub-vet-exit > * { padding-left: var(--wrap-gutter-mb); padding-right: var(--wrap-gutter-mb); }
}

/* Hub outro (finale) — was already bleeding today (owner noted this
   is the ONLY band that read right). Preserve Pattern A explicitly. */
.avg-hub .av-hub-outro > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; padding-left: var(--wrap-gutter-dt); padding-right: var(--wrap-gutter-dt); }
@media (max-width: 900px) {
	.avg-hub .av-hub-outro > * { padding-left: var(--wrap-gutter-mb); padding-right: var(--wrap-gutter-mb); }
}

/* Hub-hero attrib line was removed by functions.php (Curated by /
   Updated line no longer emitted). If any residual DOM leaks it,
   hide by default so it never re-surfaces. */
.avg-hub .av-hub__attrib { display: none; }

/* ================================================================
   PHASE 1 FIXPASS (2026-08-21) — Bleed Law CONTENT-CONSTRAINT clause.
   The Amendment 3 pass shipped the outer BACKGROUND-bleeds half but
   left CONTENT unconstrained: hub intro paragraphs, section-band
   heads, intro callouts, and Vet Corner's endplate render flush to
   the viewport edge or wider than the card grid at 1440. This block
   restores the content column for every text surface on the four
   hubs so BACKGROUNDS bleed and CONTENT stays in-column, aligned
   with the .av-link-card__grid measure (x=112 at 1440, x=20 at 375).
   Sentinel: av-phase1-fixpass-hub
   Design-critic Phase 1 blocker 1, majors 2 + 8. See
   reviews/phase1-sweep-critic.md.
   ================================================================ */

/* (1) Hub intro paragraphs and lists — pre-fixpass selector
   `.avg-hub main .row .columns > p` matched nothing (this theme
   emits no <main>; <p> lives directly under .columns > .no-vc).
   Replace with the real DOM path and constrain to the wrap. */
.avg-hub .no-vc > p,
.avg-hub .no-vc > ol {
  max-width: var(--wrap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--wrap-gutter-dt) !important;
  padding-right: var(--wrap-gutter-dt) !important;
  box-sizing: border-box;
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  font-weight: 500;
}
/* Bare <ul> in .no-vc (not the topics chips, TOC, card grid, or hero pills). */
.avg-hub .no-vc > ul:not(.av-topics-in-hub__list):not(.av-hub-toc):not(.av-link-card__grid):not(.av-audience-pills) {
  max-width: var(--wrap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--wrap-gutter-dt) !important;
  padding-right: var(--wrap-gutter-dt) !important;
  box-sizing: border-box;
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-2);
  font-weight: 500;
}
.avg-hub .no-vc > p a,
.avg-hub .no-vc > ol a,
.avg-hub .no-vc > ul:not(.av-topics-in-hub__list):not(.av-hub-toc):not(.av-link-card__grid):not(.av-audience-pills) a {
  color: var(--hub-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.avg-hub .no-vc > p a:hover,
.avg-hub .no-vc > ol a:hover,
.avg-hub .no-vc > ul:not(.av-topics-in-hub__list):not(.av-hub-toc):not(.av-link-card__grid):not(.av-audience-pills) a:hover {
  color: var(--coral-deep);
}
@media (max-width: 900px) {
  .avg-hub .no-vc > p,
  .avg-hub .no-vc > ol,
  .avg-hub .no-vc > ul:not(.av-topics-in-hub__list):not(.av-hub-toc):not(.av-link-card__grid):not(.av-audience-pills) {
    padding-left: var(--wrap-gutter-mb) !important;
    padding-right: var(--wrap-gutter-mb) !important;
    font-size: 16px;
  }
}

/* (2) Legacy .av-disclaimer band (Bird Health hero-adjacent) —
   restyled to the G rose guidance band with wrap + gutter.
   Critic punch item 6. */
.avg-hub .av-disclaimer {
  max-width: calc(var(--wrap) - 2 * var(--wrap-gutter-dt));
  margin: 24px auto 32px;
  padding: 22px 26px;
  background: var(--hub-tint);
  border: 1.5px solid var(--hair);
  border-left: 4px solid var(--hub-deep);
  border-radius: var(--radius-2);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  box-sizing: border-box;
}
.avg-hub .av-disclaimer p { margin: 0 0 10px; }
.avg-hub .av-disclaimer p:last-child { margin-bottom: 0; }
.avg-hub .av-disclaimer strong { color: var(--ink); }
.avg-hub .av-disclaimer a {
  color: var(--hub-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.avg-hub .av-disclaimer a:hover { color: var(--coral-deep); }
@media (max-width: 900px) {
  .avg-hub .av-disclaimer {
    margin-left: var(--wrap-gutter-mb);
    margin-right: var(--wrap-gutter-mb);
    max-width: calc(100% - 2 * var(--wrap-gutter-mb));
    padding: 18px 20px;
  }
}

/* (3) Intro callouts (.av-glance) — line up left/right edges with
   the card grid at 1440. Critic minor #8, folded into major 2.
   .av-link-card__grid renders at x=112 through x=1328 at 1440
   (max-width 1280 + inner 32 gutter, centered). Callout sits in
   the same span → max-width = (wrap - 2*gutter). */
.avg-hub .av-glance {
  max-width: calc(var(--wrap) - 2 * var(--wrap-gutter-dt));
}
@media (max-width: 900px) {
  .avg-hub .av-glance {
    margin-left: var(--wrap-gutter-mb);
    margin-right: var(--wrap-gutter-mb);
    max-width: calc(100% - 2 * var(--wrap-gutter-mb));
  }
}

/* (4) Section-band / topics-in-hub / vet-exit outer bleed with
   CONTENT aligned to the tile grid (x=112 at 1440, x=20 at 375).
   Amendment 3 above dropped outer padding to zero so the color
   ground bleeds; this restores an inner padding that matches the
   .av-link-card__grid content-left-edge so section H2s + chips
   sit above their tiles instead of at x=32 or x=0.
   Formula: padding-inline = max(gutter, (100% - wrap)/2 + gutter).
   At 1440 = max(32, 112) = 112. At <=1280 = 32. */
.avg-hub .av-section-band,
.avg-hub .av-topics-in-hub,
.avg-hub .av-hub-vet-exit {
  padding-left: max(var(--wrap-gutter-dt), calc((100% - var(--wrap)) / 2 + var(--wrap-gutter-dt))) !important;
  padding-right: max(var(--wrap-gutter-dt), calc((100% - var(--wrap)) / 2 + var(--wrap-gutter-dt))) !important;
}
/* Drop the `> *` inner wrap+gutter that Amendment 3 also added —
   it doubles the gutter and shifts H2 right of the tile grid. */
.avg-hub .av-section-band > *,
.avg-hub .av-topics-in-hub > *,
.avg-hub .av-hub-vet-exit > * {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 900px) {
  .avg-hub .av-section-band,
  .avg-hub .av-topics-in-hub,
  .avg-hub .av-hub-vet-exit {
    padding-left: var(--wrap-gutter-mb) !important;
    padding-right: var(--wrap-gutter-mb) !important;
  }
}

/* (5) Topics-in-hub as a real endplate: hub-tint ground, hub-deep
   accent, chips + inline "All {hub} guides →" tail. Critic major
   punch item 2: the endplate must READ as a designed ending, not a
   dangling grid. Kill the trailing hairline / micro-link strip
   (.av-hub-all-posts) when it sits adjacent to a topics-in-hub —
   the "All {hub} guides →" moves INSIDE the endplate. */
.avg-hub .av-topics-in-hub {
  background: var(--hub-tint);
  border-top: 1.5px solid var(--hair);
  border-bottom: 1.5px solid var(--rule);
  padding-top: 40px !important;
  padding-bottom: 48px !important;
  margin: 48px 0 0 !important;
}
.avg-hub .av-topics-in-hub__title {
  font-size: 26px;
  color: var(--ink);
}
.avg-hub .av-topics-in-hub__tail {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.avg-hub .av-topics-in-hub__tail a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--meta);
  font-weight: var(--meta-w);
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--hub-deep);
  text-decoration: none;
  border-bottom: 1.5px solid var(--hub-deep);
  padding-bottom: 3px;
}
.avg-hub .av-topics-in-hub__tail a:hover,
.avg-hub .av-topics-in-hub__tail a:focus {
  color: var(--ink);
  border-color: var(--ink);
}
/* When a topics-in-hub endplate sits above the standalone all-posts
   link, hide the standalone (the tail is inside the endplate now). */
.avg-hub .av-topics-in-hub + .av-hub-all-posts { display: none; }

@media (max-width: 900px) {
  .avg-hub .av-topics-in-hub__title { font-size: 22px; }
  .avg-hub .av-topics-in-hub__tail { justify-content: flex-start; }
}

/* Sentinel marker (grep-target for invariants). */
.avg-hub::after { --av-phase1-fixpass-hub: "on"; }