/**
 * Location: /assets/css/home-hero-responsive.css
 * Purpose:
 * - Home Hero Slider — Force DESKTOP-like layout on tablet + mobile (same-to-same structure).
 * - ✅ Tablet: add 20px side padding.
 * - ✅ Mobile: keep 2-column (text left + image right), no stacking, no “mobile style”.
 * - ✅ Remove badge chip + green dot on mobile (per request).
 * - Visual-only overrides (no JS changes, no admin/settings impact).
 *
 * Related CSS/JS:
 * - Base CSS: /assets/css/home-hero.css
 * - JS: /assets/js/home-hero.js
 *
 * Linkage/Loader:
 * - Enqueued only on is_front_page() from /inc/enqueue.php after stm-home-hero.
 */

/* ===============================
   TABLET + MOBILE (<= 991px)
   Force desktop grid + spacing
================================ */
@media (max-width: 991px){

  /* ✅ Undo base file stacking */
  .hps-slide{
    grid-template-columns: 1.05fr .95fr !important;
    align-items: stretch !important;
  }

  /* Height similar to desktop feeling (not tall like stacked) */
  .hps-wrap{
    min-height: 240px !important;
  }

  /* ✅ Requested: 20px left/right padding */
  .hps-left{
    padding: 14px 20px !important;
    gap: 10px !important;
    transform: none !important; /* neutralize shift vars on small screens */
  }

  .hps-media{
    padding: 14px 20px !important;
    justify-content: flex-end !important; /* match desktop */
    transform: none !important;
  }

  /* Keep subtitle like desktop */
  .hps-sub{
    display: block !important;
    font-size: 13px !important;
    max-width: 52ch !important;
    margin: 0 !important;
  }

  /* Buttons: keep one row like desktop */
  .hps-actions{
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }
  .hps-btn{
    white-space: nowrap !important;
  }

  /* Image smaller but still right side */
  .hps-img{
    width: min(300px, 34vw) !important;
    border-width: 16px !important;
    border-radius: 16px !important;
  }

  /* Arrows slightly inset */
  .hps-arrow--prev{ left: 12px !important; }
  .hps-arrow--next{ right: 12px !important; }
}

/* ===============================
   MOBILE (<= 640px)
   Still desktop-like (no stacking)
   + remove badge chip + dot
================================ */
@media (max-width: 640px){

  /* ✅ Remove “label chip + green dot” on mobile */
  .hps-badge{
    display: none !important;
  }
  .hps-badge i{
    display: none !important;
  }

  /* Keep layout horizontal */
  .hps-slide{
    grid-template-columns: 1.15fr .85fr !important;
  }

  .hps-wrap{
    min-height: 220px !important;
  }

  /* Keep same padding (desktop-like breathing) */
  .hps-left{
    padding: 12px 20px !important;
    gap: 8px !important;
  }
  .hps-media{
    padding: 12px 20px !important;
    justify-content: flex-end !important;
  }

  /* Headline sizes: smaller but same structure */
  .hps-head{
    font-size: clamp(16px, 4.0vw, 22px) !important;
    line-height: 1.1 !important;
  }

  /* Subtitle kept (desktop-like) */
  .hps-sub{
    display: block !important;
    font-size: 12px !important;
    max-width: 44ch !important;
  }

  /* Buttons one row (tight) */
  .hps-actions{
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }
  .hps-btn{
    padding: 9px 12px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
  }

  /* Product meta slightly smaller */
  .hps-name{ font-size: 12px !important; }
  .hps-price{ font-size: 14px !important; }

  /* Image smaller */
  .hps-img{
    width: min(220px, 40vw) !important;
    border-width: 12px !important;
    border-radius: 14px !important;
  }

  .hps-arrow{
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
  }
}

/* ===============================
   ULTRA SMALL (<= 420px)
   Keep desktop-like but prevent overflow
================================ */
@media (max-width: 420px){

  /* still 2 columns */
  .hps-slide{
    grid-template-columns: 1.2fr .8fr !important;
  }

  /* keep padding but a bit tighter to avoid squeeze */
  .hps-left,
  .hps-media{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* keep subtitle, just shorter line */
  .hps-sub{
    max-width: 34ch !important;
  }

  /* buttons still row */
  .hps-btn{
    padding: 8px 10px !important;
    font-size: 11.5px !important;
  }

  .hps-img{
    width: min(170px, 42vw) !important;
    border-width: 10px !important;
    border-radius: 12px !important;
  }
}