/* Suzaye Man v21.10.2.135 — responsive image height + compact mayor UI */

/* Keep the approved v134 visuals, but give every category/service image a taller 4:3 window.
   No blur/thumbnail background; approved image itself fills the card. */
#homeCategoryGrid .home-service-image,
#browserCategoryGrid .category-image-card>img,
#browserCategoryGrid .category-visual-fallback,
#browserServiceGrid .service-card-image,
#browserServiceGrid .service-card-fallback{
  width:100%!important;
  height:auto!important;
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  object-position:center!important;
  background:#f7fafc!important;
  filter:none!important;
  transform:none!important;
}

/* Slightly taller, still balanced cards on both desktop and mobile. */
@media (min-width:901px){
  #homeCategoryGrid .home-service-card>div,
  #browserCategoryGrid .category-image-card>div{padding-top:11px!important;padding-bottom:13px!important}
  #browserServiceGrid .service-list-card.visual>div{min-height:82px!important;padding-top:11px!important;padding-bottom:13px!important}
}
@media (max-width:900px){
  #homeCategoryGrid .home-service-card>div,
  #browserCategoryGrid .category-image-card>div{padding-top:7px!important;padding-bottom:9px!important}
  #browserServiceGrid .service-list-card.visual>div{min-height:58px!important;padding-top:7px!important;padding-bottom:9px!important}
}

/* Mayor account navigation: reduce long vertical menu. */
#accountContent.mayor-account-mode>.account-sidebar{padding:10px!important}
#accountContent.mayor-account-mode .account-sidebar nav{gap:3px!important;margin-top:8px!important}
#accountContent.mayor-account-mode .account-sidebar nav>[data-account-tab],
#accountContent.mayor-account-mode .account-sidebar nav>#accountWpDashboardNav{
  min-height:34px!important;
  padding:5px 8px!important;
  font-size:10px!important;
  line-height:1.45!important;
}
#accountContent.mayor-account-mode .account-sidebar nav>.danger{
  min-height:34px!important;
  padding:5px 8px!important;
  margin-top:4px!important;
}

/* Mayor delayed-case alert: same information, much more compact. */
.mayor105-delay-card{
  grid-template-columns:40px minmax(0,1fr) auto!important;
  gap:10px!important;
  padding:10px 13px!important;
  border-radius:15px!important;
  margin:0!important;
  min-height:0!important;
}
.mayor105-delay-card>i{width:40px!important;height:40px!important}
.mayor105-delay-card svg{width:20px!important;height:20px!important}
.mayor105-delay-card div{gap:1px!important}
.mayor105-delay-card small{font-size:9px!important;line-height:1.5!important}
.mayor105-delay-card b{font-size:16px!important;line-height:1.55!important}
.mayor105-delay-card span{font-size:9.5px!important;line-height:1.55!important}
.mayor105-delay-card em{font-size:10px!important;line-height:1.5!important}

@media (max-width:760px){
  /* Two compact columns on phones so the mayor menu no longer makes a very long page. */
  #accountContent.mayor-account-mode .account-sidebar nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;
    border:0!important;
    overflow:visible!important;
    background:transparent!important;
  }
  #accountContent.mayor-account-mode .account-sidebar nav>[data-account-tab],
  #accountContent.mayor-account-mode .account-sidebar nav>#accountWpDashboardNav{
    justify-content:center!important;
    text-align:center!important;
    min-height:36px!important;
    padding:6px!important;
    border:1px solid #e1eaf2!important;
    border-radius:10px!important;
    font-size:9px!important;
  }
  #accountContent.mayor-account-mode .account-sidebar nav>.danger{
    grid-column:1/-1!important;
    border:1px solid #f0dadd!important;
    border-radius:10px!important;
    text-align:center!important;
  }
  .mayor105-delay-card{
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:8px!important;
    padding:9px 10px!important;
    border-radius:14px!important;
  }
  .mayor105-delay-card>i{width:34px!important;height:34px!important}
  .mayor105-delay-card b{font-size:14px!important}
  .mayor105-delay-card small{font-size:8.5px!important}
  .mayor105-delay-card span{font-size:8.5px!important}
  .mayor105-delay-card em{
    grid-column:1/-1!important;
    padding-top:5px!important;
    border-top:1px solid #fecaca!important;
    text-align:center!important;
    font-size:9px!important;
  }
}

/* ===== v21.10.2.136 — full approved artwork + compact all account menus ===== */
/* The approved illustrations contain important artwork near the lower edge.
   Show the whole artwork instead of cropping it. */
#homeCategoryGrid .home-service-image,
#browserCategoryGrid .category-image-card>img,
#browserServiceGrid .service-card-image{
  aspect-ratio:4/3!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#f8fbfd!important;
}
@media (min-width:901px){
  #homeCategoryGrid .home-service-image,
  #browserCategoryGrid .category-image-card>img,
  #browserServiceGrid .service-card-image{aspect-ratio:5/4!important}
}

/* Compact navigation for every staff/manager account, not mayor only. */
#accountContent.staff-account-mode>.account-sidebar{padding:10px!important}
#accountContent.staff-account-mode .account-sidebar nav{gap:4px!important;margin-top:8px!important}
#accountContent.staff-account-mode .account-sidebar nav>[data-account-tab],
#accountContent.staff-account-mode .account-sidebar nav>#accountWpDashboardNav{
  min-height:34px!important;padding:6px 9px!important;font-size:10px!important;line-height:1.45!important
}
#accountContent.staff-account-mode .account-sidebar nav>.danger{min-height:34px!important;padding:6px 9px!important;margin-top:4px!important}

/* Large urgent/delay warning cards: compact consistently wherever they appear. */
.mayor105-delay-card,.delay-alert-card,.urgent-alert-card{
  min-height:0!important;padding:10px 13px!important;border-radius:15px!important;gap:10px!important
}
@media (max-width:760px){
  #accountContent.staff-account-mode .account-sidebar nav{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:5px!important;overflow:visible!important
  }
  #accountContent.staff-account-mode .account-sidebar nav>[data-account-tab],
  #accountContent.staff-account-mode .account-sidebar nav>#accountWpDashboardNav{
    justify-content:center!important;text-align:center!important;min-height:36px!important;
    padding:6px!important;border-radius:10px!important;font-size:9px!important
  }
  #accountContent.staff-account-mode .account-sidebar nav>.danger{grid-column:1/-1!important;text-align:center!important}
}