/* =====================================================================
 *  DENOMINATION QUICK FACTS CARD  -  shared by both denomination templates
 * =====================================================================
 *  The definitional card in the hero: icon, label column, left-aligned
 *  value. The style_zone template (page.php) and the umbrella template
 *  (page-umbrella.php) carry different row sets over the same anatomy.
 *  It lives here rather than in page/denomination.css because the
 *  umbrella page does not load that stylesheet.
 *
 *  Depends on the --dnm-* tokens declared by the page stylesheet loaded
 *  alongside it, and falls back where an umbrella page has none.
 * ===================================================================== */

/* Quick Facts card: the design's own anatomy. Icon 22px, label column,
   value LEFT-aligned filling the rest, so long per-style values read as
   sentences instead of ragged right-aligned fragments. */
.dnm-qf { background: var(--color-surface-container-lowest); border-radius: 12px; box-shadow: var(--dnm-amb-md); padding: 1.5rem; }
@media (min-width: 1024px) { .dnm-qf { padding: 1.75rem; } }
.dnm-qf-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.35rem; }
.dnm-qf-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-primary); margin: 0; }
.dnm-qf-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; padding: 0.2rem 0.5rem; border-radius: 4px; }
.dnm-qf-badge.is-docg { background: var(--dnm-grad); color: #fff; }
.dnm-qf-badge.is-doc { background: var(--dnm-badge-bg); color: var(--color-primary); }
.dnm-qf-row { display: grid; grid-template-columns: 22px 96px 1fr; column-gap: 0.85rem; align-items: center; padding: 0.7rem 0; }
@media (min-width: 1280px) { .dnm-qf-row { grid-template-columns: 22px 104px 1fr; } }
.dnm-qf-row + .dnm-qf-row { border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 40%, transparent); }
.dnm-qf-icon { width: 22px; height: 22px; object-fit: contain; }
.dnm-qf-row.is-muted .dnm-qf-icon { opacity: 0.45; }
/* Label greys are solid #6f6c75 (5.15:1 on white): the token and its 70%
   mixes sit under the 4.5:1 WCAG floor at these sizes. */
.dnm-qf-row.is-muted .dnm-qf-label { color: #6f6c75; }
.dnm-qf-label { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6f6c75; font-weight: 600; line-height: 1.35; }
.dnm-qf-value { font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--color-on-surface); text-align: left; text-wrap: pretty; }
/* Entity links in the card read as links: primary colour with a tinted
   underline, solid on hover (the mockup's base anchor treatment). */
.dnm-qf-value a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-primary) 35%, transparent); text-underline-offset: 3px; }
.dnm-qf-value a:hover { color: var(--color-primary-container); text-decoration-color: currentColor; }
.dnm-qf-value .entity-qf-badge { display: inline-block; background: var(--dnm-badge-bg); color: var(--color-primary); font-size: 11px; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 4px; margin-right: 0.35rem; }
.dnm-qf-foot { border-top: 1px solid color-mix(in srgb, var(--color-outline-variant) 40%, transparent); padding-top: 1rem; margin-top: 0.5rem; }
.dnm-qf-foot-label { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #6f6c75; font-weight: 600; margin: 0 0 0.6rem; }
.dnm-qf-foot-jump { font-style: italic; color: var(--color-primary); text-transform: none; letter-spacing: normal; font-weight: 500; }
.dnm-qf-muted { font-style: italic; font-size: 12.5px; color: #6f6c75; }

/* Token fallbacks so the card is self-sufficient on a page whose stylesheet
   does not declare the denomination palette. */
.dnm-qf { --dnm-amb-md: 0 8px 24px -12px rgba(86, 19, 113, 0.22); --dnm-grad: linear-gradient(135deg, #561371, #702f8a); --dnm-badge-bg: #f9eafd; }