/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --sidebar-grad-start:#6a00a3;
  --sidebar-grad-end:#213af4;
  --active-bg: rgba(255,255,255,.18); /* aktywne tło czytelne na gradiencie */
  --text:#475569;
  --muted:#64748b;
  --bg:#f9fafb;
  --card:#ffffff;
  --primary:#5B21B6;
  --max:1152px;
  --r1:8px; --r2:12px; --r3:16px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:80px;
}

body{
  font-family: -apple-system, BlinkMacSystemFont,'Segoe UI','Roboto','Oxygen','Ubuntu','Cantarell',sans-serif;
  font-size:16px; line-height:1.6; color:var(--text); background:var(--bg);
}

/* SIDEBAR */
.sidebar{
  position:fixed; left:0; top:0; height:100vh; width:256px;
  background:linear-gradient(to bottom,var(--sidebar-grad-start),var(--sidebar-grad-end));
  display:flex; flex-direction:column; z-index:100; padding: var(--s3) var(--s2);
}
.brand{ display:flex; align-items:center; justify-content:center; padding-bottom: var(--s3); }
.logo{ width: 140px; height:auto; border-radius:10px; background:#ffffff; padding:1rem; }

.sidebar-nav{ flex:1; }
.nav-list{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.nav-item{ display:block; padding:12px; border-radius:8px; color:#fff; text-decoration:none; }
.nav-item:hover{ background: rgba(255,255,255,.12); }
.nav-item.active{ background: var(--active-bg); font-weight:600; /* tekst zostaje biały */ }

.contact-info{ color:#fff; border-top:1px solid rgba(255,255,255,.2); padding-top: var(--s3); }
.contact-info h3{ font-size:1rem; margin-bottom: var(--s2); color:#fff; }
.contact-list{ list-style:none; display:flex; flex-direction:column; gap:6px; }
.contact-list a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }

/* MAIN */
.main-content{ margin-left:256px; }

/* HERO: obraz lewo, tekst prawo */
.hero{ min-height: 70vh; display:flex; align-items:center; background: linear-gradient(to bottom right,#f9fafb,#fff);}
.hero .hero-inner{ width:100%; max-width:var(--max); margin:0 auto; padding: var(--s6) var(--s4);
  display:grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items:center; border-bottom: 10px solid var(--primary); border-right: 10px solid var(--primary); 
border-radius: 10px;}
.hero .hero-image{ border-radius: var(--r3); overflow:hidden; box-shadow:0 10px 15px -3px rgba(0,0,0,.1); }
.hero .hero-image img{ width:100%; height:300px; object-fit:cover; display:block; }
.hero-text {border-left: 5px solid var(--sidebar-grad-end); border-radius: 10px;}
.hero .hero-text h1{ font-size: 2.5rem; font-weight:700; color: var(--primary); line-height:1.2; margin-bottom: var(--s3); }
.hero .hero-text p{ font-size:1.125rem; color: var(--text); }

/* PLASTER TYPES: 2x2, małe miniatury + tekst */
.plaster-types{ padding: var(--s7) 0; background: var(--bg); }
.plaster-types h2{ width:100%; max-width:var(--max); margin:0 auto var(--s4); padding:0 var(--s4);
  font-size:2rem; font-weight:700; color: var(--primary); }
.plaster-cards{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--s4);
  display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.plaster-card{ display:flex; gap: var(--s2); padding: var(--s3); background: var(--card); border:1px solid #e5e7eb; border-radius: var(--r2); border-left: 10px solid var(--sidebar-grad-end); }
.plaster-thumb{ width:80px; height:80px; border-radius: var(--r1); border:2px solid #e5e7eb; object-fit:cover; flex-shrink:0; }
.plaster-info h3{ font-size:1.125rem; color: var(--primary); margin-bottom:6px; }
.plaster-info p{ color: var(--text); }

/* STRENGTHS: 3 karty */
.strengths{ padding: var(--s7) 0; background:#fff; }
.strengths-container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--s4); }
.strengths h2{ font-size:2rem; font-weight:700; color: var(--primary); margin-bottom: var(--s4); }
.strengths-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s4); }
.strength-card{ background: var(--bg); border:1px solid #e5e7eb; border-radius: var(--r2); padding: var(--s3); border-right: 10px solid var(--sidebar-grad-end); }
.strength-card h3{ color: var(--primary); font-size:1.125rem; margin-bottom:8px; }
.strength-card p{ color: var(--text); }

/* GALLERY */
.gallery{ padding: var(--s7) 0; background: var(--bg); }
.gallery h2{ width:100%; max-width:var(--max); margin:0 auto var(--s4); padding:0 var(--s4);
  font-size:2rem; font-weight:700; color: var(--primary); }
.gallery-grid{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--s4);
  display:grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.gallery-grid img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; border-radius: var(--r2);
  border:1px solid #e5e7eb; transition: transform .2s, box-shadow .2s; background:#fff; }
.gallery-grid img:hover{ transform: scale(1.02); box-shadow:0 10px 15px -3px rgba(0,0,0,.1); }

/* ABOUT PAGE */
.about{ padding: var(--s7) 0; }
.about-inner{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--s4); display:grid; gap: var(--s4); }
.about-block{ background:#fff; border:1px solid #e5e7eb; border-radius: var(--r2); padding: var(--s4); }
.about h1{ font-size:2rem; color: var(--primary); margin-bottom: var(--s3); }
.about h2{ font-size:1.5rem; color: var(--primary); margin-bottom: var(--s2); }
.about-list{ margin-left:1rem; display:grid; gap:6px; }
.about-cta address ul{ list-style:none; display:grid; gap:6px; }

/* PLASTERS PAGE */
.about-plasters{ padding: var(--s7) 0; }
.about-plasters-container{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--s4); }
.about-plasters h2{ font-size:2rem; font-weight:700; color: var(--primary); margin-bottom: var(--s3); }
.about-plasters-content{ display:grid; gap: var(--s2); }
.tynk-types-list{ margin-left:1rem; display:grid; gap:6px; }

/* ACCESSIBILITY UTILS */
a:focus-visible, button:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }
.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; }

/* RESPONSIVE */
@media (max-width: 1023px){
  .sidebar{ left:-256px; transition:left .3s ease; }
  .sidebar:target{ left:0; box-shadow: 0 0 20px rgba(0,0,0,.3); }
  .main-content{ margin-left:0; }
  .hero .hero-inner{ grid-template-columns: 1fr; }
  .plaster-cards{ grid-template-columns: 1fr; }
  .strengths-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width:640px){
  .gallery-grid{ grid-template-columns: 1fr; }
}

/* === Mobile menu (bez JS, :target) === */
.mobile-bar{
  position: sticky; top:0; z-index:60;
  display:none; align-items:center; gap:12px;
  padding:12px 16px; background:#ffffff; border-bottom:1px solid #e5e7eb;
}
.hamburger{
  display:inline-block; font-size:22px; line-height:1; padding:8px 10px;
  border:1px solid #e5e7eb; border-radius:8px; text-decoration:none; color:#111;
}
.mobile-brand{ font-weight:700 }

.sidebar-close{
  display:none; position:absolute; top:12px; right:12px;
  font-size:20px; line-height:1; color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.35); border-radius:8px; padding:4px 8px;
}

/* backdrop za wysuniętym menu */
.backdrop{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:50;
}

/* Zachowanie na mobile */
@media (max-width: 1023px){
  .mobile-bar{ display:flex }

  /* ukryj stały sidebar, pokaż po :target */
  .sidebar{
    left:-256px; transition:left .25s ease;
    /* zakładamy, że masz: position:fixed; top:0; width:256px; height:100vh; */
    z-index:70;
  }
  #nav:target{ left:0 }

  /* pokaż przycisk zamknięcia dopiero na mobile */
  .sidebar-close{ display:block }

  /* wyłącz przesunięcie treści na mobile */
  .main-content{ margin-left:0 }

  /* pokaż backdrop tylko gdy menu jest otwarte */
  #nav:target ~ .backdrop{ display:block }
}

/* Fokus dla klawiatury */
.hamburger:focus-visible,
.sidebar-close:focus-visible{
  outline:2px solid currentColor; outline-offset:3px;
}


.site-footer{ margin-left:256px; background:#ffffff; color:#5c5c5c; }
.site-footer .footer-inner{ max-width:1152px; margin:0 auto; padding:24px 32px; display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.site-footer .footer-nav{ display:flex; gap:16px; }
.site-footer .footer-nav a{ color:#585858; text-decoration:none; }
.site-footer .footer-nav a:hover{ text-decoration:underline; }
@media (max-width:1023px){ .site-footer{ margin-left:0; } }

.cookiebar{
  position: fixed; left:20px; right:20px; bottom:20px; z-index:9999;
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding:12px 16px; background:#111827; color:#e5e7eb; border-radius:10px;
  box-shadow:0 10px 25px -15px rgba(0,0,0,.45);
}
.cookiebar a{ color:#93c5fd; text-decoration:underline; text-underline-offset:2px; }
.cookie-btn{
  border:0; padding:8px 14px; border-radius:8px; cursor:pointer;
  background: var(--primary); color:#fff; font-weight:600;
}