/* ToJestDom Poradnik — article layout guard v2 (2026-10-02)
   Scope: Poradnik articles only. No header/footer/homepage/project styling. */

body.tjdPoradnikArticleLayoutGuardV2 {
  overflow-x: clip;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeMain,
body.tjdPoradnikArticleLayoutGuardV2 main.tjdKnowledgeMain {
  box-sizing: border-box !important;
  width: min(1240px, calc(100% - 40px)) !important;
  max-width: 1240px !important;
  min-width: 0 !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeMain *,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeMain *::before,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeMain *::after {
  box-sizing: border-box;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeBody,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeAside,
body.tjdPoradnikArticleLayoutGuardV2 .seoRelated,
body.tjdPoradnikArticleLayoutGuardV2 .seoRelatedInner {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero {
  width: 100% !important;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeBody {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 290px) !important;
  gap: clamp(24px, 3vw, 44px) !important;
  align-items: start !important;
  width: 100% !important;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeAside {
  width: auto !important;
}

/* Fallback for newer articles that missed one of the historical layout classes. */
body.tjdPoradnikArticleLayoutGuardV2 main.tjdKnowledgeMain > article,
body.tjdPoradnikArticleLayoutGuardV2 main.tjdKnowledgeMain > aside,
body.tjdPoradnikArticleLayoutGuardV2 main.tjdKnowledgeMain > section,
body.tjdPoradnikArticleLayoutGuardV2 main.tjdKnowledgeMain > div {
  min-width: 0;
  max-width: 100%;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeCrumbs,
body.tjdPoradnikArticleLayoutGuardV2 .breadcrumbs,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero h1,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle h1,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle h2,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle h3,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle p,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle li,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle a,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeAside a,
body.tjdPoradnikArticleLayoutGuardV2 .seoRelated a {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeCrumbs,
body.tjdPoradnikArticleLayoutGuardV2 .breadcrumbs {
  display: flex;
  flex-wrap: wrap !important;
  white-space: normal !important;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle img,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle picture,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle video,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle canvas,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle svg,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle iframe,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero img,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero picture,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero video,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero canvas,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero svg,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero iframe {
  max-width: 100% !important;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle img,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero img,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle picture,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero picture {
  height: auto !important;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle iframe,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero iframe,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle video,
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero video {
  width: 100% !important;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle pre {
  display: block;
  max-width: 100% !important;
  overflow-x: auto !important;
  white-space: pre-wrap;
  overflow-wrap: normal;
  -webkit-overflow-scrolling: touch;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle code {
  max-width: 100%;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle table {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle [style*="width"],
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle [style*="min-width"],
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeAside [style*="width"],
body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeAside [style*="min-width"] {
  min-width: 0 !important;
  max-width: 100% !important;
}

body.tjdPoradnikArticleLayoutGuardV2 .seoRelatedLinks {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 1020px) {
  body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeMain,
  body.tjdPoradnikArticleLayoutGuardV2 main.tjdKnowledgeMain {
    width: min(100% - 32px, 1240px) !important;
  }

  body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeBody {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeAside {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 720px) {
  body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeMain,
  body.tjdPoradnikArticleLayoutGuardV2 main.tjdKnowledgeMain {
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
  }

  body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeHero h1,
  body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle h1,
  body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle h2,
  body.tjdPoradnikArticleLayoutGuardV2 .tjdKnowledgeArticle h3 {
    max-width: 100% !important;
  }
}