/* SIEBIS UI Framework v2.0
   TABLET LAYER: 721px - 1100px
   This file contains tablet rules only.
*/

@media (min-width:721px) and (max-width:1100px){
  :root{
    --tablet-gutter:22px;
    --touch-size:46px;
  }

  html,
  body{
    overflow-x:hidden;
  }

  .layout{
    display:block;
    min-height:100vh;
  }

  .sidebar{
    position:fixed;
    z-index:3000;
    top:0;
    left:0;
    bottom:0;
    width:min(320px,82vw);
    height:100dvh;
    transform:translateX(-105%);
    transition:transform .25s ease;
    overflow-y:auto;
    box-shadow:22px 0 50px rgba(9,30,28,.28);
  }

  body.mobile-menu-open .sidebar{
    transform:translateX(0);
  }

  .mobile-sidebar-overlay{
    display:block;
    position:fixed;
    z-index:2990;
    inset:0;
    border:0;
    padding:0;
    background:rgba(4,20,19,.52);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
  }

  body.mobile-menu-open .mobile-sidebar-overlay{
    opacity:1;
    visibility:visible;
  }

  .main{
    width:100%;
    margin-left:0;
    padding:22px var(--tablet-gutter) 28px;
  }

  .topbar{
    min-height:62px;
    margin-bottom:18px;
    gap:12px;
  }

  .mobile-menu-button{
    display:inline-grid;
    place-items:center;
    width:var(--touch-size);
    height:var(--touch-size);
    flex:0 0 var(--touch-size);
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
    color:var(--green);
    cursor:pointer;
    box-shadow:0 8px 22px rgba(16,32,51,.08);
  }

  .mobile-menu-button svg{
    width:23px;
    height:23px;
  }

  .topbar-spacer{
    display:none;
  }

  .top-actions{
    margin-left:auto;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .hero{
    padding-top:4px;
    margin-bottom:22px;
  }

  .hero-title h2{
    font-size:46px;
  }

  .hero-title h3{
    font-size:26px;
  }

  .hero-title p{
    font-size:17px;
    margin-bottom:22px;
  }

  .hero-visual{
    height:250px;
  }

  .section{
    margin-top:18px;
  }

  .module-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }

  .module-card{
    min-height:220px;
    padding:22px;
  }

  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }

  button,
  a,
  input,
  select,
  textarea{
    touch-action:manipulation;
  }
}

@media (prefers-reduced-motion:reduce){
  .sidebar,
  .mobile-sidebar-overlay{
    transition:none;
  }
}