/*
 Theme Name: Policyjna Kasa Theme 2.0 (Structure-First) — Tiles Header
 Theme URI: https://mundurowakasa.pl
 Author: MundurowaKasa.pl
 Description: Motyw trzyma tylko wygląd (czcionki, kolory, layout). Strona główna: Aktualność + kafelki. Header posiada nawigację w formie kafelków.
 Version: 2.0.1
 License: GPL-2.0+
 Text Domain: policyjna-kasa
*/
:root{--ink:#0f172a;--muted:#6b7280;--border:#e5e7eb;--blue:#1e40af;--bg:#f8fafc;--white:#fff;}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans','Liberation Sans','Open Sans',sans-serif;color:var(--ink);background:#fff;line-height:1.55}
a{color:var(--blue);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--border);z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;gap:10px;align-items:center;font-weight:800}
.logo-badge{width:34px;height:34px;border-radius:10px;background:var(--blue);color:#fff;display:grid;place-items:center}
/* usuwamy stary styl .nav a */
.nav a{}
.section{padding:28px 0}
.hero{padding:40px 0}
.hero-grid{display:grid;gap:24px;grid-template-columns:1fr}
@media(min-width:900px){.hero-grid{grid-template-columns:1.2fr .8fr}}
.hero-card{border:1px solid var(--border);border-radius:16px;background:#fff;padding:16px}
.card{border:1px solid var(--border);border-radius:16px;background:#fff;padding:18px}
.cards{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
.btn{display:inline-block;background:var(--blue);color:#fff;padding:10px 14px;border-radius:10px;font-weight:700}
.btn-outline{border:1px solid var(--border);padding:10px 14px;border-radius:10px}
.hint{font-size:.95rem;color:var(--muted)}
.footer{border-top:1px solid var(--border);background:#fff;padding:28px 0;margin-top:32px}
.footer-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.footer-grid{grid-template-columns:1fr 1fr 1fr}}

/* ===== KAFELKI MENU (HEADER) ===== */
.header .nav {
    display:flex;
    justify-content:flex-end;
    align-items:center;
}
.nav-tiles {
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:flex-end;
}
.nav-tiles .tile {
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:#fff;
    color:var(--ink);
    text-decoration:none;
    font-weight:600;
    transition:all .15s ease;
}
.nav-tiles .tile .ico {
    width:18px;
    height:18px;
    opacity:.75;
}
.nav-tiles .tile:hover {
    border-color:#1e40af;
    color:#1e40af;
    box-shadow:0 3px 8px rgba(2,6,23,.08);
    transform:translateY(-1px);
}
@media (max-width:880px) {
    .header .nav {
        justify-content:flex-start;
    }
    .nav-tiles {
        gap:8px;
        justify-content:flex-start;
    }
    .nav-tiles .tile {
        padding:8px 10px;
        font-weight:600;
    }
}

/* aktualnosc + kafelki sekcja na stronie */
#aktualnosc .hero-card img{border-radius:12px;margin-bottom:10px;display:block;width:100%;height:auto}
#aktualnosc .cards .card{text-align:center}
#aktualnosc .card h3{margin:10px 0 6px}
/* ===== NAV: jeden ciągły prostokąt (segmenty bez przerw) ===== */
.header .nav {
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.nav-tiles{
  display:flex;
  gap:0;                          /* brak odstępów między kafelkami */
  border:1px solid var(--border);  /* jeden wspólny obrys */
  border-radius:12px;              /* zaokrąglenie całej belki */
  overflow:hidden;                 /* maskuje rogi i hover tła */
  background:#fff;                 /* wspólne tło */
  /* mobile: zachowaj jedną belkę przewijaną horyzontalnie */
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}

.nav-tiles .tile{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px;
  text-decoration:none;
  color:var(--ink);
  font-weight:600;
  white-space:nowrap;
  background:transparent;          /* kafelek przejmuje tło kontenera */
  border-right:1px solid var(--border); /* cienki podział segmentów */
  border-radius:0;                 /* rogi kontroluje kontener */
  transition:background .15s ease, color .15s ease;
}

.nav-tiles .tile:last-child{
  border-right:0;                  /* bez podziału na końcu */
}

.nav-tiles .tile .ico{
  width:18px; height:18px; opacity:.75;
}

.nav-tiles .tile:hover{
  background:rgba(30,64,175,.06);  /* delikatny hover w segmencie */
  color:#1e40af;
}

.nav-tiles .tile:focus-visible{
  outline:2px solid #1e40af;
  outline-offset:-2px;             /* ładny focus w obrębie belki */
}

/* Drobna korekta na wąskich ekranach */
@media (max-width:880px){
  .header .nav{justify-content:flex-start}
  .nav-tiles .tile{padding:9px 14px}
}
/* ===== Layout strony głównej: 2 kolumny ===== */
.home-grid{
  display:grid;
  grid-template-columns: 1fr 20%; /* lewa treść + prawa kolumna */
  gap:24px;
}
.home-main{}
.home-side{}

/* Panel pionowy po prawej */
.side-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.side-item{
  display:block;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  text-decoration:none;
  color:var(--ink);
  transition:all .15s ease;
}
.side-item:hover{
  border-color:#1e40af;
  box-shadow:0 3px 8px rgba(2,6,23,.08);
  transform: translateY(-1px);
}
.side-title{display:block;font-weight:700}
.side-desc{display:block;color:var(--muted);font-size:.95rem;margin-top:2px}

/* Responsywność: kolumna prawa spada pod spód */
@media (max-width: 980px){
  .home-grid{grid-template-columns:1fr}
}
/* LOGO W NAGŁÓWKU */
.logo .site-title {
  font-size: 1.6rem;        /* większa czcionka */
  font-weight: 800;         /* pogrubienie */
  color: #1e3a8a;           /* granat (możesz zmienić) */
  text-decoration: none;
  letter-spacing: -0.02em;  /* ściślej */
}
.logo .site-title:hover {
  color: #0f2560;
}
/* Layout z panelem po prawej */
.home-grid {
    display: grid;
    grid-template-columns: 1fr 22%;
    gap: 24px;
}

.home-side {}

.side-nav {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.side-item {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: var(--ink);
    transition: all .15s ease;
}

.side-item:hover {
    border-color: #1e40af;
    box-shadow: 0 3px 8px rgba(2, 6, 23, .08);
    transform: translateY(-1px)
}

.side-title {
    display: block;
    font-weight: 700
}

.side-desc {
    display: block;
    color: var(--muted);
    font-size: .95rem;
    margin-top: 2px
}

@media (max-width: 980px) {
    .home-grid {
        grid-template-columns: 1fr
    }
}
/* ===== Aktualne!!! - obraz pełny, bez cropa ===== */
.aktualne-thumb {
    margin: 0 0 12px;
}

.aktualne-img {
    display: block;
    width: 100%;
    height: auto;
    /* zachowaj proporcję */
    border-radius: 12px;
    /* zaokrąglone rogi */
    object-fit: contain;
    /* nigdy nie przycinaj obrazka */
}