/* Wspólna powłoka stron (blog, cennik) — jak index: navbar + brak overflow */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: var(--font-family);
  background: var(--bg-main);
  color: var(--ink);
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  margin: 0;
}

/* Stały navbar — treść pod spodem nie jest przycinana */
body.has-fixed-navbar {
  --page-nav-offset: 132px;
}

@media (max-width: 768px) {
  body.has-fixed-navbar {
    --page-nav-offset: 112px;
  }
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

/* Navbar — identyczny układ jak na indexie */
.navbar .nav-wrapper {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.container,
.pricing-container,
.site-footer .container {
  width: 100%;
  max-width: var(--maxw, 1240px);
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
}

.pricing-section,
.pricing-compare-section,
.pricing-faq,
.blog-page,
.blog-hero,
.blog-layout {
  max-width: 100%;
}

/* Gradient nagłówków (katalog, blog) */
.text-gradient,
.dz-accent {
  background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-purple) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 768px) {
  .container,
  .pricing-container,
  .site-footer .container {
    padding-inline: 12px;
  }
}

@media (max-width: 480px) {
  .container,
  .pricing-container,
  .site-footer .container {
    padding-inline: 12px;
  }
}