/* ============================================================
   HERO CHARACTER MOBILE FIX — 2026-05-13 (HOTFIX v2)
   ------------------------------------------------------------
   Previous version overrode position/transform/inset which
   stripped the inline transform: translate(calc(-50% + Xpx),
   calc(-50% + Ypx)) and made the image disappear on mobile.
   
   This version ONLY constrains size and lets the existing
   CSS + inline positioning handle placement. The image
   stays smaller than the circle so it visibly fits inside.
   ============================================================ */

/* Tablets and small laptops */
@media (max-width: 1024px) {
  #hero-char-img,
  .hero-character-img {
    max-width: 95% !important;
    max-height: 95% !important;
    object-fit: contain !important;
  }
  .hero-character-circle {
    overflow: hidden !important;
  }
}

/* Phones — image must be SMALLER than circle so it shows */
@media (max-width: 768px) {
  .hero-character-circle {
    width: 240px !important;
    height: 240px !important;
    overflow: hidden !important;
  }
  #hero-char-img,
  .hero-character-img {
    /* Keep image fitting inside the 240px circle */
    width: 200px !important;
    height: 200px !important;
    max-width: 200px !important;
    max-height: 200px !important;
    object-fit: contain !important;
    object-position: center top !important;
    /* Do NOT override position/transform/inset — let existing
       CSS + inline style handle centering. */
  }
}

/* Small phones */
@media (max-width: 480px) {
  .hero-character-circle {
    width: 200px !important;
    height: 200px !important;
  }
  #hero-char-img,
  .hero-character-img {
    width: 170px !important;
    height: 170px !important;
    max-width: 170px !important;
    max-height: 170px !important;
  }
}

/* Tiny phones */
@media (max-width: 360px) {
  .hero-character-circle {
    width: 170px !important;
    height: 170px !important;
  }
  #hero-char-img,
  .hero-character-img {
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
    max-height: 140px !important;
  }
}