/* === Reset & base === */
@font-face{
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/CormorantGaramond-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Cormorant Garamond";
  src: url("../assets/fonts/CormorantGaramond-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
:root{
  --bg: #ffffff;
  --text: #0f172a;          /* slate-900 */
  --muted: #475569;         /* slate-600 */
  --line: #e2e8f0;          /* slate-200 */
  --brand: #0d6efd;         /* blue-600 */
  --radius: 16px;
  --container: 1200px;
  --shadow: 0 10px 25px rgba(0,0,0,.08);
}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
.container{ width: min(100% - 32px, var(--container)); margin-inline: auto; }

/* === Header / Nav === */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.navbar{
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: 16px;
}
.brand{ display: flex; align-items: center; gap: 12px; font-weight: 800; }
.brand .logo{
  width: 48px; height: 48px; border-radius: 999px; background:#fff; display:grid; place-items:center;
  box-shadow: var(--shadow); color:#111; font-weight:900;
}
.nav-links{ display: flex; align-items: center; gap: 20px; }
.nav-links a{ padding: 10px 8px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #0b1324; }
.nav-links a.active{ position: relative; }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background: var(--brand);
}
.burger{ display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; }
@media (max-width: 900px){
.burger{ display:block; }
.nav-links{ display:none; position: fixed; top: 64px; left: 0; right: 0; background:#fff; border-bottom:1px solid var(--line); }
.nav-links.open{ display:flex; flex-direction: column; padding: 12px; }
}

/* === Sections === */
.section{ padding: clamp(48px, 7vw, 96px) 0; }
.section-title{
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 700;
  letter-spacing: .01em;
}
.lead{
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-weight: 300;
  letter-spacing: .01em;
}

/* Hero with overlay */
.hero{
  position: relative; color: #fff; text-align: center;
  min-height: 70vh; display:grid; place-items:center;
  isolation: isolate;
}
.hero::before{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.25)); z-index:0; pointer-events:none; }
.hero > .container{ position:relative; z-index:1; }
.hero h1{ font-size: clamp(32px, 6vw, 56px); margin: 0 0 16px; }
.hero .btns{ display:flex; gap:12px; justify-content:center; flex-wrap: wrap; margin-top: 20px; }

/* Cards / grid */
.grid{ display:grid; gap: 20px; }
@media (min-width: 700px){
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px;
}
.card.dark{ background:#0b1220; color:#cbd5e1; border-color: #1f2937; }
.card .h{ font-weight:700; font-size: 18px; margin-bottom: 8px; }
.small{ font-size: 50px; color: var(--muted); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding: 12px 18px; border-radius: 12px; border:1px solid transparent; font-weight: 700; }
.btn-primary{ background: var(--brand); color: #fff; }
.btn-outline{ background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-dark{ background: #111827; color: #fff; }
.btn-light{ background: #fff; color: #111827; border: 1px solid var(--line); }

/* Tables */
.table{ width:100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td{ padding: 12px 14px; border-bottom:1px solid var(--line); vertical-align: top; }
.table thead th{ background:#0b1324; color:#fff; position: sticky; top:0; }
.table .num{ white-space: nowrap; text-align: right; }

/* Footer */
.site-footer{ border-top:1px solid var(--line); color:#64748b; }
.site-footer .container{ padding: 22px 0; }
.site-footer a{ color: inherit; text-decoration: underline; }

/* Helpers */
.center{ text-align: center; }
.mt-2{ margin-top: 8px; } .mt-3{ margin-top: 12px; } .mt-4{ margin-top: 16px; } .mt-5{ margin-top: 24px; }
.mb-0{ margin-bottom: 0; } .mb-2{ margin-bottom: 8px; } .mb-3{ margin-bottom: 12px; } .mb-4{ margin-bottom: 16px; } .mb-5{ margin-bottom: 24px; }
.pad{ padding: 24px; }
.bg-light{ background: #f8fafc; }
.text-white{ color: #fff; }
.overlay{ position:relative; }
.overlay::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.35); border-radius: var(--radius); z-index:0; }
.overlay > *{ position:relative; z-index:1; }

/* Sticky helper for anchors */
:target{ scroll-margin-top: 90px; }

/* --- Typography (Inter) --- */
@supports (font-variation-settings: normal){
body{ font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial; }
}

/* --- Dark mode --- */
:root{
  color-scheme: light;
}
:root.dark{
  --bg: #0b1120;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --line: #1f2937;
  --brand: #60a5fa;
  --accent: #e5e7eb;
  color-scheme: dark;
}
:root.dark .site-header{ background: rgba(11,17,32,.9); border-bottom-color: var(--line); }
:root.dark .card{ background:#0f172a; border-color:#1f2937; color:#cbd5e1; }
:root.dark .card.dark{ background:#111827; border-color:#111827; color:#e5e7eb; }
:root.dark .hero::before{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.25)); z-index:0; pointer-events:none; }
:root.dark .site-footer{ border-top-color: var(--line); color:#9ca3af; }
:root.dark .nav-links a{ color:#e5e7eb; }
:root.dark .btn-light{ background:#0b1324; color:#e5e7eb; border-color:#1f2937; }
:root.dark .table thead th{ background:#111827; }

/* --- Theme switch button --- */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; border:1px solid var(--line); background:transparent;
}
.theme-toggle svg{ width:20px; height:20px; }

/* --- Responsive table wrapper --- */
.table-wrap{ overflow:auto; border:1px solid var(--line); border-radius:12px; }
.table{ min-width: 680px; } /* allow horizontal scroll on small screens */


/* === Cennik: aktywny przycisk/tab (tylko tabela cennika) === */
body .nav-tabs .nav-link.active,
body .nav-tabs .nav-item.show .nav-link,
body .btn.active,
body .btn[aria-selected="true"],
body .btn-check:checked + .btn {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}
body .nav-tabs .nav-link,
body .btn {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}



/* === Cennik: stabilne kadrowanie zdjęć (bez przycinania) === */
body .img-stable {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}
/* Jeśli w cenniku są elementy z tłem obrazkowym, wymuś pełne pokazanie obrazu */
body .bg-cover, 
body [style*="background-image"] {
  background-repeat: no-repeat;
  background-position: center center !important;
  background-size: contain !important;
}