/* HM244 — Correct the 8:1 artwork / variable dashboard-width mismatch.
 * Previous `object-fit:contain` letterboxed the main image horizontally whenever
 * the actual dashboard slot was wider than 8:1 (e.g. 1412x140).  The 1920x240
 * WebP itself is correct; saving/re-uploading it cannot fix that CSS behavior.
 *
 * Narrow slots: show ALL of the calligraphy without changing letter shapes.
 * Wide slots: occupy the ENTIRE allotted width with proportional `cover`.
 * Only the vertical edges of the artwork can be cropped in the latter case;
 * neither horizontal bars nor stretched Arabic glyphs are introduced.
 * This named size container belongs to the image slot, not the viewport, so
 * the exact same decision is made in the dashboard AND the admin preview.
 */
body.hm185-app .app-shell .page-content .razavi-greeting-v41__message {
  container-name: hm244-banner-image;
  container-type: inline-size;
}
body.hm185-app .app-shell .page-content .razavi-greeting-v41__message > picture > img {
  display:block;
  width:100%;height:100%;max-width:none;
  object-fit:contain!important;
  object-position:50% 28%;
}
/* Fixed desktop display height=140; original aspect 1920/240=8.
 * The slot becomes wider than the image at 140*8 = 1120 CSS px.
 * CSS container queries also apply to transformed admin previews, because the
 * decision is based on their emulated layout width before visual scaling.
 */
@container hm244-banner-image (min-width: 1120px) {
  body.hm185-app .app-shell .page-content .razavi-greeting-v41__message > picture > img {
    object-fit:cover!important;
  }
}
/* Small-screen slots always protect the complete Arabic lettering.  Their
 * 88px fixed height cannot support full-bleed 8:1 artwork without cutting it.
 * Extra space is vertical (filled by the existing coordinated background).
 * The preview class is included because it can simulate mobile on desktop.
 */
body.hm185-app .app-shell .page-content .razavi-greeting-v41.banner-preview-mobile
  .razavi-greeting-v41__message > picture > img {
  object-fit:contain!important;
}
@media(max-width:760px) {
  body.hm185-app .app-shell .page-content .hm185-dashboard .razavi-greeting-v41__message > picture > img {
    object-fit:contain!important;
  }
  /* Emulated desktop keeps its own width-dependent rule on mobile. */
  @container hm244-banner-image (min-width:1120px) {
    body.hm185-app .app-shell .page-content .razavi-greeting-v41.banner-preview-desktop
      .razavi-greeting-v41__message > picture > img {
      object-fit:cover!important;
    }
  }
}

/* The editor scales a desktop-width preview into its small card.  Do not let
 * the global max-width clamp its layout width BEFORE the scale is applied.
 * Otherwise a 1520px emulated desktop becomes a 340px narrow slot on mobile,
 * producing a false preview different from the actual dashboard. */
body.hm185-app .app-shell .page-content .banner-admin-v71 .banner-preview-viewport
  .razavi-greeting-v41 {
  max-width:none!important;
}