/* ===============================
   style.css  (global dla całej witryny)
   =============================== */

/* Tokens (light/dark) */
:root{
  --bg:#ffffff;
  --ink:#111111;
  --muted:#6b7280;
  --brand:#1b6ef3;
  --brand-ink:#0a47a3;
  --card:#ffffff;
  --border:#e5e7eb;
  --radius:12px;
  --shadow:0 6px 24px rgba(17,24,39,.06);
  --maxw:1100px;        /* domyślna szerokość kontenera (strona główna) */
  --gap:18px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0d10;
    --ink:#e5e7eb;
    --muted:#9aa3af;
    --brand:#7aa7ff;
    --brand-ink:#a9c4ff;
    --card:#11151a;
    --border:#20262d;
    --shadow:none;
  }
}

/* Base */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Kontenery */
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.container--narrow{--maxw:840px}  /* użyj na stronach artykułu */
.container{

  padding-left: max(clamp(16px, 4vw, 24px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 4vw, 24px), env(safe-area-inset-right));
}
/* Header (wspólny) */
header{border-bottom:1px solid var(--border)}
.head{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:16px;padding:18px 0;
 margin-right: 20px;
  margin-left: 20px;
}
.logo{
  width:200px;height:72px;border-radius:14px;flex:0 0 72px;
background-image: url("logo.png");
  box-shadow:var(--shadow);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.right{display:grid;gap:8px;justify-items:end}
.sitename{font-weight:800;font-size:1.4rem;letter-spacing:.2px}
.search{
  display:flex;gap:8px;align-items:center;border:1px solid var(--border);
  border-radius:12px;padding:8px 10px;background:var(--card);
  width:min(460px,100%);
}
.search input{flex:1;border:0;background:transparent;outline:none;color:var(--ink)}
.btn{
  border:1px solid var(--border);background:var(--card);border-radius:10px;
  padding:8px 12px;cursor:pointer;color:var(--ink)
}

/* Grid kafli (strona główna) */
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(1,1fr);padding:22px 0 10px}
@media(min-width:680px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){
	.search{display:none;}
	
}



.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);transition:transform .15s ease;
}
.card:hover{transform:translateY(-2px)}
.media{width:100%;aspect-ratio:16/9;object-fit:cover;background:#dfe7f2}
.body{padding:16px}
.eyebrow{font-size:.78rem;text-transform:uppercase;color:var(--muted);letter-spacing:.3px}
.title{margin:6px 0 8px;font-size:1.2rem;line-height:1.35}
.excerpt{margin:0;color:var(--ink)}
.meta{margin-top:10px;color:var(--muted);font-size:.92rem}

/* Artykuł (szczegóły) */
header.article-header{border-bottom:1px solid var(--border)}
footer.article-footer{border-top:1px solid var(--border);border-bottom:0;margin-top:32px}

h1{line-height:1.25;margin-top:0}
.meta-line{color:var(--muted);margin:.4rem 0 1rem}

.breadcrumbs{font-size:.95rem;color:var(--muted);margin:10px 0 16px}
.breadcrumbs a{color:inherit;text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}

.toc{border:1px solid var(--border);border-radius:12px;padding:12px;margin:16px 0}
.toc ul{margin:0 0 0 1rem}
.note{padding:12px;border:1px dashed var(--border);border-radius:12px;background:rgba(125,125,125,.03)}

.hero-figure{margin:12px 0 20px}
.hero-figure figcaption{color:var(--muted);font-size:.95rem;margin-top:6px}

/* Stopka (global) */
footer{border-top:1px solid var(--border);margin-top:26px}
.foot{
  padding:20px 0;color:var(--muted);font-size:.95rem;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}

/* Focus dla klawiatury (dostępność) */
:focus{outline:2px solid transparent;outline-offset:2px}
body.show-focus :focus{outline:2px solid var(--brand);}

/* Utility */
.hidden{display:none !important}
.center{text-align:center}


.hero-figure{margin:12px 0 20px}
.hero-figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:16px;        /* ZAOKRĄGLONE ROGI */
  background:#dfe7f2;        /* kolor tła gdy obraz się ładuje */
  box-shadow:var(--shadow);  /* delikatny cień */
}


.hero-figure--narrow{
  max-width:720px;           /* MNIEJSZE NIŻ KONTENT */
  margin:12px auto 20px;     /* wycentrowane */
}


.ratio-16x9{aspect-ratio:16/9}


.head--center{
  grid-template-columns: 1fr;      /* zamiast "auto 1fr" */
  justify-items: center;
  text-align: center;
  padding: 22px 0;
}

.head--center .right{
  justify-items: center;           /* wcześniej end */
  display: grid;
  gap: 10px;
}

.head--center .sitename{
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.head--center .search{
  margin: 0 auto;
  width: min(680px, 100%);         /* trochę szerzej niż domyślne 460px */
}