/**
 * Here, Mostly — homepage hero (theme-owned).
 * Display art: hero-display.png (trimmed from approved hero.png, no layout whitespace).
 * Desktop: full-scene band ~90vh, cover (reference #book-background + 1600×923 art).
 * Mobile: full-scene artwork, contain (complete illustration, no crop).
 */

.hm-hero {
  box-sizing: border-box;
  width: 80%;
  max-width: none;
  margin-inline: auto;
  padding: 0 0 clamp(8px, 2vw, 16px);
  background: #fff;
}

/* Desktop / tablet landscape — match reference full-width hero band (min-width: 768px) */
@media (min-width: 768px) {
  .hm-hero {
    width: 100%;
    max-width: none;
    margin-inline: auto;
  }

  .hm-hero,
  .hm-hero.hm-elementor-hero-block {
    padding-bottom: clamp(4px, 0.8vw, 10px);
  }

  /*
   * Full-bleed hero: escape .hm-main side padding (staging landing shortcode path).
   */
  body.home .hm-main.hm-front-page section.hm-hero.hm-elementor-hero-block,
  .hm-landing > section.hm-hero.hm-elementor-hero-block {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
  }

  .hm-hero.hm-elementor-hero-block .hm-hero-figure {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .hm-hero.hm-elementor-hero-block .hm-hero-picture {
    display: block;
    width: 100%;
    line-height: 0;
  }

  /*
   * Full-scene PNG (1600×923) has ~134px transparent/white band above artwork; 14.5% skips it.
   * Reserve ~7.5rem below viewport for header clearance + RTB + gap so the button is not clipped.
   */
  .hm-hero.hm-elementor-hero-block .hm-hero-art {
    width: 100%;
    height: min(calc(100vh - 7.5rem), 820px);
    max-height: calc(100vh - 7.5rem);
    object-fit: cover;
    object-position: center 14.5%;
    aspect-ratio: auto;
  }

  .elementor-103 .elementor-element.elementor-element-3d7d04e2,
  #book-background,
  .elementor-element.elementor-element-3d7d04e2 {
    width: 100% !important;
    max-width: 100% !important;
    min-height: min(calc(100vh - 7.5rem), 820px) !important;
    max-height: calc(100vh - 7.5rem) !important;
    background-image: var(--hm-hero-desktop-artwork-url, var(--hm-hero-mobile-artwork-url)) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center 14.5% !important;
  }

  body.admin-bar .elementor-103 .elementor-element.elementor-element-3d7d04e2,
  body.admin-bar #book-background,
  body.admin-bar .elementor-element.elementor-element-3d7d04e2 {
    min-height: calc(min(calc(100vh - 7.5rem), 820px) - var(--wp-admin--admin-bar--height, 32px)) !important;
    max-height: calc(100vh - 7.5rem - var(--wp-admin--admin-bar--height, 32px)) !important;
  }

  body.admin-bar .hm-hero.hm-elementor-hero-block .hm-hero-art {
    height: calc(min(calc(100vh - 7.5rem), 820px) - var(--wp-admin--admin-bar--height, 32px));
    max-height: calc(100vh - 7.5rem - var(--wp-admin--admin-bar--height, 32px));
  }

}

.hm-hero-figure {
  margin: 0;
  padding: 0;
  line-height: 0;
  width: 100%;
  max-width: none;
}

.hm-hero-art {
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
  margin: 0 auto;
}

.hm-hero-art--missing {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8eef5;
  color: #456;
  font-size: 0.95rem;
  padding: 24px;
  line-height: 1.4;
  width: 100%;
  max-width: none;
}

.hm-hero-read {
  display: flex;
  justify-content: center;
  margin-top: clamp(10px, 2.2vw, 18px);
  padding-bottom: 4px;
}

.hm-hero-read .hm-rtb-wrap {
  position: relative;
  display: inline-block;
}

.hm-elementor-hero-block {
  width: 100%;
  max-width: none;
}

.elementor-element.hm-elementor-hero-block,
.elementor-element.hm-elementor-hero-block.e-con {
  --content-width: 100%;
  --container-max-width: 100%;
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.elementor-element.hm-elementor-hero-block > .e-con-inner {
  max-width: none !important;
  width: 100% !important;
  justify-content: center !important;
}

.elementor-element.hm-elementor-hero-block .elementor-widget-shortcode {
  width: 100%;
  max-width: none;
}

.elementor-element.hm-elementor-hero-block .elementor-shortcode {
  width: 100%;
  max-width: none;
}

@media (max-width: 767px) {
  /*
   * Mobile hero band: one viewport of book art only.
   * Connect / Share / Contact live in the next container (.hm-cta-grid) — still on page, below the fold.
   */
  :root {
    --hm-mobile-book-cta-gap: clamp(12px, 2.8vw, 16px);
    /* Full scene 1600×923 — show entire illustration on narrow viewports. */
    --hm-mobile-scene-width: min(100%, calc(100vw - 24px));
    --hm-mobile-hero-aspect: 1600 / 923;
    /* Read button width tracks hero art width (legacy var name). */
    --hm-mobile-book-width: var(--hm-mobile-scene-width);
  }

  /*
   * Hero viewport band — two live layouts:
   * 1) Elementor home: outer .e-con.e-parent wrapper
   * 2) [heremostly_landing] shortcode (public project.devshujon.com): section.hm-hero only
   */
  /*
   * Reference (BeTheme #book-background): compact hero band ~590px tall at 390px width,
   * book background centered — not a full viewport empty column before CTAs.
   */
  .elementor-element.hm-elementor-hero-block.e-con.e-parent {
    min-height: 0 !important;
    height: auto !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    --padding-top: 0px;
    --padding-bottom: 0px;
    --padding-left: 0px;
    --padding-right: 0px;
    --min-height: 0px;
    box-sizing: border-box;
    overflow: visible;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /*
   * Shortcode / landing hero: compact band — full-scene art with cover (reference mobile).
   */
  .hm-landing > section.hm-hero.hm-elementor-hero-block,
  body.home .hm-main section.hm-hero.hm-elementor-hero-block {
    min-height: 0 !important;
    height: auto;
    margin-bottom: var(--hm-mobile-book-cta-gap) !important;
    padding: max(4px, env(safe-area-inset-top, 0px)) 0 0 !important;
    box-sizing: border-box;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  body.admin-bar .elementor-element.hm-elementor-hero-block.e-con.e-parent {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Landing shortcode path: theme .hm-main padding + .hm-landing side padding */
  body.home .hm-main.hm-front-page,
  .hm-landing {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hm-hero {
    position: static;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
  }

  .hm-hero-image-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    line-height: 0;
  }

  /*
   * Mobile hero art — full-scene via <picture> + #book-background; contain (no crop).
   */
  .hm-hero-figure {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: clamp(2px, 1vw, 6px) 0;
    box-sizing: border-box;
  }

  .hm-hero-picture {
    display: block;
    width: var(--hm-mobile-scene-width);
    max-width: 100%;
    margin: 0 auto;
    line-height: 0;
    overflow: visible;
  }

  /* Full-scene 1600×923 — entire illustration visible (may appear smaller on narrow screens). */
  .hm-hero-art {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    object-position: center top;
    aspect-ratio: var(--hm-mobile-hero-aspect);
  }

  .elementor-element.hm-elementor-hero-block.e-con {
    margin-bottom: 0;
    padding: 0;
    --padding-left: 0px;
    --padding-right: 0px;
  }

  .elementor-element.hm-elementor-hero-block > .e-con-inner {
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
    min-height: inherit;
    flex: 1 1 auto;
    align-items: stretch !important;
  }

  .elementor-element.hm-elementor-hero-block .elementor-widget-shortcode,
  .elementor-element.hm-elementor-hero-block .elementor-shortcode {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: none;
  }

  .hm-hero-read {
    display: flex !important;
    justify-content: center;
    align-self: center;
    width: 100%;
    max-width: var(--hm-mobile-book-width);
    margin-top: clamp(8px, 2.2vw, 14px) !important;
    margin-inline: auto;
    margin-bottom: 0;
    padding-bottom: clamp(4px, 1vw, 8px);
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  .hm-hero-read .hm-rtb-wrap,
  .hm-elementor-hero-block .hm-rtb-wrap {
    display: inline-block !important;
  }

  .hm-hero-read .hm-rtb-btn,
  .hm-elementor-hero-block .hm-rtb-btn,
  #book-background .hm-rtb-btn,
  #book-background #rtb-btn {
    display: inline-flex !important;
  }

  /*
   * Elementor page 103 / reference layout: background book container + inline RTB HTML widget.
   * IDs/classes from live Elementor (do not edit post CSS in Elementor).
   */
  .elementor-103 .elementor-element.elementor-element-3d7d04e2,
  #book-background,
  .elementor-element.elementor-element-3d7d04e2 {
    width: var(--hm-mobile-scene-width) !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: var(--hm-mobile-hero-aspect);
    max-height: none;
    box-sizing: border-box;
    background-image: var(--hm-hero-desktop-artwork-url, var(--hm-hero-mobile-artwork-url)) !important;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #fff;
  }

  body.admin-bar .elementor-103 .elementor-element.elementor-element-3d7d04e2,
  body.admin-bar #book-background,
  body.admin-bar .elementor-element.elementor-element-3d7d04e2 {
    min-height: 0 !important;
  }

  #book-background #rtb-wrap,
  .elementor-element-3d7d04e2 #rtb-wrap {
    display: inline-block !important;
  }
}

/*
 * Desktop: positive gap only — button sits below the hero band, never over the illustration.
 * (Must follow base .hm-hero-read; do not use negative margin on .hm-hero-read.)
 */
@media (min-width: 768px) {
  .hm-hero-read {
    /* Beat legacy inline -10% width-based margin on staging Elementor/landing markup. */
    margin-top: clamp(8px, 0.6vw, 12px) !important;
    padding-bottom: clamp(6px, 1vw, 12px);
  }
}