/* Care-guide hub and article pages (/{lang}/guides/, /{lang}/guides/{slug}/).
   Part of the split style.css. inc/enqueue.php enqueues each file as
   its own <link>, in filename order -- they are NOT concatenated, so a
   comment or a rule cut across the join does not heal at the seam. It
   breaks both files, and the browser drops everything it cannot parse
   without saying so. Keep every construct whole inside one file.
   Source order is still the cascade, so moving a rule between files
   can change which one wins.

   Deliberately small: article body typography (headings, paragraphs, lists,
   tables) is .pet-legal-block / .pet-legal-content from 60-legal.css, reused
   as-is rather than re-invented here -- a care guide's prose reads exactly
   as well as a legal page's. The hub's card grid is .pet-info-card /
   .pet-info-grid from 40-sections.css, the same component /pets/ uses for
   its own topic tiles. What follows is only the three things that pattern
   does not already cover. */

/* The "key facts" callout that opens every article -- a scannable summary
   before the reader commits to the full page, using the same warm
   --pet-accent-soft panel treatment the site already applies to a highlighted
   note (.pet-event-empty-note, .pet-aquarium-terrarium-note, both
   var(--pet-accent-soft) + var(--pet-radius-lg)/rounded), so a highlighted
   box reads the same way everywhere rather than inventing a second one. */
.pet-guide-callout { background: var(--pet-accent-soft); border-radius: var(--pet-radius-lg); margin: 0 0 1.5rem; padding: 1.4rem 1.6rem; }
.pet-guide-callout-title { font-size: .8rem; font-weight: 800; letter-spacing: .06em; margin: 0 0 .7rem; text-transform: uppercase; }
.pet-guide-callout ul { line-height: 1.6; margin: 0; padding-inline-start: 1.3rem; }
.pet-guide-callout li + li { margin-top: .5rem; }

/* Hub grid: one .pet-guide-group per topic cluster (fish, reptiles), each
   its own eyebrow + heading over a .pet-info-grid of .pet-info-card links --
   unchanged from how /pets/ renders its own topic tiles, just grouped under
   a subheading here because the hub spans more than one animal family. */
.pet-guide-group { padding: 1rem 0 2rem; }
.pet-guide-group > h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); letter-spacing: -.05em; margin: 0 0 1rem; }
.pet-guide-hub .pet-info-card h2 { font-size: 1.15rem; margin: 0 0 .6rem; }

/* Sources section: every citation link in a guide's "Sources" block opens
   off-site (pet_town_guide_sections() sets target/rel on any absolute
   http(s) href), so it carries a small outward arrow to say so before the
   click, the same courtesy a visitor gets from any other off-site link on
   the site. Scoped to .pet-guide-page so it never touches the legal pages'
   own internal-only linked bullets (order-cancellation form, etc.). */
.pet-guide-page .pet-legal-block a[target="_blank"]::after { content: " \2197"; }