/* =========================================================================
   Propozycja 1 — „Biel i granat”.
   Kierunek: urzędowa schludność (biel, cienkie linie, dużo światła). Szeryfowy
   Source Serif 4 w nagłówkach (średnia grubość, bez wersalików), Atkinson Hyperlegible
   Next w tekście (krój projektowany pod czytelność). Granat marki SM rgb(1,4,51) jako
   kolor tytułów i łączy; złoto rgb(239,194,14) tylko jako cienki akcent graficzny
   (nigdy tekst na bieli) i jako tekst na granacie.
   WERSJA MIĘKKA (15.11.2026): cieplejsza paleta (kremowe tła, łagodniejszy granat #1a2456, miodowe złoto #e8b84a),
   rogi 8 px (hero i podmenu bez zaokrągleń), białe karty na kremowym tle. Układ bez zmian.
   UWAGA: poniższe kontrasty dotyczą POPRZEDNIEJ palety — do przeliczenia dla nowej: tekst #1a1f36/biel ≈ 16:1; granat/biel ≈ 20:1; przygaszony #5c6378/biel ≈ 6:1;
   złoto/granat ≈ 11,6:1; #dfe2ee/granat ≈ 15:1.
   Nakładka na base.css z CMS (wzór theme-krk.css). Po wyborze: theme-sm.css + theme.json
   (kroje pobierane na dysk, bez żądań do Google przed zgodą).
   ========================================================================= */

:root {
    /* Wersja miękka: łagodniejszy granat, miodowe złoto, kremowe tła i ciepłe linie. */
    --c-primary:      #1a2456;
    --c-primary-dark: #2b3773; /* stan :hover koloru głównego (przyciski, wyszukiwarka) */
    --c-accent:       #e8b84a;
    --c-bg:           #fbf9f5;
    --c-surface:      #f3eee4;
    --c-text:         #1c2138;
    --c-muted:        #565b6e;
    --c-border:       #e6dfd2;
    --c-dark:         #1a2456;

    --font-base: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
    --font-head: "Source Serif 4", Georgia, "Times New Roman", serif;
    --fs-base: 1.0625rem;
    --lh-base: 1.65;

    --container: 1200px;
    --radius: 8px;
    --gutter: 1.5rem;

    --sm-on-navy: #dfe2ee;
    --sm-band-h: 2.75rem; /* wysokość przyklejonego paska alarmowego (komputer) */
}

/* ---------- Dostępność ---------- */
.sm-skip {
    position: absolute; left: -9999px; top: 0; z-index: 3000;
    background: var(--c-white); color: var(--c-primary); font-weight: 700; padding: 0.6rem 1rem; border: 2px solid var(--c-primary);
}
.sm-skip:focus { left: 1rem; top: 1rem; }
/* Burger z klawiatury (Tab + spacja). Poprawka żyje w wariancie, bo base.css nadpisuje kopiuj-z-cms.sh; docelowo do CMS. */
.pb-menu-toggle { display: none; }
@media (max-width: 768px) {
    .pb-menu-toggle { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
    .pb-menu-toggle:focus-visible + .pb-menu-burger { outline: 3px solid var(--c-primary); outline-offset: 2px; }
}
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.sm-util :focus-visible, .sm-alarm :focus-visible, .sm-footer :focus-visible { outline-color: var(--c-accent); }
.sm-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Typografia ---------- */
.pb-heading, .pb-article-title {
    font-family: var(--font-head); font-optical-sizing: auto; font-weight: 600;
    letter-spacing: -0.01em; color: var(--c-primary);
}
h1.pb-heading, .pb-article-title { font-size: clamp(2rem, 1.5rem + 1.8vw, 2.75rem); line-height: 1.15; }
h2.pb-heading { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); line-height: 1.2; }
.sm-news h2.pb-heading::after, .sm-tasks h2.pb-heading::after, .sm-districts h2.pb-heading::after {
    content: ""; display: block; width: 3rem; height: 5px; margin-top: 0.6rem; background: var(--c-accent); border-radius: 5px;
}
.pb-text a { text-underline-offset: 0.18em; }
.sm-muted { color: var(--c-muted); }

/* ---------- Pasek górny (granat) ---------- */
.sm-util.pb-section { background: var(--c-primary); color: var(--sm-on-navy); padding-top: 0.45rem; padding-bottom: 0.45rem; font-size: 0.9rem; }
.sm-util a { color: var(--c-white); }
.sm-util .pb-text a { text-decoration: none; }
.sm-util strong { color: var(--c-accent); font-size: 1.05rem; }
.sm-util-right { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; }
.sm-util-right .pb-el + .pb-el { margin-top: 0; }
.sm-util-links > ul { gap: 0.25rem 1.25rem; }
.sm-util-links a { text-decoration: none; }
.sm-util-links a:hover, .sm-util .pb-text a:hover { text-decoration: underline; }
.sm-util-logo img { max-height: 28px; width: auto; }

/* ---------- Nagłówek (biel) ---------- */
.sm-masthead.pb-section { padding-top: 1.25rem; padding-bottom: 0; background: var(--c-white); }
.sm-brand-col .pb-col-inner { display: flex; align-items: center; gap: 1rem; }
.sm-brand-col .pb-el + .pb-el { margin-top: 0; }
.sm-masthead .pb-logo img { max-height: 76px; }
.sm-brand p { line-height: 1.1; }
.sm-brand strong { display: block; font-family: var(--font-head); font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem); font-weight: 600; color: var(--c-primary); }
.sm-brand span { display: block; margin-top: 0.2rem; font-size: 1rem; color: var(--c-muted); }

.sm-masthead-right { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.sm-masthead-right .pb-el + .pb-el { margin-top: 0; }
.sm-bip img { max-height: 40px; width: auto; }
.sm-search form { display: flex; }
.sm-search input[type=search] {
    font: inherit; font-size: 0.95rem; width: 15rem; max-width: 100%; min-width: 0;
    padding: 0.5rem 0.8rem; border: 1px solid var(--c-border); border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius); background: var(--c-white); color: var(--c-text);
}
.sm-search input[type=search]:focus { border-color: var(--c-primary); }
.sm-search button {
    font: inherit; font-size: 0.95rem; font-weight: 700;
    padding: 0.5rem 0.95rem; border: 1px solid var(--c-primary); border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--c-primary); color: var(--c-white); cursor: pointer;
}
.sm-search button:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); }

.sm-masthead .sm-navrow { margin-top: 1.25rem; border-top: 1px solid var(--c-border); }
.sm-nav > ul > li > a {
    border-radius: 0; color: var(--c-text); font-weight: 400;
    padding: 0.95rem 0.85rem; box-shadow: inset 0 -3px 0 transparent;
    transition: box-shadow 0.15s, color 0.15s;
}
.sm-nav > ul > li > a:hover, .sm-nav > ul > li:focus-within > a { background: transparent; color: var(--c-primary); box-shadow: inset 0 -3px 0 var(--c-accent); }
.sm-nav > ul > li > a[aria-current="page"] { font-weight: 700; color: var(--c-primary); box-shadow: inset 0 -3px 0 var(--c-primary); }
/* Podmenu bez zaokrągleń (lista i jej pozycje). */
.sm-nav li ul, .sm-nav li ul a { border-radius: 0; }
.sm-nav li ul a[aria-current="page"] { font-weight: 700; color: var(--c-primary); }
@media (min-width: 769px) { .sm-nav > ul { margin-left: -0.85rem; } }
.sm-masthead { box-shadow: 0 1px 0 var(--c-border); }

/* ---------- Przyciski ---------- */
.pb-btn { border-radius: var(--radius); font-weight: 700; }
.pb-btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.pb-btn--primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); color: var(--c-white); }
.pb-btn--outline { border-color: var(--c-primary); color: var(--c-primary); }
.pb-btn--outline:hover { background: var(--c-primary); color: var(--c-white); }
.pb-btn--link { color: var(--c-primary); padding-inline: 0; }
.pb-btn--link::after { content: " →"; }

/* ---------- Hero: karuzela treści na całą szerokość, bez zdjęć (scroll-snap z base.css, bez JS) ----------
   Tło: granat z miękkim rozjaśnieniem. Z lewej treść slajdu, z prawej duża liczba jako element graficzny. */
.sm-hero.pb-section {
    --sm-edge: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); /* odstęp treści od krawędzi ekranu */
    padding-top: 0; padding-bottom: 0; color: var(--sm-on-navy);
    background: radial-gradient(120% 150% at 88% 0%, var(--c-primary-dark) 0%, var(--c-primary) 58%);}
.sm-hero .pb-row { gap: 0; }
.sm-hero :focus-visible { outline-color: var(--c-accent); }
.sm-hero-slider .pb-slider-track { border-radius: 0; scrollbar-width: none; }
.sm-hero-slider .pb-slider-track::-webkit-scrollbar { display: none; }
.sm-slide {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 3rem;
    min-height: clamp(15rem, 21vw, 19rem); padding: 2.25rem var(--sm-edge) 3.5rem;
}
/* Kreski karuzeli to kotwice (#sl-hero-N). Przeglądarka po kliknięciu kotwicy ustawia cel pod przyklejonym
   nagłówkiem i przesuwała stronę w pionie o kilkanaście px. Duży margines przewijania sprawia, że strona
   w pionie zostaje na samej górze, a przesuwa się tylko karuzela w poziomie. */
.sm-slide { scroll-margin-top: 100vh; }
.sm-slide-body { max-width: 40rem; }
.sm-slide-kicker { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent); }
.sm-slide-title { margin-top: 0.5rem; font-family: var(--font-head); font-optical-sizing: auto; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; color: var(--c-white); text-wrap: balance; }
.sm-slide-text { margin-top: 0.7rem; }
.sm-slide-cta { margin-top: 1.2rem; }
.sm-hero .pb-btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-primary); }
.sm-hero .pb-btn--primary:hover { background: var(--c-white); border-color: var(--c-white); color: var(--c-primary); }
.sm-slide-figure { text-align: right; }
.sm-slide-figure strong { display: block; font-family: var(--font-head); font-optical-sizing: auto; font-size: clamp(4.5rem, 2rem + 7vw, 8.5rem); font-weight: 600; letter-spacing: -0.03em; line-height: 0.9; color: var(--c-white); font-variant-numeric: lining-nums; }
.sm-slide-figure span { display: block; margin-top: 0.8rem; padding-top: 0.6rem; border-top: 2px solid var(--c-accent); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }
/* Kreski zamiast kropek, wyrównane do treści; pole klikalne 24 px wysokości. */
.sm-hero-slider .pb-slider-dots { position: absolute; left: var(--sm-edge); bottom: 1rem; margin: 0; gap: 0.5rem; justify-content: flex-start; }
.sm-hero-slider .pb-slider-dots a { width: 2.25rem; height: 1.5rem; padding: 0.55rem 0; border-radius: 0; background: rgba(255, 255, 255, 0.55); background-clip: content-box; }
.sm-hero-slider .pb-slider-dots a:hover { background-color: var(--c-accent); }

/* ---------- Otwarcie: wiadomość dnia + telefon alarmowy ---------- */
.sm-top.pb-section { --pb-pad: var(--sp-xl); }
.sm-top .pb-row + .pb-row { margin-top: 0; }
.sm-top .pb-row { gap: 2.5rem; }
.sm-lead-story .pb-listing-list li { padding: 0; border: 0; }
.sm-lead-story .pb-listing-item.has-thumb { display: block; }
.sm-lead-story .pb-listing-thumb { display: block; overflow: hidden; border-radius: var(--radius); }
.sm-lead-story .pb-listing-thumb img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; transition: transform 0.4s; }
.sm-lead-story .pb-listing-item:hover .pb-listing-thumb img { transform: scale(1.02); }
.sm-lead-story .pb-listing-body { display: flex; flex-direction: column; padding-top: 1.1rem; }
.sm-lead-story .pb-listing-meta { order: -1; margin: 0 0 0.4rem; font-size: 0.9rem; color: var(--c-muted); }
.sm-lead-story .pb-listing-title {
    font-family: var(--font-head); font-optical-sizing: auto; font-weight: 600;
    font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.25rem); line-height: 1.2; color: var(--c-primary);
}
.sm-lead-story .pb-listing-title:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.sm-lead-story .pb-listing-lead { margin-top: 0.6rem; font-size: 1.1rem; color: var(--c-text); max-width: 46rem; }
.sm-lead-story .pb-listing-more { display: none; }

.sm-alarm { background: var(--c-primary); color: var(--sm-on-navy); border-radius: var(--radius); padding: 1.5rem 1.6rem; box-shadow: 0 16px 32px -22px rgba(26, 36, 86, 0.6); }
.sm-alarm p { margin: 0; }
.sm-alarm a { color: var(--c-accent); font-weight: 700; text-decoration: none; }
.sm-alarm-label { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sm-alarm-number a { font-family: var(--font-head); font-size: 4rem; font-weight: 600; line-height: 1; color: var(--c-white); text-decoration: none; }
.sm-alarm a:hover { text-decoration: underline; }
.sm-alarm .sm-alarm-extra { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.16); font-size: 0.95rem; }
.sm-alarm-cta .pb-btn { display: block; text-align: center; }
.sm-contact-mini { padding-top: 0.25rem; font-size: 0.95rem; color: var(--c-muted); }
.sm-contact-mini strong { color: var(--c-text); }

/* ---------- Aktualności: karty 4 w rzędzie ---------- */
.sm-news.pb-section { --pb-pad: var(--sp-xl); border-top: 1px solid var(--c-border); }
.sm-news .pb-row + .pb-row { margin-top: var(--sp-lg); }
.sm-news-list .pb-listing-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.sm-news-list .pb-listing-list li { padding: 0; border: 0; }
.sm-news-list .pb-listing-item.has-thumb { display: block; }
.sm-news-list .pb-listing-thumb { display: block; overflow: hidden; border-radius: var(--radius); }
.sm-news-list .pb-listing-thumb img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0; transition: transform 0.4s; }
.sm-news-list .pb-listing-item:hover .pb-listing-thumb img { transform: scale(1.03); }
.sm-news-list .pb-listing-body { display: flex; flex-direction: column; padding-top: 0.8rem; }
.sm-news-list .pb-listing-meta { order: -1; margin: 0 0 0.3rem; font-size: 0.88rem; color: var(--c-muted); }
.sm-news-list .pb-listing-title { font-family: var(--font-head); font-optical-sizing: auto; font-size: 1.15rem; font-weight: 600; line-height: 1.3; color: var(--c-primary); }
.sm-news-list .pb-listing-title:hover { text-decoration: underline; text-underline-offset: 0.15em; }
/* Tytuł jest już łączem — zbędne „Czytaj więcej” chowamy (czytniki ekranu nie słyszą 5× tego samego). */
.sm-news-list .pb-listing-more { display: none; }
@media (max-width: 1000px) { .sm-news-list .pb-listing-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sm-news-list .pb-listing-list { grid-template-columns: 1fr; } }

/* ---------- Załatw sprawę ---------- */
.sm-tasks.pb-section { --pb-pad: var(--sp-xl); background: var(--c-surface); }
.sm-tasks .pb-row { --pb-items: stretch; }
.sm-tasks .pb-row + .pb-row { margin-top: var(--sp-lg); }
.sm-tasks .pb-col-inner { height: 100%; }
.sm-task {
    position: relative; height: 100%;
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius);
    box-shadow: 0 10px 24px -20px rgba(26, 36, 86, 0.35);
    padding: 1.3rem 2.75rem 1.4rem 1.4rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sm-task::after { content: "→"; position: absolute; right: 1.25rem; top: 1.3rem; color: var(--c-primary); transition: transform 0.15s; }
.sm-task h3 { margin: 0; font-family: var(--font-head); font-optical-sizing: auto; font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.sm-task h3 a { color: var(--c-primary); text-decoration: none; }
.sm-task h3 a::after { content: ""; position: absolute; inset: 0; }
.sm-task p { margin-top: 0.4rem; color: var(--c-muted); font-size: 1rem; }
.sm-task:hover { border-color: var(--c-primary); box-shadow: 0 6px 20px -12px rgba(1, 4, 51, 0.35); }
.sm-task:hover::after { transform: translateX(3px); }
.sm-task:focus-within { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.sm-task h3 a:focus-visible { outline: none; }

/* ---------- Sekcje terenowe: tabela ---------- */
.sm-districts.pb-section { --pb-pad: var(--sp-xl); }
.sm-table { overflow-x: auto; margin-top: var(--sp-md); }
.sm-table table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.sm-table th, .sm-table td { text-align: left; vertical-align: top; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--c-border); }
.sm-table thead th { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); border-bottom: 2px solid var(--c-primary); }
.sm-table tbody th { font-family: var(--font-head); font-size: 1.35rem; font-weight: 600; color: var(--c-primary); width: 5rem; }
.sm-table td:last-child { white-space: nowrap; }
.sm-table td a { color: var(--c-primary); font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.sm-table td a:hover { text-decoration: underline; }
.sm-table tbody tr:hover { background: var(--c-surface); }

/* ---------- Na skróty ---------- */
.sm-more.pb-section { --pb-pad: var(--sp-lg); padding-bottom: var(--sp-xl); }
.sm-more .pb-row { --pb-items: stretch; }
.sm-more .pb-col-inner { height: 100%; }
.sm-note { height: 100%; background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.3rem 1.5rem; }
.sm-note h3 { margin: 0; font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; color: var(--c-primary); }
.sm-note ul { list-style: none; padding: 0; }
.sm-note li + li { margin-top: 0.3rem; }
/* „Zobacz też”: białe tło sekcji — logotypy partnerów mają własne jasne tła, na kremowym odcinałyby się prostokątami. */
.sm-seealso.pb-section { background: var(--c-white); border-top: 1px solid var(--c-border); }

/* ---------- Podstrona ---------- */
/* Pas z tytułem podstrony: biały, jak nagłówek nad nim (beżowe tło wyglądało ciężko); od treści oddziela go linia. */
.sm-page-head.pb-section { --pb-pad: var(--sp-lg); background: var(--c-white); border-bottom: 1px solid var(--c-border); }
.sm-crumbs { font-size: 0.92rem; color: var(--c-muted); }
.sm-crumbs a { color: var(--c-primary); }
.sm-crumbs + .pb-heading { margin-top: 0.4rem; }
.sm-page.pb-section { --pb-pad: var(--sp-xl); }
/* Typografia treści głównej — bez boksów panelu bocznego (:where nie podnosi specyficzności). */
.sm-page .pb-text:where(:not(.sm-alarm, .sm-side-contact)) { max-width: 46rem; font-size: 1.1rem; }
.sm-page .pb-text h2 { font-family: var(--font-head); font-size: 1.55rem; font-weight: 600; color: var(--c-primary); margin-top: 1.5em; }
.sm-page .pb-text > h2:first-child { margin-top: 0; }
.sm-page .pb-text li + li { margin-top: 0.3rem; }

.sm-side-nav { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.4rem 0; overflow: hidden; }
.sm-side-nav .pb-el-title { margin: 0; padding: 0.75rem 1.1rem 0.6rem; font-family: var(--font-head); font-size: 1.15rem; color: var(--c-primary); border-bottom: 1px solid var(--c-border); }
.sm-side-nav li { margin: 0; }
.sm-side-nav li a { display: block; padding: 0.55rem 1.1rem; color: var(--c-text); box-shadow: inset 3px 0 0 transparent; }
.sm-side-nav li a:hover { background: var(--c-surface); color: var(--c-primary); text-decoration: none; }
.sm-side-nav a[aria-current="page"] { font-weight: 700; color: var(--c-primary); background: var(--c-surface); box-shadow: inset 3px 0 0 var(--c-accent); }
.sm-alarm--side { margin-top: var(--sp-md); }

/* ---------- Aktualność ---------- */
.pb-article-head { padding-bottom: var(--sp-md); margin-bottom: var(--sp-lg); border-bottom: 1px solid var(--c-border); }
.pb-article-date { margin-top: 0.6rem; color: var(--c-muted); }
.pb-article-img { border-radius: var(--radius); }
.sm-side-box { background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1rem 1.25rem; }
.sm-side-box .pb-el-title { font-family: var(--font-head); font-size: 1.15rem; color: var(--c-primary); }
.sm-side-box .pb-recent-list li { padding: 0.6rem 0; }
.sm-side-box .pb-recent-list li:last-child { border-bottom: 0; }
.sm-side-box .pb-recent-list a { color: var(--c-text); }
.sm-side-box .pb-recent-list a:hover { color: var(--c-primary); }
.sm-side-box + .pb-button { margin-top: var(--sp-md); }

/* ---------- Stopka (granat, wspólna) ---------- */
.sm-footer.pb-section { --pb-pad: var(--sp-xl); background: var(--c-primary); color: var(--sm-on-navy); padding-bottom: var(--sp-md); }
.sm-footer h2.sm-footer-title { font-family: var(--font-base); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent); }
.sm-footer .pb-text, .sm-footer .pb-text p { color: var(--sm-on-navy); }
.sm-footer a { color: var(--c-white); }
.sm-footer .pb-text a:hover { color: var(--c-accent); }
.sm-footer-hotline p { display: flex; align-items: baseline; gap: 0.6rem; }
.sm-footer-hotline strong { font-family: var(--font-head); font-size: 2rem; font-weight: 600; line-height: 1; color: var(--c-white); }
.sm-footer-hotline a { text-decoration: none; }
.sm-footer .pb-menu--vertical li { margin: 0.3rem 0; }
.sm-footer .sm-footer-logos { margin-top: var(--sp-xl); padding-top: var(--sp-lg); border-top: 1px solid rgba(255, 255, 255, 0.14); }
.sm-logos .pb-logobar-track { justify-content: flex-start; gap: 2.5rem; }
.sm-logos .pb-logobar-item img { max-height: 44px; filter: none; opacity: 1; }
.sm-footer .sm-footer-bottom { margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.88rem; }

/* ---------- Telefon ---------- */
@media (max-width: 768px) {
    .sm-masthead .pb-logo img { max-height: 58px; }
    .sm-masthead-right { justify-content: flex-start; margin-top: 0.75rem; }
    .sm-search input[type=search] { width: auto; flex: 1 1 auto; }
    .sm-search, .sm-search form { flex: 1 1 auto; }
    /* Układ piętrowy tylko dla tabeli sekcji (numer + 3 komórki); pozostałe tabele przewijają się w poziomie. */
    .sm-districts .sm-table thead { display: none; }
    .sm-districts .sm-table tr { display: grid; grid-template-columns: 3rem 1fr; padding: 0.75rem 0; border-bottom: 1px solid var(--c-border); }
    .sm-districts .sm-table th, .sm-districts .sm-table td { border: 0; padding: 0.1rem 0; }
    .sm-districts .sm-table tbody th { grid-row: span 3; }
    .sm-table td:last-child { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .sm-lead-story .pb-listing-thumb img, .sm-news-list .pb-listing-thumb img, .sm-task, .sm-task::after, .sm-nav > ul > li > a { transition: none; }
    .sm-lead-story .pb-listing-item:hover .pb-listing-thumb img, .sm-news-list .pb-listing-item:hover .pb-listing-thumb img, .sm-task:hover::after { transform: none; }
}

/* ======================= Dopracowanie: sticky, przestrzeń, widgety, podstrony ======================= */
/* Przyklejony nagłówek (logo, wyszukiwarka, menu) na komputerze; pasek alarmowy nad nim odjeżdża. */
@media (min-width: 769px) {
    /* Przyklejone oba: pasek alarmowy (stała wysokość --sm-band-h, treść wyśrodkowana) i pod nim nagłówek. */
    .sm-util.pb-section { position: sticky; top: 0; z-index: 110; height: var(--sm-band-h); padding-top: 0; padding-bottom: 0; --pb-justify: center; }
    .sm-masthead.pb-section { position: sticky; top: var(--sm-band-h); z-index: 100; box-shadow: 0 1px 0 var(--c-border), 0 10px 24px -20px rgba(1, 4, 51, 0.3); }
    html { scroll-padding-top: 13.25rem; }
}

/* Więcej przestrzeni */
:root { --container: 1240px; --gutter: 2rem; }
.sm-masthead.pb-section { padding-top: 1.5rem; }
.sm-masthead .sm-navrow { margin-top: 1.5rem; }
.sm-top.pb-section { --pb-pad: var(--sp-xxl); }
.sm-top .pb-row { gap: 3.5rem; }
.sm-news.pb-section, .sm-tasks.pb-section, .sm-districts.pb-section { --pb-pad: 6.5rem; }
.sm-news .pb-row + .pb-row, .sm-tasks .pb-row + .pb-row { margin-top: var(--sp-xl); }
.sm-news-list .pb-listing-list { gap: 2.75rem 2rem; }
.sm-tasks .pb-row { gap: 1.5rem; }
.sm-page-head.pb-section { --pb-pad: 3.5rem; }
.sm-page.pb-section { --pb-pad: 5rem; }
.sm-page .pb-row { gap: 4rem; }
.sm-page .pb-text:where(:not(.sm-alarm, .sm-side-contact)) > * + * { margin-top: 1em; }

/* Warunki w mieście: pogoda (IMGW) i jakość powietrza (GIOŚ) — osobny rząd dwóch równych kart pod pierwszym blokiem */
.sm-conditions.pb-section { --pb-pad: var(--sp-xl); padding-top: 0; }
.sm-conditions .pb-row { --pb-items: stretch; gap: 2rem; }
.sm-conditions .pb-col-inner { height: 100%; }
/* Układ widgetu: etykieta → ikona + wartość → wiersze „nazwa – wartość” → źródło (dociśnięte do dołu,
   żeby obie karty kończyły się równo). */
.sm-widget {
    height: 100%; display: flex; flex-direction: column;
    background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.4rem 1.6rem;
}
.sm-widget > *, .sm-widget p { margin: 0; }
.sm-widget-label { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); }
.sm-widget .sm-widget-main { display: flex; align-items: center; gap: 1rem; margin-top: 0.8rem; }
.sm-widget-icon { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; padding: 0.7rem; border-radius: 50%; background: var(--c-surface); color: var(--c-primary); }
.sm-widget-value { font-family: var(--font-head); font-size: 2.6rem; font-weight: 600; line-height: 1.1; color: var(--c-primary); }
.sm-widget-value span { margin-left: 0.1rem; font-size: 1.4rem; }
.sm-widget .sm-widget-value--na, .sm-widget .sm-widget-value--link { font-size: 1.3rem; line-height: 1.3; }
.sm-widget-value--link a { color: var(--c-primary); }
.sm-widget .sm-widget-value--text { font-size: 2rem; }
.sm-widget-src a { color: inherit; }
/* Jakość powietrza: po jednym odczycie na stację (nazwa stacji nad kategorią). */
.sm-widget .sm-widget-readings { flex: 1 1 auto; list-style: none; margin: 0; padding: 0; }
.sm-widget-readings li { display: flex; flex-direction: column; }
.sm-widget-readings li + li { margin-top: 0.55rem; }
.sm-widget-readings span { font-size: 0.85rem; color: var(--c-muted); }
.sm-widget-readings strong { font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; line-height: 1.15; color: var(--c-primary); }
.sm-widget .sm-widget-meta { list-style: none; margin-top: 1rem; padding: 0; font-size: 0.98rem; }
.sm-widget-meta li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-top: 1px solid var(--c-border); }
.sm-widget-meta li span:first-child { flex: 0 0 auto; color: var(--c-muted); }
.sm-widget-meta li span:last-child { text-align: right; }
.sm-widget .sm-widget-src { margin-top: auto; padding-top: 0.8rem; border-top: 1px solid var(--c-border); font-size: 0.85rem; color: var(--c-muted); }

/* Podstrony */
.sm-side-contact { margin-top: var(--sp-md); background: var(--c-white); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.2rem 1.35rem; }
.sm-side-contact h3 { margin: 0; font-family: var(--font-head); font-size: 1.15rem; color: var(--c-primary); }
.sm-side-contact p { font-size: 0.98rem; }
.sm-account { font-family: var(--font-head); font-size: 1.4rem; font-weight: 600; letter-spacing: 0.03em; color: var(--c-primary); font-variant-numeric: tabular-nums; }
.pb-text .sm-dated { list-style: none; padding: 0; }
.sm-dated li { padding: 0.8rem 0; border-bottom: 1px solid var(--c-border); }
.sm-dated span { display: block; font-size: 0.85rem; color: var(--c-muted); }
.sm-page .sm-table { margin: 1.25rem 0; }
.sm-page .sm-table tbody th { font-family: var(--font-base); font-size: 1rem; font-weight: 700; width: auto; color: var(--c-text); }

/* Telefon: siatka ma 12 kolumn = 11 odstępów poziomych; duże odstępy nie mieszczą się w ekranie.
   Zmniejszamy tylko odstęp poziomy — pionowy (między ułożonymi kolumnami) zostaje. Blok MUSI być na końcu pliku. */
@media (max-width: 768px) {
    .sm-top .pb-row, .sm-conditions .pb-row, .sm-tasks .pb-row, .sm-page .pb-row { column-gap: var(--sp-md); }
    /* Hero na telefonie: sama treść, bez dużej liczby. */
    .sm-slide { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 1.75rem; }
    .sm-slide-figure { display: none; }
    /* Rozwijane menu (burger) też bez zaokrągleń — spójnie z podmenu. */
    .sm-nav > ul { border-radius: 0; }
}