/* SITE ADDITIONS, TASK B2 (PHASE 2 wave 1): the eleven site page types and the blog. Loaded after site.css on B2's pages only
   (<BaseLayout siteSheet="b2">). The vendored board (public/styles/board/, never edited) styles every approved class; a rule here
   exists only where the build renders something the approved mockup does not carry, and says which ruling or canon it serves.
   Tokens are the board's (tokens.css: --ink, --bronze, --cream, --r-*, --f-d, --ease), never a new colour. */

/* /reviews/ wall while named reviews wait on the attorney (Checkpoint C, IRV-14; src/data/reviews.ts namedCleared false): the
   approved wall keeps its eyebrow and heading, and the rating constant (deep-linked to the GBP, the contract's proofFallback)
   stands where the review cards go, inside the board's own bezel card. Board tokens only (cream bezel, gold stars, the
   display face, the team's radii and curves); the wall's card grid returns unchanged when the switch flips. */
[data-variant="A"] .p2-rv-fallback { display: block; color: var(--ink); transition: transform .45s var(--eout), box-shadow .45s var(--eout); }
[data-variant="A"] .p2-rv-fallback .p2-bezel-in { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; padding: clamp(1.6rem, 3vw, 2.6rem); }
[data-variant="A"] .p2-rv-fallback:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
[data-variant="A"] .p2-rv-fallback .li-stars svg { width: 22px; height: 22px; }
[data-variant="A"] .p2-rv-fallback-t { font-family: var(--f-d); font-size: var(--s-3); line-height: 1.1; flex: 1 1 16ch; }
[data-variant="A"] .p2-rv-fallback-go { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--ink); color: var(--cream); transition: transform .45s var(--eout); }
[data-variant="A"] .p2-rv-fallback-go svg { width: 1.1rem; height: 1.1rem; }
[data-variant="A"] .p2-rv-fallback:hover .p2-rv-fallback-go { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) { [data-variant="A"] .p2-rv-fallback, [data-variant="A"] .p2-rv-fallback-go { transition: none; } }

/* Blog post: the canon "At a Glance" TL;DR (templates/BLOG-POST-LAYOUT-VBH-CANON.astro .glance; core30-add-blog section X), the ONE
   element above the cover, rendered only when the post carries a TL;DR: the canon's light treatment (4px accent left rule,
   small-caps letterspaced label, the summary), this client's tokens (bronze rule, ink text). The approved mockup post has no TL;DR,
   so the board carries no rule for it. */
[data-variant="A"] .glance { margin: 20px 0 0; max-width: 64ch; border-left: 4px solid var(--bronze); padding: 2px 0 2px 18px; }
[data-variant="A"] .glance-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--bronze-dk); margin-bottom: 6px; }
[data-variant="A"] .glance p { margin: 0; font-size: 1.12rem; line-height: 1.6; color: var(--ink); }

/* Blog post: the author box (core30-add-blog section X, TASK B2): Dr. Galope as the clinic's Medical Director (FACT-029, FACT-033),
   between the article and the CTA card. "Medically reviewed by" only when the post's reviewedBy names him. Board tokens: the
   cream bezel ground, the ink-09 rule, the display face for the name, the bronze link of .li-link. */
[data-variant="A"] .post-author { margin-top: 44px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 22px 24px; background: var(--cream); border: 1px solid var(--ink-09); border-radius: 20px; }
[data-variant="A"] .post-author-copy { min-width: 0; }
[data-variant="A"] .post-author-img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
[data-variant="A"] .post-author-k { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--bronze-dk); margin: 0 0 6px; }
[data-variant="A"] .post-author-n { font-family: var(--f-d); font-size: 1.45rem; line-height: 1.1; color: var(--ink); margin: 0; }
[data-variant="A"] .post-author-r { font-size: 0.92rem; color: var(--ink-72); margin: 4px 0 0; }
[data-variant="A"] .post-author-c { font-size: 0.86rem; line-height: 1.55; color: var(--ink-62); margin: 6px 0 0; }
[data-variant="A"] .post-author-link { margin-top: 12px; }

/* [R15] About hero (TASK-B3): hero.lede is a writer md field (CONTENT-CONTRACT v1.4 K-46), so it renders through <Prose>,
   whose wrapper would break the approved mobile order (`.p1-ahero-r` is a flex column there and `.p1-ahero-r .p1-lede`
   takes order 3). The wrapper is display: contents, so the paragraph stays a direct flex item, as on APPROVED. */
[data-variant="A"] .p1-ahero-r > .p1-ahero-lede { display: contents; }

/* Template census D2 (TASK-B4, 2026-10-17): the post's category eyebrow is a link (the strict upward link to its hub), and the
   board renders it bronze-dk on a bronze-dk eyebrow with no decoration, so it read as plain eyebrow text even on hover. It takes
   the approved body-link cue at rest (the .p1-inlink underline: bronze .7, 1px, .22em) and goes ink on hover, as this post's own
   body links do (.blog-prose a). The eyebrow's type (size, weight, case, tracking, colour) is unchanged. */
[data-variant="A"] .article-hero .eyebrow a { text-decoration: underline; text-decoration-color: rgba(183,139,91,.7); text-decoration-thickness: 1px;
  text-underline-offset: .22em; transition: color .3s var(--ease), text-decoration-color .3s var(--ease); }
[data-variant="A"] .article-hero .eyebrow a:hover { color: var(--ink); text-decoration-color: var(--ink); }