/* ============================================================
   GardaTech — system stylów
   Charakter: minimalistyczny, inżynierski, nowoczesny.
   Zasady: hairline (1px) zamiast cieni, dużo światła, jeden akcent
   kolorystyczny, monospace dla etykiet technicznych.
   ============================================================ */

:root{
  /* Kolory */
  --ink:#0e1116;          /* tekst główny / ciemne tła */
  --ink-2:#171c23;
  --graphite:#39414c;     /* tekst treści */
  --slate:#6b7480;        /* tekst pomocniczy */
  --line:#e3e6ea;         /* hairline */
  --line-2:#c8cdd4;
  --surface:#ffffff;
  --surface-2:#f6f7f9;
  --accent:#e2233c;       /* akcent marki */
  --accent-2:#b5162c;

  /* Typografia */
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Inter,Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"Cascadia Mono","Segoe UI Mono",Menlo,Consolas,monospace;

  /* Wymiary */
  --maxw:1180px;
  --gutter:32px;
  --radius:3px;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  font-family:var(--font);
  font-size:16.5px;
  line-height:1.65;
  color:var(--graphite);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;height:auto;}
/* <picture> jest opakowaniem <img> (warianty AVIF/WebP) — musi zachowywać się
   jak blok, żeby nie psuć siatek, w których obrazek jest elementem układu. */
picture{display:block;}
a{color:inherit;text-decoration:none;}
hr{border:0;border-top:1px solid var(--line);margin:40px 0;}

h1,h2,h3,h4{
  color:var(--ink);
  font-weight:650;
  letter-spacing:-0.015em;
  line-height:1.2;
  text-wrap:balance;
}

::selection{background:var(--ink);color:#fff;}

a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------- Narzędzia ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--ink);color:#fff;padding:12px 18px;font-size:14px;
}
.skip-link:focus{left:0;}

/* Etykieta „inżynierska”: mono, wersaliki, rozstrzelona */
.label,
.news-cat,
.aside-title,
.footer-title,
.post-nav-label,
.breadcrumbs,
.page-info,
.hero-sub{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* ============================================================
   NAGŁÓWEK
   ============================================================ */

.site-header{background:var(--ink);color:#fff;}

.navbar{
  position:sticky;top:0;z-index:50;
  background:rgba(14,17,22,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.navbar-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  height:76px;
  display:flex;
  align-items:center;
  gap:32px;
}

.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.brand img{width:34px;height:auto;}
.brand-name{
  font-size:19px;font-weight:700;letter-spacing:.02em;color:#fff;
}
.brand-name::after{
  content:"";display:inline-block;width:5px;height:5px;margin-left:7px;
  background:var(--accent);vertical-align:middle;
}

.mainnav{flex:1;min-width:0;}
.mainnav ul{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:26px;
  overflow-x:auto;
  scrollbar-width:none;
}
.mainnav ul::-webkit-scrollbar{display:none;}
.mainnav li{flex-shrink:0;}
.mainnav a{
  display:block;
  font-size:14px;
  color:rgba(255,255,255,.74);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
  white-space:nowrap;
}
.mainnav a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.35);}
.mainnav .active a{color:#fff;border-bottom-color:var(--accent);}

.navbar-phone{
  flex-shrink:0;
  padding-left:26px;
  border-left:1px solid rgba(255,255,255,.14);
  line-height:1.25;
}
.navbar-phone-label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.45);
}
.navbar-phone-value{font-size:15px;font-weight:600;color:#fff;}
.navbar-phone:hover .navbar-phone-value{color:var(--accent);}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--ink);}
.home-hero{min-height:clamp(420px,62vh,600px);display:flex;}
.page-hero{min-height:260px;display:flex;}

.hero-media{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:grayscale(35%) contrast(105%);
  opacity:.5;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(14,17,22,.93) 0%,rgba(14,17,22,.72) 45%,rgba(14,17,22,.42) 100%);
}
/* Delikatna siatka techniczna */
.hero-grid{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to right,transparent,#000 45%,#000);
}
.hero-inner{
  position:relative;z-index:3;
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:64px var(--gutter);
  align-self:flex-end;
}
.hero-inner::before{
  content:"";display:block;width:48px;height:3px;background:var(--accent);margin-bottom:22px;
}
.hero-inner h1{
  color:#fff;
  font-size:clamp(30px,4.4vw,54px);
  font-weight:680;
  letter-spacing:-0.02em;
  margin:0;
  max-width:22ch;
}
.page-hero .hero-inner{padding:44px var(--gutter);}
.page-hero .hero-inner h1{font-size:clamp(26px,3.2vw,38px);max-width:30ch;}
.hero-sub{
  margin:18px 0 0;
  color:rgba(255,255,255,.72);
  font-size:13px;
  letter-spacing:.08em;
  max-width:60ch;
}

/* ============================================================
   TREŚĆ
   ============================================================ */

main{
  max-width:var(--maxw);
  margin:0 auto;
  padding:72px var(--gutter) 88px;
}

main > h2,
.article-body h2{
  font-size:clamp(22px,2.4vw,30px);
  margin:64px 0 18px;
  padding-top:22px;
  border-top:1px solid var(--line);
  position:relative;
}
main > h2::before,
.article-body h2::before{
  content:"";position:absolute;top:-1px;left:0;width:56px;height:3px;background:var(--accent);
}
main > h2:first-child{margin-top:0;}

main > h3,
.article-body h3{font-size:19px;margin:34px 0 10px;}

main > p,
main > ul,
main > ol{max-width:72ch;}
main > p{margin:0 0 16px;}
main > ul,main > ol{padding-left:22px;}
main > ul li,main > ol li{margin-bottom:7px;}

/* Podkreślenia tylko w tekście ciągłym — nie w komponentach nawigacyjnych. */
main > p a,
main > ul a,
main > ol a,
.article-body p a,
.article-body li a{
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--line-2);
  text-underline-offset:3px;
}
main > p a:hover,
main > ul a:hover,
main > ol a:hover,
.article-body p a:hover,
.article-body li a:hover{color:var(--accent);text-decoration-color:var(--accent);}
main > p a.btn,
.article-body p a.btn{text-decoration:none;color:#fff;}

/* ---------- Przyciski ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:#fff;
  padding:14px 26px;
  border-radius:var(--radius);
  font-size:14px;font-weight:600;letter-spacing:.01em;
  margin-top:18px;
  border:1px solid var(--ink);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.btn::after{content:"→";font-family:var(--mono);font-size:13px;}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ---------- Chipsy / linki powiązane ---------- */
.related{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.related a{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:9px 16px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.05em;
  color:var(--ink);
  transition:border-color .15s ease,color .15s ease;
}
.related a:hover{border-color:var(--accent);color:var(--accent);}

/* ---------- Galeria ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
  margin:30px 0;
  align-items:start;
}
/* Bez wymuszonych proporcji: zdjęcia mają różne kadry (panorama, portret)
   i kafelek 4:3 obcinałby z nich najważniejszą część. Atrybuty width/height
   w treści rezerwują miejsce, więc layout i tak nie skacze przy wczytywaniu. */
.gallery img{
  border-radius:var(--radius);
  border:1px solid var(--line);
  width:100%;
}

/* ---------- FAQ ---------- */
.faq{margin-top:22px;max-width:76ch;border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:18px 40px 18px 0;
  position:relative;
  font-weight:620;
  color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:18px;color:var(--accent);
}
.faq details[open] summary::after{content:"–";}
.faq p{margin:0 0 20px;max-width:72ch;}

/* ============================================================
   AKTUALNOŚCI
   ============================================================ */

.breadcrumbs{color:var(--slate);margin-bottom:28px;}
.breadcrumbs a{color:var(--slate);}
.breadcrumbs a:hover{color:var(--accent);}

.news-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:64px;
  align-items:start;
}
.news-main{min-width:0;}

.news-cat{
  display:inline-block;
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:5px 11px;
  font-size:11px;
}
.news-cat:hover{border-color:var(--accent);}

.news-card{
  border-top:1px solid var(--line);
  padding:32px 0;
}
.news-card:first-of-type{border-top:0;padding-top:0;}
.news-card.has-thumb{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;}
.news-thumb img{
  border:1px solid var(--line);
  border-radius:var(--radius);
  aspect-ratio:16/10;
  object-fit:cover;
  width:100%;
  filter:grayscale(15%);
  transition:filter .2s ease;
}
.news-card:hover .news-thumb img{filter:none;}

.news-card-title{font-size:clamp(20px,2vw,26px);margin:14px 0 8px;letter-spacing:-0.02em;}
.news-card-title a:hover{color:var(--accent);}
.news-meta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--slate);margin:0 0 12px;display:flex;flex-wrap:wrap;gap:8px;
}
.news-excerpt{margin:0 0 16px;max-width:68ch;}
.news-more{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:2px;
}
.news-more:hover{color:var(--accent);border-bottom-color:var(--accent);}
.news-empty{
  border:1px solid var(--line);border-left:3px solid var(--accent);
  padding:18px 22px;background:var(--surface-2);
}

.pagination{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:44px;padding-top:24px;border-top:1px solid var(--line);flex-wrap:wrap;
}
.page-btn{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:11px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);
}
.page-btn:hover{border-color:var(--accent);color:var(--accent);}
.page-btn.is-disabled{color:#b9bfc7;border-color:var(--line);}
.page-info{color:var(--slate);}

/* ---------- Wpis ---------- */
.news-article .article-head{
  border-bottom:1px solid var(--line);
  padding-bottom:20px;margin-bottom:34px;
}
.news-article .article-head .news-meta{margin:14px 0 0;}
.article-body{max-width:74ch;}
.article-body > *:first-child{margin-top:0;}
.article-body p{margin:0 0 18px;}
.article-body ul,.article-body ol{padding-left:22px;}
.article-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;}
.article-body a:hover{color:var(--accent);}
.article-body img{border:1px solid var(--line);border-radius:var(--radius);margin:26px 0;}
.article-body blockquote{
  margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);
  color:var(--ink);font-size:17px;
}

.post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:28px;
  border-top:1px solid var(--line);margin-top:52px;padding-top:26px;
}
.post-nav-right{text-align:right;}
.post-nav-label{display:block;color:var(--slate);margin-bottom:6px;font-size:11px;}
.post-nav-item a{font-weight:620;color:var(--ink);}
.post-nav-item a:hover{color:var(--accent);}
.back-link{margin-top:32px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;}
.back-link a:hover{color:var(--accent);}

/* ---------- Panel boczny ---------- */
.news-aside{display:flex;flex-direction:column;gap:22px;position:sticky;top:106px;}
.aside-box{border:1px solid var(--line);border-radius:var(--radius);padding:22px;}
.aside-box.aside-cta{background:var(--surface-2);}
.aside-title{margin:0 0 16px;color:var(--ink);font-size:11.5px;}
.aside-list{list-style:none;margin:0;padding:0;}
.aside-list li{padding:12px 0;border-top:1px solid var(--line);}
.aside-list li:first-child{border-top:0;padding-top:0;}
.aside-list a{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4;display:block;}
.aside-list a:hover{color:var(--accent);}
.aside-list time{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--slate);margin-top:5px;
}
.aside-list li.is-current a{color:var(--accent);}
.aside-empty{font-size:14px;color:var(--slate);margin:0;}
.aside-cta p{font-size:14.5px;margin:0 0 12px;}
.aside-contact a{font-weight:620;color:var(--ink);}
.aside-contact a:hover{color:var(--accent);}
.aside-cta .btn{margin-top:6px;padding:11px 20px;font-size:13px;}

/* ============================================================
   STOPKA
   ============================================================ */

.site-footer{background:var(--ink);color:rgba(255,255,255,.66);font-size:14px;}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;padding:64px var(--gutter) 48px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;
}
.footer-col-brand{max-width:34ch;}
.footer-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px;}
.footer-brand img{width:30px;height:auto;}
.footer-brand span{color:#fff;font-size:17px;font-weight:700;}
.footer-desc{margin:0;color:rgba(255,255,255,.55);font-size:14px;}
.footer-title{
  color:#fff;margin:0 0 16px;font-size:11px;
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.12);
}
.footer-list{list-style:none;margin:0;padding:0;}
.footer-list li{margin-bottom:9px;line-height:1.5;}
.footer-list a:hover{color:#fff;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  max-width:var(--maxw);margin:0 auto;padding:22px var(--gutter) 34px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.45);
}
.footer-meta{display:flex;gap:22px;flex-wrap:wrap;}
.footer-meta a:hover{color:#fff;}

/* ============================================================
   RESPONSYWNOŚĆ
   ============================================================ */

@media (max-width:1024px){
  :root{--gutter:24px;}
  .news-layout{grid-template-columns:1fr;gap:52px;}
  .news-aside{position:static;}
  .footer-inner{grid-template-columns:1fr 1fr;gap:34px;}
}

@media (max-width:760px){
  body{font-size:16px;}
  .navbar-inner{height:auto;padding:14px var(--gutter);flex-wrap:wrap;gap:12px;}
  .mainnav{order:3;flex-basis:100%;}
  .mainnav ul{gap:20px;padding-bottom:4px;}
  .navbar-phone{margin-left:auto;padding-left:18px;}
  .navbar{position:static;}
  .home-hero{min-height:auto;}
  .hero-inner,.page-hero .hero-inner{padding:44px var(--gutter);}
  main{padding:48px var(--gutter) 64px;}
  main > h2,.article-body h2{margin-top:44px;}
  .news-card.has-thumb{grid-template-columns:1fr;gap:18px;}
  .post-nav{grid-template-columns:1fr;gap:22px;}
  .post-nav-right{text-align:left;}
  .footer-inner{grid-template-columns:1fr;gap:30px;padding-top:48px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important;}
}

@media print{
  .navbar,.hero-media,.hero-grid,.news-aside,.pagination,.post-nav,.site-footer{display:none;}
  .hero{background:#fff;}
  .hero-inner h1{color:#000;}
  body{color:#000;font-size:12pt;}
}

/* ============================================================
   PANEL ADMINA
   ============================================================ */

.admin-body{background:var(--surface-2);margin:0;color:var(--ink);font-family:var(--font);}
.admin-wrap{max-width:1000px;margin:0 auto;padding:32px 24px 64px;}
.admin-bar{
  background:var(--ink);color:#fff;padding:16px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.admin-bar strong{font-size:15px;letter-spacing:.01em;}
.admin-bar a{color:rgba(255,255,255,.75);margin-left:18px;font-size:14px;}
.admin-bar a:hover{color:#fff;}
.admin-bar .admin-bar-right{display:flex;align-items:center;}
.admin-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;margin-bottom:20px;
}
.admin-card h2{
  margin:0 0 20px;font-size:16px;
  font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.admin-table{width:100%;border-collapse:collapse;}
.admin-table th{
  text-align:left;padding:10px;border-bottom:1px solid var(--line-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);
}
.admin-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line);font-size:14px;}
.admin-table tr:last-child td{border-bottom:0;}
.admin-table a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:2px;}
.admin-table a:hover{color:var(--accent);}
.admin-actions a{margin-right:12px;font-size:13px;}
.form-group{margin-bottom:20px;}
.form-group label{
  display:block;margin-bottom:7px;font-size:13px;font-weight:620;color:var(--ink);
}
.form-group input[type=text],.form-group input[type=date],.form-group input[type=password]{
  width:100%;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--radius);
  font-size:14px;font-family:var(--font);color:var(--ink);background:#fff;
}
.form-group textarea{
  width:100%;padding:12px;border:1px solid var(--line-2);border-radius:var(--radius);
  font-size:13px;font-family:var(--mono);line-height:1.6;min-height:280px;color:var(--ink);
}
.form-group input:focus,.form-group textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(14,17,22,.08);
}
.form-actions{margin-top:24px;padding-top:20px;border-top:1px solid var(--line);}
.btn-primary{
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  padding:12px 24px;border-radius:var(--radius);font-size:14px;font-weight:600;
  cursor:pointer;font-family:var(--font);
}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);}
.login-box{max-width:380px;margin:96px auto;}
.flash{
  background:#fdecee;border:1px solid #f1c2c9;border-left:3px solid var(--accent);
  color:#8f1224;padding:13px 16px;border-radius:var(--radius);margin-bottom:18px;font-size:14px;
}
.flash.success{background:#eaf6ef;border-color:#bfe0cb;border-left-color:#1f7a45;color:#1a6b3c;}
.hint{color:var(--slate);font-size:12.5px;margin-top:6px;line-height:1.5;}
.inline-form{display:inline;}
.link-danger{
  background:none;border:none;color:var(--accent);cursor:pointer;font-size:13px;padding:0;
  font-family:inherit;text-decoration:underline;text-underline-offset:2px;
}
.btn-logout{
  background:none;border:none;color:var(--accent);cursor:pointer;font-size:14px;
  margin-left:18px;font-family:inherit;
}
.btn-logout:hover{text-decoration:underline;}
.btn-add{float:right;padding:9px 16px;text-decoration:none;font-size:13px;}