/*
 * Company History — HTML replica of the enkaku-*.webp timeline image.
 *
 * Scale: the source image (5000x1278) is rendered at 60.5rem height,
 * so 1 source px = 0.04734rem (1rem = 10px on the 1440px design viewport,
 * see the theme reset: font-size 0.6944vw / 2.5641vw below 768px).
 *
 * Values sampled from the original image:
 *   line/connectors   rgba(174,174,174,.55), ~2px
 *   orange            #FF521C (theme accent)
 *   bullseye          d.118px, solid ring d.72px, white center d.30px
 *   dots on the line  d.36px, white
 *   event pitch       ~470px alternating rows, ~844px same row
 *   connector→content offset 60px (2.8rem)
 */

/* Editors viewing the unpublished working copy get a visible marker. */
.hibot-history.is-preview {
  position: relative;
  outline: 2px dashed rgba(255, 82, 28, 0.6);
  outline-offset: 0.5rem;
}

.hibot-history.is-preview::after {
  content: "PREVIEW — unpublished state";
  position: absolute;
  top: -3rem;
  right: 0;
  background: #ff521c;
  color: #fff;
  font-size: 1.2rem;
  padding: 0.4rem 0.8rem;
  z-index: 5;
}

.hibot-history__viewport {
  width: 100%;
  /* Horizontal clipping only: vertically the content may touch the edges
     as in the original (e.g. the WEF logo almost reaches the bottom edge). */
  overflow: hidden;
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
}

.hibot-history__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.hibot-history.is-animated .hibot-history__track {
  animation: hibotHistoryMarquee 60s linear infinite;
}

@keyframes hibotHistoryMarquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hibot-history.is-animated .hibot-history__track {
    animation: none;
  }
}

.hibot-history__strip {
  position: relative;
  display: flex;
  height: 60.5rem;
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Central horizontal line */
.hibot-history__strip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(174, 174, 174, 0.55);
}

/* Starting bullseye */
.hibot-history__start {
  position: relative;
  width: 8.3rem;
  flex: none;
}

.hibot-history__bullseye {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fff 0 0.7rem,
    #ff521c 0.7rem 1.7rem,
    rgba(255, 82, 28, 0.66) 1.7rem 2.8rem
  );
}

/* Event: vertical connector + dot on the line + content.
   Connector pitch as in the original: ~470px when events alternate
   above/below, ~844px between two consecutive events on the same row
   (otherwise the ~582px photos would overlap). */
.hibot-history__event {
  position: relative;
  width: 22.2rem;
  flex: none;
}

.hibot-history__event.has-same-next {
  width: 40rem;
}

/* The last event keeps room for its own content + tail before the next
   copy of the loop starts. */
.hibot-history__event:last-child {
  width: 34rem;
}

.hibot-history__event::before {
  content: "";
  position: absolute;
  left: 0;
  width: 1px;
  background: rgba(174, 174, 174, 0.55);
}

.hibot-history__event.is-top::before    { top: 1rem; bottom: 50%; }
.hibot-history__event.is-bottom::before { top: 50%; bottom: 1rem; }

.hibot-history__event::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: #fff;
}

/* The text box is wider than the photos: the longest original title line
   ("Successful deployment of CTARM in the", 2016) measures 699px → the
   wrap point sits at ~708px = 33.5rem. */
.hibot-history__content {
  position: absolute;
  left: 2.8rem;
  width: 33.5rem;
}

/* Top row: anchored to the line from below (photos always end ~65px above
   the line and text grows upwards, as in the original — see 2016, whose
   two-line title starts higher up). Bottom row: anchored from above. */
.hibot-history__event.is-top .hibot-history__content    { bottom: calc(50% + 3.2rem); }
.hibot-history__event.is-bottom .hibot-history__content { top: calc(50% + 3.8rem); }

/* Year digits: cap height 41px in the source image → ~58px font → 2.7rem.
   Ink gaps measured on the image: year→title ~0.2rem, title→photo ~1.2rem
   (line-box leading accounted for). */
.hibot-history__year {
  font-family: "Roboto Slab", serif !important;
  font-size: 2.7rem;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  margin: 0 0 0.2rem;
}

.hibot-history__title {
  font-family: "Roboto Slab", serif !important;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.45;
  color: #ff521c;
  margin: 0 0 1.2rem;
}

/* Japanese: Latin glyphs in Roboto Slab, kana/kanji in the gothic face
   (as in the image). !important beats the theme's ".f-ja * !important". */
.hibot-history--ja .hibot-history__year,
.hibot-history--ja .hibot-history__title {
  font-family: "Roboto Slab", "toppan-bunkyu-gothic-pr6n", "Noto Sans JP", sans-serif !important;
}

.hibot-history__year-suffix {
  font-size: 0.85em;
}

.hibot-history__media {
  margin: 0;
}

/* width:auto beats the theme's ".history img { width:100% }";
   the rem height is computed per image by the shortcode (source px × 0.04734). */
.hibot-history .hibot-history__media img {
  width: auto;
  max-width: none;
  display: block;
}

/* ---------------------------------------------------------------------------
 * Mobile (<768px): static vertical timeline, as in enkaku-*-sp.webp.
 * Measured from the sp image (1145px wide, rendered at 390 → 1px ≈ 0.034rem):
 * solid white central line at 47.7% (546/1145, ~4px), no separate start
 * marker — the first event's dot is the orange bullseye (d.100px, flat
 * #EB5020, white center) at the year's height, every event has a white dot
 * (d.26px) on the line plus a thin horizontal connector at the year's
 * height, years at ~70px → 2.4rem.
 * ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hibot-history__viewport {
    overflow: visible;
  }

  .hibot-history__track {
    display: block;
    width: auto;
  }

  .hibot-history.is-animated .hibot-history__track {
    animation: none;
  }

  .hibot-history__strip[aria-hidden="true"] {
    display: none;
  }

  .hibot-history__strip {
    display: flow-root; /* contains the floated columns */
    height: auto;
    padding: 2rem 0 4rem;
  }

  /* Central vertical line: solid white on mobile. */
  .hibot-history__strip::before {
    left: 47.7%;
    right: auto;
    top: 0;
    bottom: 0;
    width: 0.14rem;
    height: auto;
    background: #fff;
  }

  /* No standalone start marker: the first event's dot is the bullseye. */
  .hibot-history__start {
    display: none;
  }

  /* Two interleaved columns, as in the sp image: right column = events
     above the line on desktop, left column = events below. Floats with a
     per-side clear stack each column independently, so same-column items
     can NEVER overlap whatever the content heights; CSS float rules also
     keep the chronological order (a float can't rise above an earlier one).
     The 9rem top margin on left items reproduces the measured stagger
     (2014 starts ~285px below the top of 2010, halfway down its photo). */
  .hibot-history__event,
  .hibot-history__event.has-same-next,
  .hibot-history__event:last-child {
    width: 43%;
    margin-bottom: 7rem;
  }

  .hibot-history__event.is-top {
    float: right;
    clear: right;
    margin-right: 2.5%;
  }

  .hibot-history__event.is-bottom {
    float: left;
    clear: left;
    margin-left: 1%;
    margin-top: 9rem;
  }

  /* Horizontal connector at the year's height (year is 2.1rem, line-height 1
     → its center sits ~1.1rem below the content top). Geometry lives in the
     per-side selectors: the desktop .is-top/.is-bottom rules have the same
     specificity and would otherwise win on top/bottom (media queries add
     no specificity). Percentages are relative to the 43%-wide floated item:
     the central line at 47.7% of the container falls at -15.8% for the
     right column and at 108.6% for the left one. */
  .hibot-history__event.is-top::before,
  .hibot-history__event.is-bottom::before {
    display: block;
    top: 1.1rem;
    bottom: auto;
    height: 1px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.85);
  }

  .hibot-history__event.is-top::before {
    left: -15.8%;
    width: 15.8%;
  }

  .hibot-history__event.is-bottom::before {
    left: 49.5%;
    width: 59.1%;
  }

  /* White dot on the line, centered on the year. */
  .hibot-history__event::after {
    top: 1.1rem;
    width: 0.8rem;
    height: 0.8rem;
  }

  .hibot-history__event.is-top::after    { left: -15.8%; }
  .hibot-history__event.is-bottom::after { left: 108.6%; }

  /* First event: orange bullseye instead of the dot (flat disc #EB5020
     with a white center, d.100px in the sp image → 3.1rem). */
  .hibot-history__event:nth-child(2)::after {
    width: 3.1rem;
    height: 3.1rem;
    background: radial-gradient(circle, #fff 0 0.38rem, #eb5020 0.38rem 1.55rem);
  }

  .hibot-history__content {
    position: static;
    width: 100%;
  }

  /* Measured on the sp image (container scale 360/1145 at the 390px design
     width): year 66px → 2.1rem, title 52px → 1.6rem with ~1.3 line pitch,
     ink gaps ~0.3rem and ~0.4rem. */
  .hibot-history__year {
    font-size: 2.1rem;
    margin-bottom: 0.3rem;
  }

  .hibot-history__title {
    font-size: 1.6rem;
    line-height: 1.3;
    margin-bottom: 0.4rem;
  }

  .hibot-history .hibot-history__media img {
    width: 100%;
    height: auto !important;
  }
}