/* Kontenerologia OS 5.2.2 - Mobile Repair Pack */
:root{
  --ktlg-mobile-gutter:clamp(16px,4.8vw,24px);
  --ktlg-mobile-tap:44px;
}

html{
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  min-width:0;
  overflow-wrap:break-word;
}

img,svg,video,canvas,iframe{
  max-width:100%;
}

input,select,textarea,button{
  max-width:100%;
}

.article-content pre,
.article-body pre,
.blog-main pre{
  max-width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}

.article-content table,
.article-body table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

@media (max-width:980px){
  .wrap,
  .blog-wrap,
  .article-wrap,
  .article-wide-wrap{
    width:calc(100% - (var(--ktlg-mobile-gutter) * 2))!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

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

  .blog-content-column,
  .blog-sidebar,
  .article-reading-column,
  .article-sidebar,
  .article-content,
  .article-body{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
  }

  .blog-sidebar,
  .article-sidebar,
  .sidebar{
    position:static!important;
    top:auto!important;
    align-self:stretch!important;
  }

  .article-sidebar,
  .blog-sidebar{
    margin-top:28px!important;
  }

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

@media (max-width:760px){
  .site-header .header-inner,
  .header-inner{
    min-height:72px!important;
    gap:12px!important;
  }

  .desktop-nav,
  .header-cta{
    display:none!important;
  }

  .menu-toggle{
    display:inline-flex!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .logo{
    max-width:calc(100vw - 96px);
    overflow:hidden;
    font-size:clamp(1.12rem,6vw,1.35rem)!important;
    text-overflow:ellipsis;
  }

  .mobile-menu{
    inset:72px 0 0!important;
    height:calc(100dvh - 72px)!important;
    padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;
    overscroll-behavior:contain;
  }

  .blog-hero{
    padding-top:52px!important;
    padding-bottom:44px!important;
  }

  .blog-hero h1{
    max-width:100%!important;
    font-size:clamp(2.45rem,12vw,4rem)!important;
    line-height:.98!important;
    overflow-wrap:anywhere;
  }

  .blog-hero p{
    max-width:100%!important;
    font-size:1rem!important;
    line-height:1.65!important;
  }

  .article-hero{
    padding-top:46px!important;
    padding-bottom:38px!important;
  }

  .article-hero h1{
    max-width:100%!important;
    font-size:clamp(2.15rem,11vw,3.6rem)!important;
    line-height:1.01!important;
    overflow-wrap:anywhere;
    hyphens:auto;
  }

  .article-excerpt,
  .hero-lead,
  .hero-subtitle{
    max-width:100%!important;
    font-size:1rem!important;
    line-height:1.65!important;
  }

  .article-meta{
    gap:8px 14px!important;
  }

  .article-hero-image,
  .article-hero-image.side{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:16/9;
  }

  .article-hero-image img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  .blog-controls .blog-wrap{
    overflow:visible;
  }

  .blog-search-row,
  .blog-search{
    width:100%!important;
  }

  .blog-search input,
  .article-content input,
  .article-content select,
  .article-content textarea{
    font-size:16px!important;
  }

  .blog-categories{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    width:auto!important;
    margin-left:calc(var(--ktlg-mobile-gutter) * -1)!important;
    margin-right:calc(var(--ktlg-mobile-gutter) * -1)!important;
    padding:2px var(--ktlg-mobile-gutter) 10px!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }

  .blog-categories::-webkit-scrollbar{
    display:none;
  }

  .blog-category{
    flex:0 0 auto!important;
    min-height:var(--ktlg-mobile-tap)!important;
    white-space:nowrap!important;
    scroll-snap-align:start;
  }

  .blog-item,
  .blog-card,
  .blog-featured{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    min-width:0!important;
    width:100%!important;
    overflow:hidden!important;
  }

  .blog-visual{
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:16/9!important;
  }

  .blog-visual img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  .blog-card-body{
    min-width:0!important;
    padding:20px!important;
  }

  .blog-card-body h2{
    max-width:100%!important;
    font-size:clamp(1.35rem,7vw,1.9rem)!important;
    line-height:1.15!important;
    overflow-wrap:anywhere;
  }

  .blog-card-body p{
    font-size:.96rem!important;
    line-height:1.65!important;
  }

  .blog-meta{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:10px 16px!important;
  }

  .sidebar-box,
  .sidebar-newsletter,
  .sidebar-tool,
  .article-side-box,
  .side-widget{
    width:100%!important;
    min-width:0!important;
    padding:18px!important;
  }

  .popular-item{
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:10px!important;
  }

  .popular-item strong{
    overflow-wrap:anywhere;
  }

  .article-content,
  .article-body{
    font-size:1rem!important;
    line-height:1.72!important;
  }

  .article-content > p:first-child,
  .article-body > p:first-child{
    font-size:1.06rem!important;
    line-height:1.72!important;
  }

  .article-content h2,
  .article-body h2{
    font-size:clamp(1.65rem,8vw,2.2rem)!important;
    line-height:1.15!important;
  }

  .article-content h3,
  .article-body h3{
    font-size:clamp(1.2rem,6vw,1.5rem)!important;
  }

  .article-content blockquote,
  .article-body blockquote,
  .article-callout,
  .article-checklist,
  .article-resource-card,
  .article-disclaimer,
  .article-cta,
  .pullquote,
  .callout,
  .timeline-block,
  .risk-map,
  .channel-map,
  .cost-panel,
  .comparison-card,
  .method-card,
  .rule-switch,
  .ktlg-block{
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:18px!important;
  }

  .article-content .truth-grid,
  .article-content .comparison,
  .article-content .obligations,
  .article-content .strip,
  .article-content .series-method,
  .article-content .rule-switches,
  .article-content .reason-grid,
  .article-content .prep-grid,
  .article-content .channel-grid,
  .article-content .cost-body,
  .article-content .start-grid,
  .article-content .cards,
  .article-body .truth-grid,
  .article-body .comparison,
  .article-body .obligations,
  .article-body .strip,
  .article-body .series-method,
  .article-body .rule-switches,
  .article-body .reason-grid,
  .article-body .prep-grid,
  .article-body .channel-grid,
  .article-body .cost-body,
  .article-body .start-grid,
  .article-body .cards{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .article-content .toolbar,
  .article-body .toolbar,
  .article-content .timeline-head,
  .article-body .timeline-head,
  .article-content .risk-map-head,
  .article-body .risk-map-head{
    align-items:stretch!important;
    flex-direction:column!important;
  }

  .article-content a.button,
  .article-content .button,
  .article-content .article-side-button,
  .article-body a.button,
  .article-body .button{
    min-height:var(--ktlg-mobile-tap)!important;
    justify-content:center;
  }

  .article-faq details{
    padding:16px!important;
  }
}

@media (max-width:520px){
  :root{
    --ktlg-mobile-gutter:14px;
  }

  .blog-hero h1{
    font-size:clamp(2.2rem,13vw,3.35rem)!important;
  }

  .article-hero h1{
    font-size:clamp(2rem,11.5vw,3.05rem)!important;
  }

  .article-breadcrumbs{
    display:flex!important;
    max-width:100%!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
    scrollbar-width:none;
  }

  .article-breadcrumbs::-webkit-scrollbar{
    display:none;
  }

  .article-meta{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
  }

  .blog-card-body,
  .sidebar-box,
  .sidebar-newsletter,
  .sidebar-tool,
  .article-side-box,
  .side-widget{
    padding:16px!important;
  }

  .blog-pagination{
    gap:6px!important;
    overflow-x:auto;
    padding-bottom:4px;
  }

  .blog-pagination button,
  .blog-pagination a{
    min-width:44px!important;
    min-height:44px!important;
  }

  .article-content .section-head,
  .article-body .section-head,
  .article-content .card-top,
  .article-body .card-top,
  .article-content .group-head,
  .article-body .group-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
}