/* News / blog. Derived from the shipped design language — no mockup exists for this section.
Card treatment matches .panel / .priority-col: white, 14px radius, soft shadow. */
.news-list{max-width:900px;margin:0 auto;display:grid;gap:18px}
.news-card{background:#fff;border-radius:14px;padding:26px 28px;box-shadow:0 10px 34px rgba(0,0,0,.07)}
.news-meta{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.news-title{margin:6px 0 10px;font-size:26px;text-transform:uppercase;line-height:1.1}
.news-title a{color:var(--ink)}
.news-title a:hover{color:var(--red)}
.news-lead{margin:0 0 14px;font-size:16px}
.news-card .learn{color:var(--red);font-size:12px;text-transform:uppercase;font-weight:900}
/* Kind badge on the card + label in the meta line (2026-09-10, client). The card turns into a
two-column flex row only when a badge is present, so kind-less posts look exactly as before. */
.news-card-kind{display:flex;gap:22px;align-items:flex-start}
.news-card-body{min-width:0;flex:1}
.news-kind{
flex:0 0 auto;width:56px;height:56px;border-radius:50%;
display:grid;place-items:center;background:var(--red);color:#fff;
box-shadow:0 8px 20px rgba(201,8,11,.22);
}
.news-kind svg{width:28px;height:28px;fill:currentColor}
.news-kind-event{background:var(--ink)}
.news-kind-label{color:var(--red);font-weight:900}
.news-meta-sep{margin:0 8px;color:#bbb}
.news-hero-sub{display:flex;align-items:center;justify-content:center;gap:0}
.news-hero-kind{display:inline-flex;align-items:center;gap:8px;color:#fff}
.news-hero-kind-icon{width:22px;height:22px;display:inline-grid;place-items:center;color:#ff5457}
.news-hero-kind-icon svg{width:100%;height:100%;fill:currentColor}
@media(max-width:780px){
.news-card-kind{gap:14px}
.news-kind{width:44px;height:44px}
.news-kind svg{width:22px;height:22px}
}
.news-article{max-width:820px;margin:0 auto;font-size:17px}
.news-article h2{font-size:26px;text-transform:uppercase;margin:28px 0 12px}
.news-article ul{padding-left:20px}
.news-article li{margin:8px 0}
/* Article body (2026-09-10): links were invisible — style.css sets a{color:inherit} site-wide,
so a link in running copy looked like plain text. Red + underline here. First paragraph is
the lead: larger and heavier. Headings get the short red bar the section titles carry. */
.news-article a{color:var(--red);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.news-article a:hover{color:#a00609}
.news-article > p:first-of-type{font-size:20px;line-height:1.55;font-weight:600;color:#222}
/* Photo in the copy (2026-09-17): floated right, text wraps; stacked on the phone. */
.news-figure{float:right;width:min(42%,340px);margin:6px 0 18px 30px}
.news-figure-left{float:left;margin:6px 30px 18px 0}
.news-figure img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.12)}
.news-figure figcaption{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.4}
.news-figure figcaption + img{margin-top:18px} /* two photos stacked in one figure (2026-10-07) */
.news-article::after{content:"";display:table;clear:both}
.news-article h2{position:relative;padding-top:14px;scroll-margin-top:92px} /* #anchor links land below the sticky header (2026-10-08) */
.news-article h2::before{content:"";position:absolute;top:0;left:0;width:42px;height:3px;background:var(--red)}
.news-article li::marker{color:var(--red)}
/* Pull quote in a post (2026-10-07, client: the candidate's own line, set apart) — plain markdown `>`. */
.news-article blockquote{margin:26px 0;padding:6px 0 6px 22px;border-left:4px solid var(--red);font-size:1.22em;font-weight:700;line-height:1.35;color:var(--ink,#1a1a1a)}
.news-article blockquote p{margin:0}
/* Icon in an article heading (2026-10-07, client): raw {{ icons.svg('housing') }}…
in a post with twig_first — same site icons as the priorities, red, sized to the heading. */
.news-article h2 .news-h2-icon{display:inline-grid;place-items:center;width:28px;height:28px;color:var(--red);vertical-align:-5px;margin-right:10px}
.news-article h2 .news-h2-icon svg{width:100%;height:100%;fill:currentColor}
.news-article h2 .news-h2-icon svg [fill="none"]{fill:none}
/* Chevron list (2026-09-17, client: "nie bodky ale >, zľava odsunuté") — raw
in the post's markdown; the marker is the site chevron (icons.chev()) as a data URI, indented. */
.news-article ul.news-chev-list{list-style:none;margin:14px 0 14px 22px;padding:0}
.news-article .news-chev-list li{position:relative;padding-left:26px;margin:6px 0}
.news-article .news-chev-list li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23c9080b' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.news-article strong{color:var(--ink)}
/* Blocks under the copy (event card / key dates / CTA), see templates/item.html.twig. */
.news-block{max-width:820px;margin:36px auto 0}
.news-block-top{margin:0 auto 32px}
.news-block-title{font-size:22px;text-transform:uppercase;margin:0 0 14px;font-weight:1000}
.news-timeline{margin-bottom:0;gap:10px}
.news-timeline .vote-event{padding:14px 18px;gap:16px}
.news-timeline .vote-date{flex-basis:68px;padding:8px 0}
.news-timeline .vote-day{font-size:28px}
.news-timeline .vote-body h3{font-size:16px}
.news-timeline .vote-where{margin-bottom:0}
.news-timeline .vote-body p{margin-top:8px}
.news-cta{
max-width:820px;margin:36px auto 0;padding:26px 28px;border-radius:18px;
background:linear-gradient(100deg,#a90000,#df1518);color:#fff;
display:flex;align-items:center;justify-content:space-between;gap:22px;
box-shadow:0 14px 40px rgba(201,8,11,.22);
}
.news-cta-text{display:flex;flex-direction:column;gap:4px}
.news-cta-text strong{font-size:22px;font-weight:1000;text-transform:uppercase;line-height:1.15}
.news-cta-text span{font-size:15px;opacity:.92}
.news-cta-btn{background:#fff;color:var(--red);border-radius:999px;flex:0 0 auto;white-space:nowrap}
.news-cta-btn:hover{background:#111;color:#fff}
.news-cta + .news-cta{margin-top:16px}
.news-cta + .news-back-bottom{margin-top:28px}
@media(max-width:780px){
.news-article > p:first-of-type{font-size:17px}
.news-figure{float:none;width:100%;max-width:420px;margin:0 auto 20px}
.news-cta{flex-direction:column;align-items:flex-start;padding:22px}
.news-cta-btn{align-self:stretch}
}
.news-back{margin-bottom:14px}
.news-back a{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.news-back a:hover{color:var(--red)}
.news-back-bottom{max-width:820px;margin:32px auto 0}
.pagination{display:flex;gap:8px;justify-content:center;margin-top:28px;list-style:none;padding:0}
.pagination li{display:inline-flex}
.pagination a,.pagination span{border:1px solid #ccc;border-radius:8px;padding:10px 14px;min-width:44px;
min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:13px}
.pagination .active span{background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:780px){
.news-card{padding:20px}
.news-title{font-size:21px}
}
/* "being prepared" banner on /news (2026-09-09) — same red treatment as .donate-preparing */
.news-preparing{max-width:820px;margin:0 auto 26px;padding:16px 22px;background:var(--red);
color:#fff;border:0;border-radius:12px;text-align:center;font-size:15px;line-height:1.5;
font-weight:800;box-shadow:0 10px 26px rgba(201,8,11,.25)}
/* Listing photo above the card (2026-10-07, client): the photo and the card read as one block. */
.news-has-thumb{border-radius:14px;overflow:hidden;box-shadow:0 10px 34px rgba(0,0,0,.07);background:#fff}
.news-has-thumb .news-card{border-radius:0;box-shadow:none}
.news-thumb{display:block;aspect-ratio:21/9;overflow:hidden;background:#eee}
.news-thumb img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block;transition:transform .3s}
.news-thumb:hover img{transform:scale(1.03)}
@media(max-width:780px){.news-thumb{aspect-ratio:16/9}}
/* Logo of the organisation a post is about, over the photo's bottom-left corner (2026-10-07,
client: WORCA) — on the listing photo (`list_logo:`) and on the post's own first photo. */
.news-thumb{position:relative}
.news-img-logo-wrap{position:relative;display:block}
.news-img-logo{position:absolute;left:14px;bottom:14px;display:block;background:rgba(255,255,255,.9);border-radius:8px;padding:7px 10px;line-height:0;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.news-img-logo img{display:block;height:26px;width:auto;margin:0;border-radius:0;box-shadow:none}
@media(max-width:780px){.news-img-logo{left:10px;bottom:10px;padding:5px 8px}.news-img-logo img{height:20px}}
.news-figure .news-img-logo{left:8px;bottom:8px;padding:4px 7px;border-radius:6px}.news-figure .news-img-logo img{height:16px}