/* moja-rumia.pl — redesign portalu newsowego (paleta z herbu Rumi: czerwień+złoto+biel). */
:root {
  --fg: #1a1d21;
  --muted: #5c6770;
  --accent: #c5202e;       /* Czerwień Rumi */
  --accent-dark: #9a1722;  /* hover/aktywne */
  --gold: #d9a325;         /* Złoto kaszubskie */
  --sea: #1f6f8b;          /* Błękit Bałtyku */
  --bg: #ffffff;
  --card: #f6f5f3;
  --border: #e4e1dc;
  --shadow: 0 1px 3px rgba(20,22,26,.06), 0 6px 20px rgba(20,22,26,.06);
  --shadow-h: 0 4px 12px rgba(20,22,26,.10), 0 12px 32px rgba(20,22,26,.12);
  --radius: 12px;
  --maxw: 1180px;
  --head: 'Sora', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* mapa kolorów kategorii (badge / akcent kafelka / placeholder gradient) */
.cat-aktualnosci   { --cat: #c5202e; --cat2: #e0414e; }  /* czerwony  */
.cat-samorzad      { --cat: #1f3a93; --cat2: #3756c0; }  /* granat    */
.cat-wydarzenia    { --cat: #6c3fb5; --cat2: #8a5fd6; }  /* fiolet    */
.cat-kultura       { --cat: #d9762a; --cat2: #ef9a4f; }  /* pomarańcz */
.cat-sport         { --cat: #1f9d55; --cat2: #36bf72; }  /* zielony   */
.cat-inwestycje    { --cat: #1f6f8b; --cat2: #2e93b3; }  /* morski    */
.cat-bezpieczenstwo{ --cat: #7a1018; --cat2: #a3262f; }  /* czerwień ciemna */
.cat-ogloszenia    { --cat: #6b7280; --cat2: #8b929b; }  /* szary     */

* { box-sizing: border-box; }

body {
  font-family: var(--body);
  font-size: 16px;
  color: var(--fg);
  background: var(--bg);
  margin: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4, .brand-name, .section-head, .sidebar-head, .hero-title, .card-title {
  font-family: var(--head); letter-spacing: -.015em;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .7rem 1.25rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; color: var(--fg); }
.brand-logo { height: 54px; width: auto; display: block; }

.site-nav { display: flex; flex-wrap: wrap; gap: .25rem; margin-left: auto; }
.site-nav a {
  color: var(--fg); font-weight: 600; font-size: .92rem;
  padding: .45rem .7rem; border-radius: 7px; white-space: nowrap;
  transition: background .15s, color .15s;
}
.site-nav a:hover { background: var(--card); color: var(--accent); }

/* hamburger (mobile) */
.nav-toggle { display: none; }
.nav-burger { display: none; cursor: pointer; padding: .4rem; margin-left: auto; }
.nav-burger span { display: block; width: 24px; height: 2px; background: var(--fg); margin: 5px 0; border-radius: 2px; }

/* ---------- content ---------- */
.content { max-width: var(--maxw); margin: 0 auto; padding: 1.75rem 1.25rem 2.5rem; }

h1 { font-weight: 800; font-size: 2rem; margin: .2rem 0 1rem; line-height: 1.15; }
.section-head {
  font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--accent); margin: 0 0 1rem; padding-bottom: .5rem;
  border-bottom: 3px solid var(--accent);
  display: inline-block;
}

/* ---------- badge ---------- */
.badge, .card-badge {
  display: inline-block; font-family: var(--head);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--cat, var(--accent));
  padding: .28rem .6rem; border-radius: 5px;
}

/* ---------- HERO ---------- */
.hero {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius);
  min-height: 420px; margin-bottom: 2rem;
  background-size: cover; background-position: center;
  background-color: var(--cat, var(--accent));
  box-shadow: var(--shadow); color: #fff;
}
.hero-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--cat) 0%, var(--cat2) 100%);
  display: flex; align-items: center; justify-content: center;
}
.hero-placeholder .ph-sygnet { width: 110px; height: 110px; opacity: .85; filter: drop-shadow(0 4px 12px rgba(0,0,0,.25)); }
.hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 2rem;
  background: linear-gradient(to top, rgba(10,12,15,.88) 0%, rgba(10,12,15,.45) 45%, rgba(10,12,15,0) 80%);
}
.hero-title { color: #fff; font-size: 2.6rem; font-weight: 800; line-height: 1.1; margin: .7rem 0 .6rem; max-width: 900px; text-shadow: 0 2px 16px rgba(0,0,0,.4); }
.hero-meta { color: rgba(255,255,255,.88); font-size: .95rem; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; }
.hero:hover .hero-title { color: #fff; }

/* ---------- layout: main + sidebar ---------- */
.layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr) 320px; }
}
.main-col { min-width: 0; }

/* ---------- grid kafelków ---------- */
/* Gęsty grid: 4 kol ≥1200px, 3 kol ≥900px, 2 kol ≥600px, 1 kol mobile.
   auto-fill z mniejszym minmax daje 3-4 kolumny na desktopie. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.4rem;
}
/* auto-fill liczy realną szerokość main-col (obok sidebara) → 3-4 kolumny
   na desktopie, 2 na tablecie, 1 na mobile — bez sztywnych breakpointów. */
.main-col .card-grid { grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); }
.card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .18s, box-shadow .18s; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); }
.card-media {
  position: relative; display: block; aspect-ratio: 16/10;
  background-size: cover; background-position: center;
  background-color: var(--cat, var(--accent));
}
.card-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--cat) 0%, var(--cat2) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
}
.card-placeholder .ph-sygnet { width: 56px; height: 56px; opacity: .9; }
.card-placeholder .ph-cat { color: rgba(255,255,255,.92); font-family: var(--head); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; }
.card-badge { position: absolute; left: .7rem; top: .7rem; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.card-body { padding: 1.1rem 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.card-title { font-size: 1.18rem; font-weight: 600; line-height: 1.28; margin: 0; }
.card-title a { color: var(--fg); }
.card-title a:hover { color: var(--accent); }
.card-lead { color: var(--muted); font-size: .95rem; line-height: 1.5; margin: 0; }
.card-meta { font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .4rem .7rem; align-items: center; margin: .15rem 0 0; }
.card-meta .card-district + time::before { content: "·"; margin-right: .7rem; color: var(--muted); }
.card-district { font-weight: 600; color: var(--accent); }
.card-cta { font-family: var(--head); font-weight: 600; font-size: .85rem; color: var(--accent); margin-top: auto; padding-top: .2rem; }
.card-cta span { transition: transform .15s; display: inline-block; }
.card:hover .card-cta span { transform: translateX(3px); }

.ph-sygnet { display: block; }

/* ---------- sidebar ---------- */
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 1000px) { .sidebar { position: sticky; top: 5rem; } }
.sidebar-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem 1.25rem; }
.sidebar-head { font-family: var(--head); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg); margin: 0 0 .8rem; padding-bottom: .5rem; border-bottom: 3px solid var(--gold); display: inline-block; }
.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list li { border-bottom: 1px solid var(--border); }
.sidebar-list li:last-child { border-bottom: 0; }
.sidebar-list a { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem 0; color: var(--fg); }
.sidebar-list .sl-text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.sidebar-list .sl-title { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.sidebar-list .sl-date { font-size: .78rem; color: var(--muted); }
.sidebar-list a:hover .sl-title { color: var(--accent); }
.sidebar-list .dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: .35rem; background: var(--cat, var(--accent)); }

.sidebar-cats { list-style: none; margin: 0; padding: 0; }
.sidebar-cats li { border-bottom: 1px solid var(--border); }
.sidebar-cats li:last-child { border-bottom: 0; }
.sidebar-cats a { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; color: var(--fg); font-weight: 600; font-size: .95rem; }
.sidebar-cats .sc-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--cat, var(--accent)); }
.sidebar-cats .sc-name { flex: 1; }
.sidebar-cats .sc-count { font-size: .8rem; font-weight: 700; color: #fff; background: var(--cat, var(--accent)); border-radius: 999px; padding: .1rem .5rem; min-width: 1.6em; text-align: center; }
.sidebar-cats a:hover .sc-name { color: var(--accent); }

/* ---------- section banner (kategoria/dzielnica/temat) ---------- */
.section-banner { margin-bottom: 1.5rem; }
.section-kicker { display: inline-block; font-family: var(--head); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.section-banner h1 { margin: .2rem 0 0; }

/* ---------- article ---------- */
.article { max-width: 720px; margin: 0 auto; padding: .5rem 0 1rem; }
.article-head { margin-bottom: 1.4rem; }
.article-head h1 { margin: .7rem 0 .7rem; font-size: 2.3rem; line-height: 1.15; }
.article .meta { font-size: .9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.article .meta > * + *::before { content: "·"; margin-right: 1rem; color: var(--border); }
.article .district { font-weight: 600; color: var(--accent); }
.article-hero { margin: 0 0 1.8rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.article-hero img { display: block; width: 100%; height: auto; }
.article-hero.placeholder { aspect-ratio: 16/8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; background: linear-gradient(135deg, var(--cat) 0%, var(--cat2) 100%); }
.article-hero.placeholder .ph-sygnet { width: 84px; height: 84px; opacity: .9; }
.article-hero.placeholder .ph-cat { color: rgba(255,255,255,.92); font-family: var(--head); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.article-lead { font-size: 1.32rem; line-height: 1.55; color: var(--fg); font-weight: 500; border-left: 4px solid var(--accent); padding-left: 1.1rem; margin: 1.6rem 0; }
.article .body { font-size: 18px; line-height: 1.7; }
.article .body p { margin: 1.15rem 0; }
.article-body h2 { font-family: var(--head); font-size: 1.55rem; font-weight: 700; line-height: 1.25; margin: 2.2rem 0 .7rem; }
.article-body h3 { font-family: var(--head); font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin: 1.7rem 0 .55rem; }
.article-body ul, .article-body ol { margin: 1.1rem 0; padding-left: 1.4rem; }
.article-body li { margin: .4rem 0; }
.article-body blockquote { border-left: 4px solid var(--gold); margin: 1.4rem 0; padding: .3rem 0 .3rem 1.1rem; color: var(--muted); font-style: italic; }

.context-box {
  margin: 1.8rem auto; max-width: 760px;
  padding: 1rem 1.2rem; background: #fdf2f2;
  border-left: 4px solid var(--accent); border-radius: 6px; font-size: .96rem;
}
.attribution { max-width: 760px; margin: 1.5rem auto 0; font-size: .88rem; color: var(--muted); }

.related { max-width: var(--maxw); margin: 3rem auto 0; }
/* "Zobacz też" — większe kafelki, 3 kolumny na desktopie, pełne tytuły. */
.related-grid { grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .related-grid { grid-template-columns: repeat(3, 1fr); } }
.related-grid .card-title { font-size: 1.22rem; }
.related-grid .card-media { aspect-ratio: 16/9; }

.empty { color: var(--muted); padding: 1rem 0; }

/* ---------- footer (LIGHT two-tier: jasny pas + jeszcze jaśniejszy copyright) ---------- */
.site-footer {
  background: #faf8f5;                 /* ciepła biel — pod jasny portal */
  color: var(--text); margin-top: 3.5rem;
  border-top: 3px solid var(--accent); /* czerwona linia akcentu u góry */
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 3rem 1.25rem 2.5rem;
  display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.4fr; gap: 2.5rem;
}
.footer-col h4 {
  font-family: var(--head); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--fg);
  margin: 0 0 1.1rem; padding-bottom: .5rem; display: inline-block;

  border-bottom: 2px solid var(--accent);   /* czerwone podkreślenie nagłówka */
}
/* brand column */
.footer-logo { display: inline-block; margin: 0 0 1.1rem; }
.footer-logo img { height: 50px; width: auto; display: block; }
.footer-about { font-size: .92rem; color: var(--muted); margin: 0; max-width: 38ch; line-height: 1.6; }
/* link columns */
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-links a { color: var(--text); font-size: .93rem; transition: color .15s; }
.footer-links a:hover { color: var(--accent); }
/* partner column */
.footer-partner-lead { font-size: .92rem; color: var(--muted); margin: 0 0 .55rem; line-height: 1.55; }
.footer-partner { margin: 0; font-size: 1rem; }
.footer-partner a { color: var(--accent); font-weight: 600; }
.footer-partner a:hover { color: var(--accent-dark); }
.footer-partner-flat { color: var(--accent); font-weight: 600; }
/* tier 2: jeszcze jaśniejszy pasek copyright */
.footer-legal { background: #f1ede8; border-top: 1px solid var(--border); color: var(--muted); }
.footer-legal-inner {
  max-width: var(--maxw); margin: 0 auto; padding: .95rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .82rem;
}
.footer-legal-inner nav { display: flex; gap: 1.2rem; }
.footer-legal-inner a { color: var(--muted); }
.footer-legal-inner a:hover { color: var(--accent); }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .nav-burger { display: block; }
  .brand-logo { height: 44px; }
  .site-nav {
    flex-basis: 100%; flex-direction: column; gap: 0;
    max-height: 0; overflow: hidden; margin-left: 0;
    transition: max-height .25s ease;
  }
  .nav-toggle:checked ~ .site-nav { max-height: 600px; padding-top: .5rem; }
  .site-nav a { padding: .7rem .5rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .hero { min-height: 320px; }
  .hero-title { font-size: 1.7rem; }
  .hero-overlay { padding: 1.25rem; }
  h1 { font-size: 1.7rem; }
  .article-head h1 { font-size: 1.75rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-logo img { height: 42px; }
  .footer-legal-inner { justify-content: flex-start; }
}
@media (min-width: 721px) and (max-width: 920px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; }
  .footer-brand-col { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
  /* Mobile: pojedyncza kolumna we wszystkich gridach. */
  .card-grid,
  .main-col .card-grid,
  .related-grid { grid-template-columns: 1fr; }
}