/* priorities — owned by TASK 10 (/priorities index page). See TASKS.md.
   Loaded after css/style.css, so it only overrides/extends, never edits it.
   .simple-hero, .mountain-band and .community-lead are already-shipped classes from the
   locked style.css (the latter two ported but unused elsewhere) — reused as-is here. */

.priorities-lead { margin-bottom: 10px; }
/* The block moved below the list (2026-09-10, client), so it needs air above it instead of the
   list's own 30px top margin doing the separating. .priorities-list keeps its margin-bottom of 0,
   hence the value here rather than a change there. */
.priorities-lead-below { margin-top: 38px; }
@media(max-width:780px){ .priorities-lead-below { margin-top: 28px; } }

.priorities-intro-text {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
}
.priorities-intro-accent {
    display: block;
    margin-top: 10px;
    color: var(--red);
    font-size: 17px;
}

.priorities-list {
    max-width: 1080px;
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.priorities-row {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
    padding: 18px 22px;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.priorities-row:hover,
.priorities-row:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}
.priorities-row-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    color: var(--red);
}
/* Outline icons (icons.svg_outline(), task 12) carry their own fill="none"/fill="currentColor"
   per shape, so this fill:currentColor only ever reaches the one filled exception
   ('responsible-spending', which has no outline variant — see icons.html.twig). */
.priorities-row-icon svg { width: 100%; height: 100%; fill: currentColor; }
/* The outline macro sets stroke-width="4.5" (viewBox units) for the priority-hero badge context
   (82px on screen), where it looks right. At this list's 46px it read as nearly solid — a 4.5-unit
   stroke on a 5-6px-radius head circle leaves almost no hole. CSS stroke-width on the svg root
   overrides that presentation attribute (no child path sets its own), scoped to this small
   context only; the 82px hero badge is untouched. */
.priorities-row-icon svg { stroke-width: 3; }
/* 2026-09-16 (client): the black "01" number badge is gone; a bare ">" chevron opens the row,
   left of the icon — no box, no background. First very light grey, then red ("dajme všade
   červený") — the same red as the icon and the tagline. */
.priorities-row-chev {
    flex: 0 0 auto;
    width: 22px;
    height: 40px;
    color: var(--red);
    display: grid;
    place-items: center;
}
.priorities-row-chev svg { width: 22px; height: 22px; }
.priorities-row-body { flex: 1 1 auto; min-width: 0; }
.priorities-row-title {
    font-family: var(--font-head, Arial, Helvetica, sans-serif);
    font-size: 19px;
    font-weight: 900;
    text-transform: uppercase;
}
.priorities-row-tagline {
    margin-top: 3px;
    color: var(--red);
    font-weight: 800;
    font-size: 14px;
}
.priorities-row-summary {
    margin-top: 4px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
}
.priorities-row-arrow {
    flex: 0 0 auto;
    font-size: 25px;
    font-weight: 900;
    color: var(--red);
}
.priorities-row-arrow .chev { width: 22px; height: 22px; display: block; }

@media (max-width: 780px) {
    .priorities-intro-text { font-size: 15px; }
    .priorities-list { gap: 10px; }
    .priorities-row { padding: 14px 16px; gap: 12px; }
    .priorities-row-icon { width: 34px; height: 34px; }
    .priorities-row-icon svg { stroke-width: 2.2; }
    .priorities-row-chev { width: 16px; height: 30px; }
    .priorities-row-chev svg { width: 18px; height: 18px; }
    .priorities-row-title { font-size: 15px; }
    .priorities-row-tagline { font-size: 12px; }
    .priorities-row-summary { font-size: 12px; }
    /* 2026-09-10 (client): the arrow is back on phones. Task 10 hid it to save width, but the row
       is the tap target and the arrow is the only thing that says so — without it the cards read
       as static blocks. It fits: the summary line already wraps here, so the 20px glyph costs
       nothing the layout was using. */
    .priorities-row-arrow { display: block; font-size: 20px; }
}

/* "See All Priorities" link under the homepage priorities grid (request 10 -> 02, applied by the
   coordinator once task 02 had finished). Class instead of an inline style so it stays themeable. */
.priorities-more{text-align:center;margin-top:28px}

/* ---------------------------------------------------------------------------------------
   Closing copy under the homepage priorities grid (2026-09-09, client). Deliberately its own
   .priorities-outro-* trio rather than a reuse of .priorities-intro-*: those are recoloured
   white/#ff5457 further down this file for the dark .mountain-band on /priorities, and that
   recolour is unscoped — reusing them here would have printed white text on a light section.
   Shape (lead / paragraph / red accent line) is the same, so the two pages still read alike.
   --------------------------------------------------------------------------------------- */
.priorities-outro{margin-top:34px;text-align:center}
.priorities-outro-lead{
  font-family:var(--font-head,Arial,Helvetica,sans-serif);
  font-size:25px;font-weight:1000;text-transform:uppercase;letter-spacing:.3px;
  color:var(--ink);margin-bottom:10px;
}
.priorities-outro-text{
  max-width:720px;margin:0 auto;font-size:16px;line-height:1.6;color:var(--ink);
}
.priorities-outro-accent{
  display:block;margin-top:10px;color:var(--red);font-size:17px;
}
/* The "See All Priorities" button now follows a paragraph rather than the grid — give the pair
   a little more air between them than the 28px the button carried on its own. */
.priorities-outro + .priorities-more{margin-top:24px}
@media(max-width:780px){
  .priorities-outro{margin-top:26px}
  .priorities-outro-lead{font-size:20px}
  .priorities-outro-text{font-size:14px}
  .priorities-outro-accent{font-size:15px}
}

/* ---------------------------------------------------------------------------------------
   Red CTA banner (task 12, section 3) — the second piece task 10 skipped for lack of
   sanctioned new copy. Text is the page's existing intro.accent string, reused verbatim.
   --------------------------------------------------------------------------------------- */
.priorities-cta{background:var(--red);color:#fff;padding:28px 0}
.priorities-cta-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
}
.priorities-cta-text{
    display:flex;
    align-items:center;
    gap:16px;
    font-family:var(--font-head, Arial, Helvetica, sans-serif);
    font-weight:900;
    text-transform:uppercase;
    font-size:20px;
    letter-spacing:.3px;
}
.priorities-cta-mark{width:42px;height:26px;flex:0 0 auto;color:#fff}
.priorities-cta-mark svg{width:100%;height:100%;fill:currentColor}
.priorities-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    padding:12px 22px;
    border:2px solid #fff;
    border-radius:999px;
    color:#fff;
    font-weight:900;
    text-transform:uppercase;
    font-size:13px;
    letter-spacing:.4px;
    white-space:nowrap;
    text-decoration:none;
    transition:background .2s ease, color .2s ease;
}
.priorities-cta-btn:hover,
.priorities-cta-btn:focus-visible{background:#fff;color:var(--red)}

@media (max-width: 780px) {
    .priorities-cta{padding:22px 0}
    .priorities-cta-inner{flex-direction:column;text-align:center;gap:16px}
    .priorities-cta-text{font-size:16px}
}

/* ---------------------------------------------------------------------------------------
   2026-09-09 (client): drop the pale white wash behind the priorities list and put the real
   Whistler landscape there, running the full height of the band. Same treatment as the
   priority-page heroes — grayscale photo under a dark gradient — so the white cards read
   clearly on top. The photo lives on a ::before layer rather than on the element, so only it
   is greyscaled and the red accents on top keep their colour.
   Note the depth: css/blocks/ is one level below css/, hence ../../images/.
   --------------------------------------------------------------------------------------- */
/* 2026-09-10 (client), second correction: one landscape behind the whole page (hero + list
   transparent over it). 2026-09-16 (client, "štandard hore hero pozadie a spodok ako inde"):
   reverted to the standard sub-page shape — the hero carries the same hero-hills backdrop as
   every other simple page (brand.css .simple-hero), and the list sits on plain white like the
   content of every other page. No page-wide photo, no dark wash behind the list.

   Scoped to .page-shell-priorities (a class the template adds) because .page-shell is shared with
   templates/simple.html.twig — /contact, /donate and the policy pages must not inherit this.
   --------------------------------------------------------------------------------------- */
.page-shell-priorities{background:#fff;color:var(--ink)}
/* style.css gives .mountain-band a pale wash over priority-mountain.jpg; the list is on white now. */
.page-shell-priorities .mountain-band{background:#fff;background-image:none}
/* Divider under the page title (2026-09-10, client): white lines on the dark photo, exactly like
   the one in the home hero. The mountain stays red there too — one accent against white rules is
   the established pattern, and a fully white mark would disappear into the lines. */
.page-shell-priorities .simple-hero .title-rule .line{background:#fff}
/* Row titles pinned to ink so they survive any further flip of the band colour. */
.priorities-row-title{color:var(--ink)}
.priorities-row{color:var(--ink)}

/* Narrower list on desktop (2026-09-10, client — twice: 1080px → 880px → 740px). At the original
   width the rows ran almost the full page and each one was a very wide, very short strip with the
   arrow stranded far from the copy. 740px is the point where the longest summary line still fits
   on one line, so nothing starts wrapping. Untouched below 780px, where the list is already
   narrower than this cap. */
.priorities-list{max-width:740px}

/* ---------------------------------------------------------------------------------------
   Priority-page column heading icons + idea prompt (2026-09-10, client).
   --------------------------------------------------------------------------------------- */
.priority-col-heading{display:flex;align-items:center;gap:10px}
.priority-col-icon{
  width:34px;height:34px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;background:var(--red);color:#fff;
}
.priority-col-icon svg{width:18px;height:18px;fill:currentColor}

/* Whole box is the link, so the click target is generous. Soft neutral card so it reads as a
   side note to the list above, not as a fourth bullet; lightbulb in a red badge for the eye. */
.priority-idea{
  display:flex;align-items:center;gap:14px;
  margin-top:20px;padding:14px 16px;border-radius:14px;background:#f6f6f3;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.priority-idea:hover{transform:translateY(-2px);background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.08)}
.priority-idea-icon{
  width:42px;height:42px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;background:var(--red);color:#fff;
}
.priority-idea-icon svg{width:24px;height:24px;fill:currentColor}
.priority-idea-text{display:flex;flex-direction:column;line-height:1.3}
.priority-idea-text strong{font-size:15px;font-weight:900;color:var(--ink)}
.priority-idea-text span{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--red)}
@media(max-width:780px){
  .priority-col-icon{width:30px;height:30px}
  .priority-col-icon svg{width:16px;height:16px}
  .priority-idea{padding:12px 14px;gap:12px}
  .priority-idea-icon{width:38px;height:38px}
}


/* ---- Open seventh priority (2026-09-11, client). ----
   /priorities: listed after the "Six Priorities. One Community." copy, numbered on from the six.
   Same white row, but a dashed red outline says "this one is open". */
.priorities-list-open{margin-top:26px}
.priorities-row-open{outline:2px dashed var(--red);outline-offset:-2px}
@media(max-width:780px){ .priorities-list-open{margin-top:20px} }

/* Homepage: the seventh card spans the full grid width under the six (a seventh column would
   squeeze the others). Desktop only — below 780px style.css already lays every card out as a
   left-aligned icon | text | button row, and this one simply joins that list. */
@media(min-width:781px){
  .priority-card-wide{
    grid-column:1/-1;
    display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-rows:auto auto;
    column-gap:20px;align-items:center;text-align:left;
    min-height:0;margin:14px auto 0;padding:20px 26px;
    width:min(100%,760px);   /* narrower and centred under the six (2026-09-11, client) */
    border-right:0!important;
  }
  .priority-card-wide .priority-chev{margin:0 6px 0 0}
  .priority-card-wide .icon{grid-row:1/3;margin:0;width:52px;height:52px}
  .priority-card-wide h3{margin:0}
  .priority-card-wide p{margin-top:4px;max-width:70ch}
  .priority-card-wide .learn{grid-column:3;grid-row:1/3;margin:0}
}

/* 2026-09-11, client: no red line under the /priorities hero. Since 2026-09-16 brand.css draws
   no hero line anywhere, so the per-page override that lived here is gone. */

/* Homepage cards (2026-09-17, client): red chevron before the title, where the subtle "01"
   numbering (2026-09-11) used to be. Inherits the h3's red. */
.priority-chev{display:inline-block;margin:0 5px 0 0;vertical-align:-.05em}
.priority-chev .chev{width:.9em;height:.9em;vertical-align:0}

/* CTA banner content aligned to the list above (2026-09-11, client: "na šírku tých priorít,
   iba obsah"). The red band stays full-width; only the text + button are capped to the same
   740px the list uses, so the button ends where the row arrows end. */
.priorities-cta-inner{max-width:740px}

/* ---- Homepage priority cards as white cards (2026-09-11, client: "biele pozadie a jemné
   orámovanie"). style.css draws them as transparent cells separated by hairline dividers (with
   !important on some border-right rules by breakpoint), so this uses !important too and wins by
   load order. Gap replaces the dividers; the seventh keeps its centred, narrower row layout. ---- */
.priority-grid{gap:14px!important}
.priority-grid .priority-card{
  background:#fff!important;
  border:1px solid #e3e3df!important;
  border-radius:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.priority-grid .priority-card:hover{
  background:#fff!important;
  border-color:#d6d6d1!important;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
@media(min-width:781px){
  .priority-card-wide{margin-top:0}   /* the grid gap now spaces it, the dashed rule is gone */
}
@media(max-width:780px){
  .priority-grid .priority-card{padding:14px 16px}
}
@media(max-width:470px){
  .priority-grid .priority-card{padding:12px 14px}
}