/**
 * Charta 4.4.6 — laptop compatibility layer with exact digital-human aspect ratio.
 * Targets common notebook widths (1024–1440px) and short viewport heights.
 */

@media (min-width:981px) and (max-width:1440px){
  html,body,.wp-site-blocks{min-width:0!important;max-width:100%!important;overflow-x:clip!important;}
  body *{box-sizing:border-box;}
  :where(.site-content,.wp-block-post-content,.post-wrapper,.sidebar-wrapper,.clc-center,.clc-learning-app,.clc-teacher-front,.clc-role-portal,.clc-case-gallery,.clc-content-hub,.charta-company-page){min-width:0!important;}

  /* Header: preserve readable proportions instead of squeezing every label. */
  :is(.site-header,.charta-header-shell) .charta-header-row{
    width:calc(100% - 24px)!important;
    max-width:1380px!important;
    min-width:0!important;
    margin-inline:auto!important;
    column-gap:12px!important;
    row-gap:10px!important;
    grid-template-columns:minmax(180px,230px) max-content minmax(0,1fr)!important;
  }
  :is(.site-header,.charta-header-shell) .charta-header-brand,
  :is(.site-header,.charta-header-shell) .charta-header-brand:has([data-charta-brand-logo]){
    width:100%!important;
    min-width:0!important;
    max-width:230px!important;
    margin:0!important;
  }
  :is(.site-header,.charta-header-shell) [data-charta-brand-logo],
  :is(.site-header,.charta-header-shell) [data-charta-brand-logo] img,
  :is(.site-header,.charta-header-shell) .wp-block-site-logo img{
    max-width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }
  :is(.site-header,.charta-header-shell) .charta-header-actions--structured{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:minmax(0,1fr) max-content max-content!important;
    column-gap:10px!important;
  }
  :is(.site-header,.charta-header-shell) [data-charta-header-nav-zone]{min-width:0!important;overflow:hidden!important;}
  :is(.site-header,.charta-header-shell) [data-charta-header-nav-zone] .wp-block-navigation__container{
    gap:8px!important;
    min-width:0!important;
  }
  :is(.site-header,.charta-header-shell) [data-charta-header-nav-zone] .wp-block-navigation-item__content{
    font-size:11.5px!important;
    white-space:nowrap!important;
  }
  :is(.site-header,.charta-header-shell) .charta-company-header-menu>summary,
  :is(.site-header,.charta-header-shell) .charta-header-bbs-button,
  :is(.site-header,.charta-header-shell) .charta-header-member-button,
  :is(.site-header,.charta-header-shell) .charta-header-account-link{
    min-height:40px!important;
    padding-inline:10px!important;
    font-size:12px!important;
  }

  /* Global containers keep safe gutters and never use viewport overflow. */
  .site-content,
  body:has(.clc-center) main,
  body:has(.clc-case-gallery) main,
  body:has(.clc-content-hub) main{
    width:100%!important;
    max-width:100%!important;
    padding-inline:12px!important;
  }
  .clc-center,.clc-learning-app,.clc-teacher-front,.clc-role-portal,
  .clc-case-gallery,.clc-content-hub{
    width:100%!important;
    max-width:calc(100vw - 24px)!important;
    margin-inline:auto!important;
  }

  /* Learning/teacher workspaces: use two columns, rail below the main area. */
  .clc-learning-app .clc-app-shell,
  .clc-center .clc-app-shell{
    grid-template-columns:210px minmax(0,1fr)!important;
    grid-template-areas:"sidebar main" "sidebar rail"!important;
    column-gap:16px!important;
    row-gap:16px!important;
  }
  .clc-learning-app .clc-app-sidebar,.clc-center .clc-app-sidebar{grid-area:sidebar!important;min-width:0!important;}
  .clc-learning-app .clc-app-workspace,.clc-center .clc-app-workspace{grid-area:main!important;min-width:0!important;}
  .clc-learning-app .clc-app-rail,.clc-center .clc-app-rail{
    grid-area:rail!important;
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .clc-teacher-shell,.clc-role-shell,.clc-role-portal .clc-role-shell{
    grid-template-columns:minmax(0,1fr)!important;
    gap:16px!important;
  }
  .clc-teacher-rail,.clc-role-rail{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    margin-top:0!important;
  }

  /* Public cards use fewer, wider columns on notebook screens. */
  .clc-case-gallery__grid,.clc-library-grid,.clc-content-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:18px!important;
  }
  .charta-company-page .charta-grid--5,
  .charta-company-page .charta-grid--6{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .charta-company-page .charta-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .charta-company-page--contact .charta-split-card{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)!important;
    gap:24px!important;
  }
  .charta-company-page .charta-hero-card{
    grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr)!important;
    gap:24px!important;
    padding:clamp(34px,4vw,52px)!important;
  }

  /* Footer avoids four cramped columns. */
  .charta-education-footer-directory{
    grid-template-columns:minmax(260px,1.25fr) repeat(2,minmax(170px,1fr))!important;
    column-gap:28px!important;
  }
  .charta-education-footer-directory article:last-child{grid-column:2/4!important;}

  /* Digital assistant: preserve 2:3 character ratio; never stretch. */
  .charta-digital-assistant{
    right:14px!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    max-width:min(350px,calc(100vw - 28px))!important;
  }
  .charta-digital-assistant__figure{
    width:clamp(132px,12vw,165px)!important;
    height:auto!important;
    aspect-ratio:210/307!important;
    min-width:0!important;
    max-width:165px!important;
  }
  .charta-digital-assistant__stage{width:100%!important;height:100%!important;inset:0!important;}
  .charta-digital-assistant__pose{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    object-fit:contain!important;
    object-position:center bottom!important;
  }
  .charta-digital-assistant__mouth-frame{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;}
  .charta-digital-assistant__bubble{
    width:min(320px,calc(100vw - 32px))!important;
    max-width:320px!important;
    padding:14px 15px 15px!important;
    gap:10px!important;
  }
  .charta-digital-assistant__bubble-text{font-size:13px!important;line-height:1.62!important;}
}

/* Common 1366×768 / 1280×800 notebooks: reduce vertical occupation. */
@media (min-width:981px) and (max-width:1440px) and (max-height:860px){
  :is(.site-header,.charta-header-shell) .charta-header-row{min-height:64px!important;}
  .charta-education-topbar{display:none!important;}
  .charta-digital-assistant__figure{width:138px!important;max-width:138px!important;}
  .charta-digital-assistant__bubble{
    max-height:42vh!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
  }
  .charta-digital-assistant__actions{gap:7px!important;}
  .charta-digital-assistant__action{min-height:32px!important;padding-inline:11px!important;font-size:11px!important;}
}

/* When notebook width becomes tight, switch the main navigation to its menu
 * button before labels are squeezed or wrapped. */
@media (min-width:981px) and (max-width:1280px){
  :is(.site-header,.charta-header-shell) .charta-header-row{
    grid-template-columns:minmax(170px,215px) max-content minmax(0,1fr)!important;
  }
  :is(.site-header,.charta-header-shell) [data-charta-header-nav-zone]{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    width:auto!important;
  }
  :is(.site-header,.charta-header-shell) [data-charta-header-nav-zone] .wp-block-navigation__responsive-container-open{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:40px!important;
    height:40px!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:10px!important;
    color:#fff!important;
    background:rgba(255,255,255,.055)!important;
  }
  :is(.site-header,.charta-header-shell) [data-charta-header-nav-zone] .wp-block-navigation__responsive-container:not(.is-menu-open){display:none!important;}
  :is(.site-header,.charta-header-shell) .charta-header-actions--structured{
    grid-template-columns:max-content max-content max-content!important;
    justify-content:end!important;
  }
  :is(.site-header,.charta-header-shell) .charta-header-bbs-button__label{display:none!important;}
  :is(.site-header,.charta-header-shell) .charta-header-bbs-button{
    width:42px!important;
    min-width:42px!important;
    padding:0!important;
  }
  .clc-learning-app .clc-app-shell,.clc-center .clc-app-shell{
    grid-template-columns:190px minmax(0,1fr)!important;
    gap:14px!important;
  }
  .clc-case-gallery__grid,.clc-library-grid,.clc-content-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .charta-company-page .charta-hero-card{grid-template-columns:1fr!important;}
  .charta-company-page--contact .charta-split-card{grid-template-columns:1fr!important;}
  .charta-education-footer-directory{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .charta-education-footer-directory .is-brand{grid-column:1/-1!important;max-width:none!important;}
  .charta-education-footer-directory article:last-child{grid-column:auto!important;}
}

/* 4.4.7 — center layout stability for notebooks and tablets */
@media (min-width:768px) and (max-width:1600px){
  body:has(.clc-learning-app) .site-content,
  body:has(.clc-teacher-front) .site-content,
  body:has(.clc-role-portal) .site-content{
    width:100%!important;
    max-width:100%!important;
    padding-inline:clamp(8px,1.4vw,20px)!important;
    overflow:visible!important;
  }
  body:has(.clc-learning-app) .wp-block-post-content,
  body:has(.clc-teacher-front) .wp-block-post-content,
  body:has(.clc-role-portal) .wp-block-post-content{
    width:100%!important;
    max-width:none!important;
    margin-inline:auto!important;
  }
  :where(.clc-learning-app,.clc-teacher-front,.clc-role-portal,.clc-app-shell,.clc-teacher-shell,.clc-role-shell)>*{
    min-width:0!important;
    max-width:100%!important;
  }
  :where(.clc-learning-app,.clc-teacher-front,.clc-role-portal) img{
    max-width:100%!important;
    height:auto!important;
  }
  :where(.clc-learning-app,.clc-teacher-front,.clc-role-portal) iframe,
  :where(.clc-learning-app,.clc-teacher-front,.clc-role-portal) video{
    max-width:100%!important;
  }
}
@media (min-width:768px) and (max-width:1023px){
  body:has(.clc-learning-app) .site-content,
  body:has(.clc-teacher-front) .site-content,
  body:has(.clc-role-portal) .site-content{padding-inline:8px!important;}
  .clc-learning-app,.clc-teacher-front,.clc-role-portal{width:100%!important;max-width:100%!important;margin-inline:auto!important;}
}