/* golo. — tablet and computer layout. Loaded last: below 768px nothing here applies and the phone layout stays as it is. */
/* ---------- Tablet (768px and up): the phone layout stays below; here the app uses the width ---------- */
@media (min-width:768px){
  html{zoom:1}
  .app{max-width:1000px;padding-left:12px;padding-right:12px}
  /* table: every column visible, nothing slides */
  .tbl.wide{overflow:visible}
  .tbl.wide .st,.tbl.wide .st.top{grid-template-columns:52px minmax(200px,1fr) 104px repeat(7,44px) 60px;width:100%;min-width:0}
  .tbl.wide .st>.ps,.tbl.wide .st>.tm,.tbl.wide .st>.p{position:static;box-shadow:none}
  .tbl.simple .st,.tbl.simple .st.top{grid-template-columns:44px minmax(0,1fr) 50px 80px 56px}
  .tbl .st .tm b{font-size:16px}
  .st .fm i{width:20px;height:20px;font-size:10.5px}
  /* games in two columns; numbers in three */
  .group{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .group>:not(.fx){grid-column:1/-1}
  .group>.fx:nth-child(even){border-right:1px solid var(--hair)}
  .group-h+.fx+.fx{border-top:0}
  .group>.fx:only-of-type{grid-column:1/-1;border-right:0}
  .bubbles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cta+.cta{margin-top:10px}
}
/* bigger tablets and computers: Gestão uses its wide layout on its own */
@media (min-width:1024px){
  body:not(.ck-mode) .app:has(.adm-cols,.adm-tiles,.adm-games){max-width:1280px;padding-left:24px;padding-right:24px}
  .adm-cols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(340px,1fr);gap:28px;align-items:start}
  .adm-side{position:sticky;top:16px}
  .adm-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:10px;align-items:start}
  .adm-tiles{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
/* computers (1280px and up): a little smaller, wider, and the lists of cards side by side */
@media (min-width:1280px){
  html{zoom:.85}
  .app{max-width:1360px;padding-left:24px;padding-right:24px}
  .stack{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:12px;padding:0 20px;align-items:start}
  .stack>.group{margin:0}
  .stack>.group>.fx:only-of-type,.stack>.group .fx{grid-column:1/-1;border-right:0}
  .stack .group{display:block}
  .stack .group>.fx{border-right:0}
  .stack .group-h+.fx+.fx{border-top:1px solid var(--hair)}
  .bubbles{grid-template-columns:repeat(6,minmax(0,1fr))}
}