/* reality — owned by TASK 09 (reality + related). Loaded after css/style.css (locked), so
   every rule here overrides/extends the ported base without touching it. See
   TASK-09-reality-related.md.

   New markup added by this task, all scoped to classes that did not exist before it:
   .all-priorities-link, .priority-layout / .priority-main (wrap the existing, unchanged
   .priority-columns + .priority-nav so they can sit side-by-side with a sidebar),
   .reality-sidebar / .reality-block / .reality-card* (THE REALITY stat cards, content from
   page frontmatter — verbatim-transcribed mockup text, needs candidate sign-off, see
   TASK-09-reality-related.md "Where the content comes from"), .related-priorities /
   .related-priority-item (derived cross-links, built in the template from sibling title/tagline,
   never authored in frontmatter). */

/* ---------------------------------------------------------------------------------------
   "All Priorities" back-link in the hero. New wrap>a+priority-hero-inner nesting (the old
   markup merged .wrap and .priority-hero-inner into one div — see priority.html.twig); the
   inner flex row's own min-height/centering is untouched, this just sits above it in flow.
   --------------------------------------------------------------------------------------- */
.all-priorities-link{
  display:inline-block;
  padding-top:22px;
  color:var(--red);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.all-priorities-link:hover{text-decoration:underline}

/* ---------------------------------------------------------------------------------------
   Layout: existing three columns + prev/next become the main (left) region, the new
   sidebar sits right. Desktop/tablet two-column grid; stacks to one column below 780px,
   sidebar after main content (reality block first inside it, related priorities last).
   --------------------------------------------------------------------------------------- */
/* Columns full width (v2), THE REALITY + RELATED underneath as one row — keeps the v2 look
   without leaving a tall sidebar next to short columns. */
.priority-layout{display:block}
.reality-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px;align-items:start}
@media(max-width:900px){.reality-sidebar{grid-template-columns:1fr}}
.priority-main{min-width:0}

/* ---------------------------------------------------------------------------------------
   TASK 12 fix: style.css ships .priority-columns as a 3-across grid (repeat(3,1fr)), which
   is what created the ~500px of dead space under the sidebar at 1280px — three short cards
   side by side are much shorter than the THE REALITY + RELATED PRIORITIES stack next to
   them. The mockups stack the three blocks vertically instead, which is exactly why their
   height balances against the sidebar. Loaded after style.css, so this wins at equal
   specificity and overrides the locked rule without touching it.
   --------------------------------------------------------------------------------------- */
/* 2026-09-09, client: back to three columns side by side, flat like the "FINAL v2" mockup —
   no cards, thin vertical rules, red bullets. Task 12 had stacked them to kill the dead space
   beside the sidebar; that is now solved differently (see .priority-layout below: the sidebar
   moved under the columns, full width, so nothing is starved for height). */
.priority-columns{grid-template-columns:repeat(3,1fr);gap:0;background:transparent;border:0}
.priority-col{background:transparent!important;box-shadow:none!important;border-radius:0!important;
  padding:4px 26px!important;border-right:1px solid var(--line)!important}
.priority-col:last-child{border-right:0!important}
.priority-col:first-child{padding-left:0!important}
.priority-col h2{font-size:15px;letter-spacing:.4px;margin-bottom:14px}
.priority-col ul{list-style:none;padding:0;margin:0}
.priority-col li{position:relative;padding-left:18px;margin:0 0 12px;font-size:14px;line-height:1.55}
.priority-col li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--red)}
/* style.css also gives every .priority-col a fixed min-height:270px, tuned for the old
   3-across layout so short bullet lists wouldn't look cramped next to taller neighbours.
   Stacked full-width, that forces blank padding in the shorter cards instead — let each
   card size to its own content (still comfortably padded via style.css's own padding:30px). */
.priority-col{min-height:0}
/* Can / can't glyphs in the third column (2026-09-10, client) — the red bullet is replaced by
   a 15px line-art circle: red X for "Council cannot …", ink-coloured check for "Council can …".
   Same stroke language as the outline icons in partials/icons.html.twig. Markup comes from
   priority.html.twig, which picks the class from the item's text prefix. */
.priority-col li.cc{padding-left:22px}
.priority-col li.cc::before{display:none}
.priority-col li.cc svg{position:absolute;left:0;top:.28em;width:15px;height:15px;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.priority-col li.cc-no svg{color:var(--red)}
.priority-col li.cc-yes svg{color:var(--ink)}

/* Section divider (icons.divider(), wired in by task 12) — mockup places it bottom-right of
   the "What Council Can and Can't Do" text, not centered underneath (checked directly against
   the mockup: qa/task12/housing-quote-area2.png). Flex row: heading forced to its own full-width
   line (flex-basis:100%), bullet list and divider share the row beneath it, bottom-aligned. */
/* 2026-09-09: back in three narrow columns there is no room beside the text, so the vignette
   simply sits under the list — and the heading stays on the same baseline as the other two
   columns (the old flex row pushed it down). */
.priority-col-divider{display:block}
.priority-col-divider .divider-svg{
  display:block;margin-top:18px;
  width:130px;
  max-width:130px;
  margin:0;
  opacity:.7;
}
@media(max-width:620px){
  /* Not enough room for text + a 130px illustration side by side once the card itself is
     narrower than a tablet — fall back to stacked/centered, matching how every other
     decorative element on this page already behaves below the tablet breakpoint. */
  .priority-col-divider ul{flex-basis:100%}
  .priority-col-divider .divider-svg{margin:16px auto 0;width:150px;max-width:150px}
}
@media(max-width:470px){
  .priority-col-divider .divider-svg{max-width:110px;width:110px;margin-top:14px}
}

/* superseded 2026-09-09 — see the .reality-sidebar grid above (columns full width, this row
   sits underneath them, two blocks side by side). */

@media(max-width:780px){
  .priority-columns{grid-template-columns:1fr;gap:0}
  .priority-col{border-right:0!important;border-bottom:1px solid var(--line)!important;
    padding:18px 0!important}
  .priority-col:last-child{border-bottom:0!important}
}

/* ---------------------------------------------------------------------------------------
   THE REALITY — stat cards
   --------------------------------------------------------------------------------------- */
.reality-block,
.related-priorities{
  background:var(--soft,#f7f7f5);
  border-radius:var(--radius,18px);
  padding:26px 24px;
}
.reality-heading{
  font-size:18px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.3px;
  margin:0 0 18px;
}
.reality-card{
  display:flex;
  gap:16px;
  padding:16px 0;
  border-top:1px solid var(--line);
}
.reality-card:first-of-type{border-top:0;padding-top:0}
.reality-card-icon{
  flex:0 0 auto;
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--red);
  display:grid;
  place-items:center;
  color:#fff;
}
.reality-card-icon svg{width:26px;height:26px;fill:currentColor}
.reality-card-figure{
  color:var(--red);
  font-weight:1000;
  text-transform:uppercase;
  font-size:15px;
  letter-spacing:.2px;
  margin-bottom:4px;
}
.reality-card-text{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
}

/* ---------------------------------------------------------------------------------------
   RELATED PRIORITIES — compact cross-links
   --------------------------------------------------------------------------------------- */
.related-priority-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 0;
  border-top:1px solid var(--line);
}
.related-priority-item:first-of-type{border-top:0;padding-top:0}
.related-priority-icon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  color:var(--red);
}
.related-priority-icon svg{width:100%;height:100%;fill:currentColor}
/* Now uses icons.svg_outline() (task update) — 34px container, matches the tuning already
   proven at the same size on css/blocks/priorities.css's .priorities-row-icon (stroke-width
   3 read as solid at 46px; 2.2 is the value that worked at 34px). */
.related-priority-icon svg{stroke-width:2.2}
.related-priority-title{
  font-weight:900;
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.2px;
  margin-bottom:2px;
}
.related-priority-tagline{
  font-size:13px;
  color:var(--muted);
  line-height:1.4;
}
.related-priority-item:hover .related-priority-title{color:var(--red)}

/* ---------------------------------------------------------------------------------------
   Mobile fine-tuning — 360/390px: no horizontal scroll, tap targets stay comfortable.
   --------------------------------------------------------------------------------------- */
@media(max-width:470px){
  .reality-block,
  .related-priorities{padding:20px 16px}
  .reality-card-icon{width:42px;height:42px}
  .reality-card-icon svg{width:22px;height:22px}
  .reality-card-figure{font-size:14px}
  .reality-card-text{font-size:13px}
}


/* ---- Named prev/next bar, "FINAL v2" (2026-09-09) ---- */
.priority-nav{display:flex;justify-content:space-between;align-items:stretch;gap:16px;
  margin-top:30px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.priority-nav a{display:flex;flex-direction:column;gap:3px;flex:1;min-height:44px;
  padding:16px 22px!important;border:0!important;border-radius:0!important;background:transparent!important;
  text-transform:none!important;transition:background .2s ease}
.priority-nav a:hover{background:#f4f4f2!important;transform:none!important}
.priority-nav-next{text-align:right;align-items:flex-end;border-left:1px solid var(--line)!important}
.priority-nav-label{font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.priority-nav-name{font-family:var(--font-head,Arial,Helvetica,sans-serif);font-size:16px;
  font-weight:900;text-transform:uppercase;color:var(--ink)}
.priority-nav a:hover .priority-nav-name{color:var(--red)}
@media(max-width:470px){
  .priority-nav a{padding:12px 14px!important}
  .priority-nav-name{font-size:13px}
}


/* ---- Priority hero head, "FINAL v2" (2026-09-09): 01 | TITLE, thin red rule, tag.
   2026-09-16 (client): number and divider gone; a bare red chevron sits in front of the title
   (same mark and red as the /priorities list rows; was very light grey for an hour). ---- */
.priority-hero-head{min-width:0}
.priority-hero-title{display:flex;align-items:center;gap:12px}
.priority-hero-chev{flex:0 0 auto;width:30px;height:30px;color:var(--red)}
.priority-hero-chev svg{width:30px;height:30px;display:block}
.priority-hero-rule{display:block;width:190px;max-width:60%;height:2px;background:var(--red);
  margin:12px 0 12px}
.priority-hero .tag{margin-top:0;max-width:44ch}
@media(max-width:780px){
  .priority-hero-title{gap:8px}
  .priority-hero-chev{width:22px;height:22px}
  .priority-hero-chev svg{width:22px;height:22px}
  .priority-hero-rule{width:130px;margin:9px 0}
}

/* ---------------------------------------------------------------------------------------
   2026-09-09 (client): THE REALITY dropped; "Related Priorities" became "Other Priorities"
   rendered as cards; the prev/next bar moved below them and "Next" went red.
   The old .reality-* / .related-* rules above are dead but left in place — the frontmatter
   they styled is still on every page, so restoring that block is markup-only.
   --------------------------------------------------------------------------------------- */
/* "Next" red, with a larger red arrow. Previous stays neutral so the forward direction reads
   as the primary one. */
.priority-nav-arrow{font-size:19px;line-height:1;vertical-align:-1px}
.priority-nav-next .priority-nav-label{color:var(--red)}
.priority-nav-next .priority-nav-arrow{color:var(--red);font-size:21px}
.priority-nav-next:hover .priority-nav-name{color:var(--red)}


/* Bigger glyph inside the hero badge (2026-09-09, client) — style.css sizes it at 46px in an
   82px circle, which left a lot of empty red around it. */
.priority-icon-round svg{width:58px;height:58px}
@media(max-width:780px){
  .priority-icon-round svg{width:40px;height:40px}
}