/* EDUHUNT R428 — PRINCIPAL PORTAL ONLY
   Mobile + tablet main hub card spacing repair.
   Purpose: keep every hub card physically separate with a real gap.
   Desktop is untouched. */

@media (max-width:1024px){
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:auto !important;
    column-gap:10px !important;
    row-gap:14px !important;
    gap:14px 10px !important;
    align-items:stretch !important;
    align-content:start !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item{
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    transform:none !important;
    float:none !important;
    clear:none !important;
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:98px !important;
    height:98px !important;
    margin:0 !important;
    padding:9px 5px !important;
    box-sizing:border-box !important;
    border-radius:12px !important;
    align-self:stretch !important;
    justify-self:stretch !important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item:hover,
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item:active,
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item:focus{
    transform:none !important;
  }

  /* Keep the information panel below the cards, never pulled into their grid. */
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-people-login-guide{
    position:relative !important;
    clear:both !important;
    margin-top:14px !important;
  }
}

@media (max-width:560px){
  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-grid{
    column-gap:8px !important;
    row-gap:12px !important;
    gap:12px 8px !important;
  }

  body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item{
    min-height:94px !important;
    height:94px !important;
    padding:8px 4px !important;
  }
}

/* Physical-mobile mode can retain a wider CSS viewport. Apply the same gap. */
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;
  grid-auto-flow:row !important;
  column-gap:8px !important;
  row-gap:12px !important;
  gap:12px 8px !important;
  align-items:stretch !important;
  align-content:start !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
}
html.eh-force-mobile body[data-portal-role="PRINCIPAL"] .principal-mobile-hub .principal-hub-item{
  position:relative !important;
  inset:auto !important;
  transform:none !important;
  width:100% !important;
  min-width:0 !important;
  min-height:94px !important;
  height:94px !important;
  margin:0 !important;
  padding:8px 4px !important;
  box-sizing:border-box !important;
}