/* Blog article and archive layout stabilization (PL + EN)
   Source of truth for:
   - single blog articles: body.dsk-blog-article
   - blog archive / hub pages: body.dsk-blog-hub
   SAFE cleanup after margin fixes.
*/

body.dsk-blog-article,
body.dsk-blog-hub {
  --dsk-blog-shell-max: 1240px;
  --dsk-blog-inner-max: 1200px;
  --dsk-blog-copy-max: 1040px;
  --dsk-blog-gutter: 20px;
  --dsk-blog-row-top: 48px;
  --dsk-blog-row-bottom: 56px;
  background: #fff !important;
}

body.dsk-blog-article #main-content,
body.dsk-blog-article #sb-page-structure,
body.dsk-blog-article #blog-post-template,
body.dsk-blog-article #blog-post-template > .container,
body.dsk-blog-article #blog-post-template .sb-column,
body.dsk-blog-article #blog-post-template .sb-column-content,
body.dsk-blog-article #blog-post-template .sb-item-view-wrapper,
body.dsk-blog-article #blog-post-template .sb-item-view,
body.dsk-blog-article #blog-post-template .sb-item-view__body,
body.dsk-blog-hub #main-content,
body.dsk-blog-hub #sb-page-structure,
body.dsk-blog-hub .section-intro,
body.dsk-blog-hub .section-intro__inner,
body.dsk-blog-hub #blog,
body.dsk-blog-hub #blog > .container,
body.dsk-blog-hub #blog .sb-row,
body.dsk-blog-hub #blog .sb-column,
body.dsk-blog-hub #blog .sb-column-content,
body.dsk-blog-hub #blog .sb-blog-card-section,
body.dsk-blog-hub #blog .sb-blog-card-section__content,
body.dsk-blog-hub .dsk-blog-most-read,
body.dsk-blog-hub .dsk-blog-quicknav,
body.dsk-blog-hub .dsk-blog-pagination,
body.dsk-blog-hub .dsk-hub-filters__inner,
body.dsk-blog-hub .items-grid.sb-blog {
  background: #fff !important;
}

body.dsk-blog-article #blog-post-template {
  box-shadow: none !important;
}

body.dsk-blog-article #blog-post-template .sb-item-view__title,
body.dsk-blog-article #blog-post-template .sb-item-view__meta,
body.dsk-blog-article #blog-post-template .sb-item-view__image,
body.dsk-blog-article #blog-post-template .sb-item-view__body {
  position: relative;
  z-index: 1;
}

body.dsk-blog-hub .dsk-cta-lab {
  background: linear-gradient(135deg, rgba(10, 25, 45, 0.96) 0%, rgba(6, 14, 28, 0.96) 55%, rgba(10, 25, 45, 0.96) 100%) !important;
}

body.dsk-blog-hub .dsk-cta-lab__inner {
  background: rgba(10, 25, 45, 0.82) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  backdrop-filter: blur(10px);
}

@media (min-width: 1024px) {
  body.dsk-blog-article #blog-post-template > .container,
  body.dsk-blog-article #dsk-blog-to-service-cta > .container,
  body.dsk-blog-hub #blog > .container,
  body.dsk-blog-hub #blog .container,
  body.dsk-blog-hub .section-intro,
  body.dsk-blog-hub .section-intro__inner,
  body.dsk-blog-hub .dsk-blog-most-read,
  body.dsk-blog-hub .dsk-blog-quicknav,
  body.dsk-blog-hub .dsk-blog-pagination,
  body.dsk-blog-hub .dsk-hub-filters__inner,
  body.dsk-blog-hub .dsk-cta-lab__inner,
  body.dsk-blog-hub .sb-blog-card-section__content {
    width: min(var(--dsk-blog-shell-max), calc(100% - 40px)) !important;
    max-width: var(--dsk-blog-shell-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    padding-left: var(--dsk-blog-gutter) !important;
    padding-right: var(--dsk-blog-gutter) !important;
  }

  body.dsk-blog-article #blog-post-template .sb-row,
  body.dsk-blog-hub #blog .sb-row {
    padding-top: var(--dsk-blog-row-top) !important;
    padding-bottom: var(--dsk-blog-row-bottom) !important;
  }

  body.dsk-blog-article #blog-post-template .sb-column {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.dsk-blog-article #blog-post-template .sb-item-view-wrapper,
  body.dsk-blog-article #blog-post-template .sb-item-view {
    width: 100% !important;
    max-width: var(--dsk-blog-inner-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.dsk-blog-article #blog-post-template .sb-item-view__title,
  body.dsk-blog-article #blog-post-template .sb-item-view__meta,
  body.dsk-blog-article #blog-post-template .sb-item-view__image {
    width: 100% !important;
    max-width: var(--dsk-blog-inner-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body.dsk-blog-article #blog-post-template .sb-item-view__title {
    margin-bottom: 18px !important;
  }

  body.dsk-blog-article #blog-post-template .sb-item-view__image {
    margin-top: 0 !important;
    margin-bottom: 28px !important;
  }

  body.dsk-blog-article #blog-post-template .sb-item-view__image figure,
  body.dsk-blog-article #blog-post-template .sb-item-view__image .option-image,
  body.dsk-blog-article #blog-post-template .sb-item-view__image img {
    width: 100% !important;
    max-width: none !important;
  }

  body.dsk-blog-article #blog-post-template .sb-item-view__body {
    width: 100% !important;
    max-width: var(--dsk-blog-copy-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: clamp(1rem, 0.28vw + 0.96rem, 1.1rem) !important;
    line-height: 1.78 !important;
  }

  body.dsk-blog-hub #blog .items-grid.sb-blog {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

/* Stage 26 — related-reading parity: two blog articles still carry a late inline 760px cap on `.dsk-related-reading`, which leaves a visibly narrower card inside the now-restored 1040px article copy measure. Keep the card styling, but map its desktop width back to the shared blog copy token. */
  body.dsk-blog-article .dsk-related-reading {
    width: 100% !important;
    max-width: min(100%, var(--dsk-blog-copy-max)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* Audit hardening: keep blog links, text and media inside the shared shell */
body.dsk-blog-article #blog-post-template .sb-item-view,
body.dsk-blog-article #blog-post-template .sb-item-view__body,
body.dsk-blog-article #blog-post-template .sb-item-view__body > *,
body.dsk-blog-hub #blog li.items-grid__item.sb-blog-card,
body.dsk-blog-hub #blog li.items-grid__item.sb-blog-card .items-grid__item-body,
body.dsk-blog-hub #blog li.items-grid__item.sb-blog-card .items-grid__item-content {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.dsk-blog-article #blog-post-template .sb-item-view__body,
body.dsk-blog-article #blog-post-template .sb-item-view__body p,
body.dsk-blog-article #blog-post-template .sb-item-view__body li,
body.dsk-blog-article #blog-post-template .sb-item-view__body h2,
body.dsk-blog-article #blog-post-template .sb-item-view__body h3,
body.dsk-blog-article #blog-post-template .sb-item-view__body h4,
body.dsk-blog-article #blog-post-template .sb-item-view__body h5,
body.dsk-blog-article #blog-post-template .sb-item-view__body h6,
body.dsk-blog-article #blog-post-template .sb-item-view__body blockquote,
body.dsk-blog-article #blog-post-template .sb-item-view__body figcaption,
body.dsk-blog-article #blog-post-template .sb-item-view__body a,
body.dsk-blog-article #blog-post-template .sb-item-view__body code,
body.dsk-blog-article #blog-post-template .sb-item-view__body strong,
body.dsk-blog-article #blog-post-template .sb-item-view__body em,
body.dsk-blog-hub #blog li.items-grid__item.sb-blog-card .items-grid__header span,
body.dsk-blog-hub #blog li.items-grid__item.sb-blog-card .items-grid__summary,
body.dsk-blog-hub #blog li.items-grid__item.sb-blog-card .dsk-card-meta {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

body.dsk-blog-article #blog-post-template .sb-item-view__body img,
body.dsk-blog-article #blog-post-template .sb-item-view__body svg,
body.dsk-blog-article #blog-post-template .sb-item-view__body video,
body.dsk-blog-article #blog-post-template .sb-item-view__body iframe,
body.dsk-blog-article #blog-post-template .sb-item-view__body canvas,
body.dsk-blog-article #blog-post-template .sb-item-view__body figure,
body.dsk-blog-article #blog-post-template .sb-item-view__body table,
body.dsk-blog-article #blog-post-template .sb-item-view__body pre {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.dsk-blog-article #blog-post-template .sb-item-view__body table,
body.dsk-blog-article #blog-post-template .sb-item-view__body pre {
  display: block;
  overflow-x: auto;
}

body.dsk-blog-article #blog-post-template .sb-item-view__body code {
  white-space: normal !important;
}



@media (min-width:821px) {
  /* Stage 57 pass 4 — service-article family: keep service guide articles on the
     same content band as footer/header. The old template still centered the body
     at 1040px and left loose follow-up blocks outside the shared wrapper. */
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template > .container,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #dsk-blog-to-service-cta > .container,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-column,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-column-content,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view-wrapper,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__title,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__meta,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__image,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__body,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template ~ :is(h2,h3,p,ul,ol,.dsk-related-reading){
    width:min(1280px,calc(100% - 80px)) !important;
    max-width:1280px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__body > :is(p,ul,ol,h2,h3,h4,h5,h6,blockquote,figure,table,pre,.dsk-related-reading){
    width:100% !important;
    max-width:min(1200px,calc(100% - 80px)) !important;
    margin-left:0 !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }

  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template > .container,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #dsk-blog-to-service-cta > .container,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-column,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-column-content,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view-wrapper,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__body,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template ~ :is(h2,h3,p,ul,ol,.dsk-related-reading){
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template > .container,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #dsk-blog-to-service-cta > .container,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template ~ :is(h2,h3,p,ul,ol,.dsk-related-reading){
    width:min(1280px,calc(100% - 80px)) !important;
    max-width:1280px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-column,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-column-content,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view-wrapper,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__body{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* Stage 57 pass 4B — service article outer shell uses the same 1320/20 model as
     header/footer; the inner body then spans 100% of that shell. */
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template > .container,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #dsk-blog-to-service-cta > .container{
    width:min(1320px,calc(100% - 40px)) !important;
    max-width:1320px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:20px !important;
    padding-right:20px !important;
    box-sizing:border-box !important;
  }

  /* Stage 57 pass 4D — the legacy blog/article template still keeps the main
     column at 75% until 1024px. Promote service articles to a full-width single
     column from 821px upward so the body follows the shared footer band. */
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-column{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:none !important;
  }

}

@media (min-width:821px) and (max-width:1023px) {
  /* Stage 57 pass 4C — at the 821px laptop edge, service articles still keep a
     side-by-side item-view and leave the body on a narrow island. Stack the hero
     image above the copy so the article body uses the full shared band. */
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view{
    display:block !important;
  }
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__image,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__body{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    float:none !important;
  }
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__image{
    margin-bottom:24px !important;
  }
}

@media (min-width:1024px){
  /* Stage 64/65/66/68 retired in Stage 181.
     On the current package state their desktop blog/article widths are no longer
     real owners:
     - Stage 64 shell vars + hub hero band are superseded later by Stage 70.
     - Stage 65/66 article title/meta/image caps are superseded later by Stage 70.
     - Stage 68 matches no real article in this package because every
       body.dsk-blog-article includes #dsk-blog-to-service-cta; even if a future
       article matched it, Stage 70 below would still win later in the cascade.
     Keep Stage 57 for service-article specifics; keep Stage 70 as the single
     desktop owner. */

  /* Stage 70 — blog/article shell parity to /wyslij-paczke-do-laboratorium:
     the remaining mismatch is not the outer desktop shell token itself, but the
     second inner ownership layer added by legacy blog widths (1240 / 1200 / 1040 / 1120).
     Keep one shell owner only: the same 1320px desktop band with shared gutters,
     then flatten inner blog/article wrappers so H1, image, body, cards and helper blocks
     sit on the same left/right axis as header + footer. */
  body.dsk-blog-article,
  body.dsk-blog-hub{
    --dsk-blog-shell-max:var(--dsk-layout-shell-max,1320px) !important;
    --dsk-blog-inner-max:var(--dsk-layout-shell-max,1320px) !important;
    --dsk-blog-copy-max:var(--dsk-layout-shell-max,1320px) !important;
    --dsk-blog-top-max:var(--dsk-layout-shell-max,1320px) !important;
    --dsk-blog-gutter:var(--dsk-layout-shell-gutter,20px) !important;
  }

  /* Single desktop shell owner for blog/article sections inside <main>. */
  body.dsk-blog-article main .sb-section > .container.sb-container-fixed.sb-container,
  body.dsk-blog-hub main .sb-section > .container.sb-container-fixed.sb-container,
  body.dsk-blog-hub #blog-hero .dsk-about-hero__inner,
  body.dsk-blog-hub .dsk-hub-filters__inner,
  body.dsk-blog-hub .dsk-blog-quicknav,
  body.dsk-blog-hub .dsk-blog-pagination,
  body.dsk-blog-hub .section-intro,
  body.dsk-blog-hub .dsk-cta-lab__inner{
    width:min(var(--dsk-layout-shell-max,1320px),calc(100% - (var(--dsk-layout-shell-gutter,20px) * 2))) !important;
    max-width:var(--dsk-layout-shell-max,1320px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:var(--dsk-layout-shell-gutter,20px) !important;
    padding-right:var(--dsk-layout-shell-gutter,20px) !important;
    box-sizing:border-box !important;
  }

  /* Preserve the compact pill bar while keeping the same outer axis. */
  body.dsk-blog-hub .dsk-hub-filters__inner{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  /* Flatten the old inner width islands inside the shared shell. */
  body.dsk-blog-article #blog-post-template .sb-column-content,
  body.dsk-blog-article #blog-post-template .sb-item-view-wrapper,
  body.dsk-blog-article #blog-post-template .sb-item-view,
  body.dsk-blog-article #blog-post-template .sb-item-view__title,
  body.dsk-blog-article #blog-post-template .sb-item-view__meta,
  body.dsk-blog-article #blog-post-template .sb-item-view__image,
  body.dsk-blog-article #blog-post-template .sb-item-view__body,
  body.dsk-blog-hub .section-intro__inner,
  body.dsk-blog-hub #blog .sb-blog-card-section__content,
  body.dsk-blog-hub #blog .sb-blog-card-section .option-width.sb-section-alignable,
  body.dsk-blog-hub #blog .dsk-blog-most-read,
  body.dsk-blog-hub #blog .items-grid.sb-blog{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  body.dsk-blog-article #blog-post-template .sb-item-view__image figure,
  body.dsk-blog-article #blog-post-template .sb-item-view__image .option-image,
  body.dsk-blog-article #blog-post-template .sb-item-view__image img{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    display:block !important;
    box-sizing:border-box !important;
  }

  /* Stage 71 — blog article top-band parity: after Stage 181 retired the old
     desktop owners, service articles still keep a leftover 40px inline inset on
     title/meta/image from Stage 57. The body shell is already correct; remove only
     that residual inset on desktop so the article top band sits on the same axis
     as the real article wrapper without touching copy width below. */
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__title,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__meta,
  body.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__image{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
  }

  /* Stage 72 — blog article body-copy axis parity: keep the current 1200/80
     text measure, but center it inside the restored 1271px article band instead
     of leaving the whole inset on the right side only. This is a visual parity
     fix for desktop copy blocks, not a new width system. */
  body.dsk-blog-article.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__body > :is(p,ul,ol,h2,h3,h4,h5,h6,blockquote,figure,table,pre){
    width:min(1200px,calc(100% - 80px)) !important;
    max-width:1200px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }

  /* Stage 73 — blog article copy-measure parity: after Stage 72 fixed the axis,
     the remaining desktop gap versus /wyslij-paczke-do-laboratorium is the text
     measure itself (1191px vs 1206px at 1366px viewport). Widen only the real
     copy blocks slightly toward the 1206px reference while keeping the symmetric
     auto-centered axis from Stage 72. */
  body.dsk-blog-article.dsk-blog-article.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template .sb-item-view__body > :is(p,ul,ol,h2,h3,h4,h5,h6,blockquote,figure,table,pre){
    width:min(1206px,calc(100% - 65px)) !important;
    max-width:1206px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }

  /* Stage 74 — related-reading copy-band parity: after Stage 73 aligned the real
     article copy to the 1206px desktop measure, the related-reading placeholder
     still sits on the full article band because it lives inside the next .sb-section,
     not inside .sb-item-view__body. Map only that block back to the same centered
     copy measure without touching the top band, shell or hub pages. */
  body.dsk-blog-article.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template ~ .sb-section .dsk-related-reading{
    width:min(1206px,calc(100% - 65px)) !important;
    max-width:1206px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }

  /* Stage 75 — direct sibling related-articles parity: five EN articles still keep
     their post-body "Related articles" heading/list as direct siblings of
     #blog-post-template instead of using .dsk-related-reading or living inside
     .sb-item-view__body. They currently inherit the wider 1280px article band from
     Stage 57; map only those raw sibling h2/h3/p/ul/ol blocks to the same 1206px
     centered copy measure as Stage 73/74. */
  body.dsk-blog-article.dsk-blog-article:has(#dsk-blog-to-service-cta) #blog-post-template ~ :is(h2,h3,p,ul,ol){
    width:min(1206px,calc(100% - 65px)) !important;
    max-width:1206px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }

}