/* hero-mobile.css — the hero for every screen BELOW FULL DESKTOP, a separate section (#al-mhero).
   Ron, 2026-11-04: "headline fits on two lines max, static above image carousel, 20px below
   headline then image then the one-liner slogan in gold below that, as big as possible, 20px
   between elements … without affecting desktop."
   Ron, 2026-11-04: "anything sub full desktop it should do mobile layout" — so the query is
   any screen up to 1200px wide in either orientation, plus touch tablets up to 1400px
   (iPad Pro landscape). Full desktop keeps #autoledger-hero exactly as it is.
   Sizes marked var(--mh-*) are measured by hero-mobile.js; the values here are the
   pre-script fallbacks.
   Ron, 2026-11-04: "patchwork of font sizes … line by line, same font size, stack two tall and
   fade up; missing arrows" — one size, two-line slot, prominent arrows. */
#al-mhero{display:none}
@media (max-width:1200px), (hover:none) and (pointer:coarse) and (max-width:1400px){
  #autoledger-hero{display:none!important}
  #al-mhero{
    display:block;position:relative;overflow:clip;isolation:isolate;
    min-height:100vh;min-height:100svh;  /* reserve the first screen before hero-mobile.js measures, so content below does not jump (2026-11-07) */
    background:#050507;
    padding:var(--mh-top,100px) 20px 10px  /* 10px under the text lines (Ron 2026-11-04) */
  }
  #al-mhero .mh-title{
    margin:0;height:var(--mh-title-h,auto);
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    text-align:center;
    font-family:"Bodoni Moda","Cormorant Garamond",Georgia,serif;
    font-style:normal;font-weight:700;
    font-size:var(--mh-title-size,48px);line-height:1.04
  }
  #al-mhero .mh-title .gold{display:block;white-space:nowrap}
  /* full-bleed picture (cancels the 20px gutter); on short landscape screens the script
     narrows it (.mh-inset) so the gold text keeps its room */
  #al-mhero .mh-frame{
    position:relative;margin:20px -20px 0;aspect-ratio:16/9;
    overflow:hidden;background:#050507;touch-action:pan-y;
    transform:translateY(var(--mh-nudge,0px))  /* portrait nudge, set by the script */
  }
  #al-mhero.mh-inset .mh-frame{width:var(--mh-frame-w);max-width:100%;margin:20px auto 0}
  #al-mhero .mh-frame img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center;opacity:0
  }
  #al-mhero .mh-frame img.on{opacity:1}
  /* one gold size per screen; the slot is exactly two lines tall and each pair fades up */
  #al-mhero .mh-text{
    margin:20px 0 0;height:var(--mh-text-h,auto);
    display:flex;align-items:center;justify-content:center;
    text-align:center;overflow:hidden;cursor:pointer
  }
  #al-mhero .mh-beat{
    margin:0;max-width:100%;
    font-family:var(--serif);font-weight:600;
    font-size:var(--mh-beat-size,27px);line-height:var(--mh-beat-lh,34px);color:var(--gold-1,#c9a96e)
  }
  #al-mhero .mh-beat .ln{display:block;white-space:nowrap}
  /* carousel arrows: clear gold buttons on the picture edges */
  #al-mhero .mh-arrow{
    position:absolute;top:50%;z-index:5;transform:translateY(-50%);
    width:44px;height:44px;display:grid;place-items:center;
    padding:0;border:1px solid rgba(201,169,110,.75);border-radius:50%;
    background:rgba(5,5,7,.6);color:var(--gold-1,#c9a96e);cursor:pointer;
    -webkit-tap-highlight-color:transparent
  }
  #al-mhero .mh-arrow svg{width:18px;height:24px;display:block;pointer-events:none}
  #al-mhero .mh-arrow path{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
  #al-mhero .mh-prev{left:10px}
  #al-mhero .mh-next{right:10px}
}
@media (prefers-reduced-motion:reduce){
  #al-mhero .shimmer{animation:none}
}