/* =====================================================================
   EDUHUNT ACADEMY - PRINCIPAL PORTAL
   V2.2.235 R7 - THREE MOBILE HUB BUTTONS PER ROW
   2026-08-29

   UI ONLY.
   Applies only to Principal mobile hub navigation cards.
   No API, permission, route, database, exam, result or upload logic.
   ===================================================================== */

@media screen and (max-width:1024px){
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    align-items:stretch!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-item,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-item{
    width:100%!important;
    min-width:0!important;
    min-height:108px!important;
    padding:10px 5px!important;
    gap:8px!important;
    border-radius:14px!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-emoji,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-emoji{
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
    border-radius:12px!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-emoji svg,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-emoji svg{
    width:22px!important;
    height:22px!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-item b,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-item b{
    display:block!important;
    width:100%!important;
    margin:0!important;
    font-size:clamp(10.5px,2.65vw,12.5px)!important;
    line-height:1.18!important;
    font-weight:950!important;
    text-align:center!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    hyphens:auto!important;
  }
}

/* Keep exactly three columns even on narrow phones, while reducing card chrome. */
@media screen and (max-width:380px){
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid{
    gap:6px!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-item,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-item{
    min-height:100px!important;
    padding:8px 3px!important;
    gap:7px!important;
    border-radius:12px!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-emoji,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-emoji{
    width:38px!important;
    height:38px!important;
    flex-basis:38px!important;
    border-radius:11px!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-emoji svg,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-emoji svg{
    width:20px!important;
    height:20px!important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-item b,
  html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid .principal-hub-item b{
    font-size:10px!important;
    line-height:1.14!important;
  }
}