/* =========================================================
   KONTENEROLOGIA OS 5.6
   ARTICLE WIDTH / DESKTOP LAYOUT REPAIR

   Cel:
   - szerszy shell artykułu,
   - 820-920 px dla głównej kolumny przy sidebarze,
   - brak "martwej strefy", w której content kurczy się do 600-700 px,
   - zwykła proza nadal 760 px,
   - wykresy / tabele / komponenty mogą wykorzystać pełną kolumnę.
   ========================================================= */

/* 1. Więcej realnego miejsca dla całego artykułu */
.blog-article-page .article-wide-wrap{
  width:min(1320px,calc(100% - 48px)) !important;
  margin-inline:auto !important;
}

/* Hero może korzystać z nowego shellu, ale copy nie robi się przesadnie szerokie. */
.blog-article-page .article-wide-wrap .article-breadcrumbs,
.blog-article-page .article-wide-wrap > .article-badge,
.blog-article-page .article-wide-wrap > h1,
.blog-article-page .article-wide-wrap > .article-excerpt,
.blog-article-page .article-wide-wrap > .article-meta{
  max-width:920px;
}

/* 2. Artykuł bez sidebara: szeroka kolumna robocza, wycentrowana */
.blog-article-page .article-reading-layout{
  grid-template-columns:minmax(0,920px) !important;
  justify-content:center !important;
  gap:32px !important;
}

/*
   3. Artykuł z sidebarem.
   Minimum 820 px dla treści jest celowe:
   isolated iframe nie może być wciskany w szerokość, która uruchamia
   tablet/mobile breakpointy komponentów na zwykłym desktopie.
*/
.blog-article-page .article-reading-layout.has-sidebar{
  grid-template-columns:minmax(820px,920px) minmax(250px,280px) !important;
  justify-content:center !important;
  gap:32px !important;
}

/* Wariant content-width-wide dostaje odrobinę więcej miejsca */
.blog-article-page .content-width-wide .article-reading-layout.has-sidebar{
  grid-template-columns:minmax(820px,960px) minmax(250px,280px) !important;
}

.blog-article-page .article-reading-column{
  width:100%;
  min-width:0;
}

.blog-article-page .article-html-frame{
  display:block;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
}

/*
   4. Standardowe artykuły:
   szerokość layoutu != szerokość akapitu.
   Czytelna proza zostaje przy ~760 px.
*/
.blog-article-page .article-content > p,
.blog-article-page .article-content > ul,
.blog-article-page .article-content > ol,
.blog-article-page .article-content > h2,
.blog-article-page .article-content > h3,
.blog-article-page .article-content > h4,
.blog-article-page .article-content > blockquote,
.blog-article-page .article-content > .article-lead,
.blog-article-page .article-content > .article-highlight{
  max-width:760px !important;
}

/*
   5. Elementy, które zyskują na szerokości.
   Dotyczy standardowych artykułów. Isolated wykorzystuje szerokość iframe.
*/
.blog-article-page .article-content > figure,
.blog-article-page .article-content > .article-table-wrap,
.blog-article-page .article-content > table,
.blog-article-page .article-content > .truth-grid,
.blog-article-page .article-content > .comparison,
.blog-article-page .article-content > .obligations,
.blog-article-page .article-content > .strip,
.blog-article-page .article-content > .series-method,
.blog-article-page .article-content > .rule-switches,
.blog-article-page .article-content > .reason-grid,
.blog-article-page .article-content > .prep-grid,
.blog-article-page .article-content > .channel-grid,
.blog-article-page .article-content > .cost-body,
.blog-article-page .article-content > .start-grid,
.blog-article-page .article-content > .cards,
.blog-article-page .article-content > .risk-map,
.blog-article-page .article-content > .channel-map,
.blog-article-page .article-content > .timeline-block{
  width:100% !important;
  max-width:920px !important;
}

/* Callout może być trochę szerszy od tekstu, ale nie musi zajmować całych 920 px. */
.blog-article-page .article-content > .article-callout,
.blog-article-page .article-content > .article-checklist,
.blog-article-page .article-content > .article-resource-card,
.blog-article-page .article-content > .article-disclaimer,
.blog-article-page .article-content > .article-cta{
  max-width:820px !important;
}

/*
   6. Kluczowy breakpoint.
   Zamiast pozwalać gridowi ścisnąć iframe z 820 px do 600-700 px,
   wcześniej przenosimy sidebar pod artykuł.
*/
@media(max-width:1150px){
  .blog-article-page .article-wide-wrap{
    width:min(100% - 40px,1040px) !important;
  }

  .blog-article-page .article-reading-layout,
  .blog-article-page .article-reading-layout.has-sidebar,
  .blog-article-page .content-width-wide .article-reading-layout.has-sidebar{
    grid-template-columns:minmax(0,920px) !important;
    justify-content:center !important;
    gap:26px !important;
  }

  .blog-article-page .article-sidebar{
    position:static !important;
    max-height:none !important;
    overflow:visible !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    width:100%;
    max-width:920px;
    margin-inline:auto;
    padding-bottom:55px;
  }
}

/* Tablet: pełna szerokość bez wymuszania desktopowych 820 px */
@media(max-width:820px){
  .blog-article-page .article-wide-wrap{
    width:calc(100% - 32px) !important;
    max-width:100% !important;
  }

  .blog-article-page .article-reading-layout,
  .blog-article-page .article-reading-layout.has-sidebar,
  .blog-article-page .content-width-wide .article-reading-layout.has-sidebar{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .blog-article-page .article-sidebar{
    grid-template-columns:1fr !important;
    max-width:none;
  }

  .blog-article-page .article-content > *{
    max-width:100% !important;
  }
}

/* Telefon pozostaje zgodny z istniejącym systemem mobile */
@media(max-width:640px){
  .blog-article-page .article-wide-wrap{
    width:calc(100% - 28px) !important;
  }
}

/* =========================================================
   KONTENEROLOGIA OS 5.6.2 — ARTICLE RUNTIME HOTFIX
   - szerszy desktop dla isolated content,
   - jeden scrollbar strony,
   - sidebar bez własnego scrolla.
   ========================================================= */

/* Więcej realnej szerokości na dużym desktopie. */
@media (min-width:1500px){
  .blog-article-page .article-wide-wrap{
    width:min(1500px,calc(100% - 48px)) !important;
  }

  /* Pełne layouty mają karty/siatki i mogą realnie wykorzystać desktop. */
  .blog-article-page .article-reading-layout.is-isolated.has-sidebar{
    grid-template-columns:minmax(0,1080px) minmax(280px,310px) !important;
    gap:34px !important;
  }

  .blog-article-page .article-reading-layout.is-isolated:not(.has-sidebar){
    grid-template-columns:minmax(0,1120px) !important;
  }
}

/*
 * Sidebar jest częścią strony, nie osobnym panelem aplikacji.
 * Usuwamy max-height + overflow-y:auto, które tworzyły drugi pionowy scrollbar.
 */
.blog-article-page .article-sidebar{
  max-height:none !important;
  overflow:visible !important;
  overscroll-behavior:auto !important;
  scrollbar-gutter:auto !important;
  padding-right:0 !important;
}

/* iframe nie wnosi własnego scrolla i nie rezerwuje sztucznego minimum po init. */
.blog-article-page .article-html-frame{
  display:block;
  width:100% !important;
  max-width:none !important;
  border:0 !important;
  overflow:hidden !important;
}


/* =========================================================
   KONTENEROLOGIA 5.6.6 — DESKTOP WIDTH + SIDEBAR RESTORE
   Przywraca zachowanie znane z 5.6.2 i usuwa regresję:
   - sidebar nie ma własnego scrollbara,
   - isolated content wykorzystuje szerokość ekranu,
   - standardowa proza nadal pozostaje czytelna.
   ========================================================= */
@media (min-width:1200px){
  .blog-article-page .article-wide-wrap{
    width:calc(100% - 48px) !important;
    max-width:none !important;
  }

  .blog-article-page .article-reading-layout.is-isolated.has-sidebar{
    grid-template-columns:minmax(0,1fr) minmax(280px,310px) !important;
    justify-content:stretch !important;
    gap:34px !important;
  }

  .blog-article-page .article-reading-layout.is-isolated:not(.has-sidebar){
    grid-template-columns:minmax(0,1fr) !important;
    justify-content:stretch !important;
  }

  .blog-article-page .article-reading-layout.is-standard.has-sidebar{
    grid-template-columns:minmax(760px,920px) minmax(260px,300px) !important;
    justify-content:center !important;
  }
}

.blog-article-page .article-sidebar{
  position:sticky !important;
  top:88px !important;
  align-self:start !important;
  height:max-content !important;
  max-height:none !important;
  overflow:visible !important;
  overscroll-behavior:auto !important;
  scrollbar-gutter:auto !important;
  padding-right:0 !important;
}

@media(max-width:1150px){
  .blog-article-page .article-sidebar{
    position:static !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
}