/* Components of this guide. Colours, surfaces and radii come from the Content UI Kit tokens (--mcui-*, content-ui-kit/README.md);
   each fallback keeps the look on pages without the kit. Game colours are named --wow-*. Tables, lists and anchors use the blog layout. */
.blog-wrapper { --wow-normal: oklch(0.74 0.17 145); --wow-heroic: oklch(0.7 0.13 245); --wow-mythic: oklch(0.74 0.18 55); }
.blog-wrapper :is(p, li, td) { text-wrap: pretty; }
.rg-normal { color: var(--wow-normal); font-weight: 700; }
.rg-heroic { color: var(--wow-heroic); font-weight: 700; }
.rg-mythic { color: var(--wow-mythic); font-weight: 700; }
.rg-glance { margin-block: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--mcui-line, oklch(0.8 0.03 275 / 0.12)); border-radius: var(--mcui-radius, 8px); background: var(--mcui-reference, oklch(0.26 0.03 275)); }
.blog-wrapper .rg-glance > p { margin: 0; font-weight: 700; color: var(--mcui-ink, oklch(0.96 0.01 275)); }
.blog-layout .blog-wrapper .rg-glance ul { display: grid; gap: 0.85rem; margin: 0.85rem 0 0; padding: 0; list-style: none; }
.blog-layout .blog-wrapper .rg-glance li { display: grid; grid-template-columns: 2.75rem 1fr; column-gap: 0.85rem; align-items: center; margin: 0; padding: 0; }
.blog-wrapper .rg-glance img { grid-row: span 2; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--mcui-radius-sm, 4px); }
.blog-wrapper .rg-glance a { align-self: end; font-weight: 700; }
.blog-wrapper .rg-glance span { align-self: start; font-size: 0.875rem; line-height: 1.45; color: var(--mcui-muted, oklch(0.77 0.035 275)); }
.blog-wrapper .rg-era time { white-space: nowrap; }
/* Same columns in every era table, so the timeline reads as one list. Phones stack rows (blog layout) and ignore this. */
.blog-wrapper table.rg-era { table-layout: fixed; }
.blog-wrapper .rg-era th:first-child { inline-size: 42%; }
.blog-wrapper .rg-era thead th:nth-child(2) { inline-size: 26%; }
.blog-wrapper .rg-when { display: block; font-size: 0.875rem; font-weight: 400; color: var(--mcui-muted, oklch(0.77 0.035 275)); }
/* Boss names never break inside a name. Phones stack the table (blog layout); the row already names its raid, so the
   «Bosses» label is dropped and the names take the full width. */
.blog-wrapper .rg-bosses td span { white-space: nowrap; }
.blog-layout .blog-wrapper table.rg-bosses:has(td[data-label]) tr > td:not(:first-child)::before { content: none; }