/* mobile-hislife.css — His Life timeline page mobile overrides (max-width: 768px)
   Desktop: 1440px absolute canvas with fit-canvas zoom (zoom ≈ 0.27 at 390px).
   Mobile: cancel zoom, hide year sidebar, shift all columns into 390px viewport.
   Strategy: leave inline top: values untouched (vertical order preserved).
             Override only left, width, height, font-size via !important. */

@media (max-width: 768px) {

  /* ── WRAPPER: cancel zoom, full width ────────────────────── */
  .hl-wrap {
    zoom: 1 !important;
    width: 100% !important;
    min-height: 100vh !important;    /* fallback before JS runs (JS overrides with style.height) */
    overflow-x: hidden !important;
    overflow-y: hidden !important;   /* clips abs-positioned elements at large top values from extending page */
  }

  /* Hide non-timeline images inside wrap (SpringerNature logo at top:23993px) */
  .hl-wrap > img:not(.hl-photo) { display: none !important; }

  /* ── HERO: hide decorative elements ──────────────────────── */
  .hl-amber-circle { display: none !important; }
  .hl-hero-line    { display: none !important; }
  .hl-era          { display: none !important; }

  /* ── HERO: portrait top-left, title + subtitle below it ──── */
  .hl-portrait {
    top: 16px !important;
    left: 20px !important;
    width: 120px !important;
    height: 120px !important;
  }

  .hl-title {
    top: 148px !important;
    left: 20px !important;
    width: calc(100% - 40px) !important;
    font-size: 32px !important;
    white-space: normal !important;
  }

  .hl-subtitle {
    top: 196px !important;
    left: 20px !important;
    width: calc(100% - 40px) !important;
    font-size: 18px !important;
  }

  /* ── YEAR SIDEBAR: hide completely ───────────────────────── */
  .hl-year-col { display: none !important; }

  /* ── DECORATIVE LEFT STRIPS: hide ────────────────────────── */
  .hl-lstrip { display: none !important; }

  /* ── SPINE: hide (24200px tall — causes gigantic scroll gap) */
  .hl-spine-dot { display: none !important; }
  .hl-spine     { display: none !important; }

  /* ── YEAR LABELS: compact, content column ────────────────── */
  .hl-year {
    left: 48px !important;
    font-size: 32px !important;
    line-height: 1 !important;
  }

  /* ── AMBER DOTS ───────────────────────────────────────────── */
  .hl-dot {
    left: 7px !important;
    width: 26px !important;
    height: 26px !important;
  }

  /* ── CONNECTOR LINES ──────────────────────────────────────── */
  .hl-vline  { left: 22px !important; }
  /* bbline (amber vertical in blue bands) overlaps text on mobile — hide */
  .hl-bbline { display: none !important; }

  /* ── HORIZONTAL RULES: full width ────────────────────────── */
  .hl-hline {
    left: 0 !important;
    width: 100% !important;
  }

  /* ── BLUE BANDS: full width ───────────────────────────────── */
  .hl-band {
    left: 0 !important;
    width: 100% !important;
  }

  /* ── EVENT TEXT: larger font, full remaining width ────────── */
  .hl-event {
    left: 48px !important;
    width: calc(100% - 60px) !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
  }

  /* Suppress decorative <br> tags used on desktop to space
     event text around adjacent photos */
  .hl-event br { display: none !important; }

  /* ── BLUE BAND TEXT: above photo via z-index ─────────────── */
  .hl-bbtext {
    left: 20px !important;
    width: calc(100% - 40px) !important;
    font-size: 18px !important;
    line-height: 1.55 !important;
    z-index: 3 !important;
  }

  /* ── PHOTOS: full remaining width, natural height (no cropping) */
  .hl-photo {
    left: 48px !important;
    width: calc(100% - 60px) !important;
    height: auto !important;
    max-height: none !important;
  }

  /* ── PUBLISHER LINK (book section) ───────────────────────── */
  .hl-pub-link {
    left: 48px !important;
    font-size: 18px !important;
  }

}