/* RTI Wiki practical-guides layout fix
   2026-06-04: keep hub/category pages and individual practical-guide
   articles close to DokuWiki article breadth while leaving room for side ads.
   2026-06-05: align the practical-guides hub with the DokuWiki/blog article
   card while keeping the right rail available for ad units. */

@media (min-width: 901px) {
  body.claude-shell .claude-content:has(> #content.wrap) {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 8px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  body.claude-shell #content.wrap:not(:has(article.practical-guide)) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 840px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 30px 34px 44px !important;
    background: #fff !important;
    border: 1px solid #e6e1d6 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 28px rgba(43,40,32,0.06), 0 1px 2px rgba(43,40,32,0.04) !important;
  }

  body.claude-shell .claude-content > #content.wrap:has(article.practical-guide) {
    width: min(100%, 840px) !important;
    max-width: 840px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.claude-shell #content.wrap:not(:has(article.practical-guide)) .pg-hub-hero {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  body.claude-shell #content.wrap:not(:has(article.practical-guide)) .pg-hub-hero h1,
  body.claude-shell #content.wrap:not(:has(article.practical-guide)) .pg-hub-hero .lede {
    max-width: 100% !important;
  }

  body.claude-shell #content.wrap:not(:has(article.practical-guide)) .pg-hub-hero h1 {
    font-size: clamp(34px, 4vw, 52px) !important;
  }

  body.claude-shell #content.wrap:not(:has(article.practical-guide)) .pg-help-image {
    justify-self: start !important;
    max-width: 100% !important;
  }

  body.claude-shell #content.wrap:not(:has(article.practical-guide)) .hub-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)) !important;
  }
}

@media (min-width: 1220px) and (max-width: 1420px) {
  body.claude-shell .claude-ad-sidebar {
    right: 8px !important;
  }
}

@media (max-width: 900px) {
  body.claude-shell #content.wrap:not(:has(article.practical-guide)) {
    width: 100% !important;
    max-width: 100% !important;
  }
}