/* ============================================================
   BE Timeline (Front-end)
   ============================================================ */

.be-timeline { position: relative; max-width: 980px; margin: 0 auto; }

/* Chain connector between boxes */
.be-timeline .wp-block-be-timeline-box { position: relative; margin: 0 0 34px 0; }
.be-timeline .wp-block-be-timeline-box:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  width: 2px; height: 26px; background: var(--be-rail-color, #cfcfcf);
}
.be-timeline .wp-block-be-timeline-box:not(:last-child)::before {
  content: ""; position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%; background: #d44; box-shadow: 0 0 0 3px #fff;
}

/* Box */
.be-timeline-box__inner {
  --be-rail-color: #cfcfcf;
  position: relative;
  isolation: isolate;
  background: #fff; border: 1px solid #d9d9d9; border-radius: 14px;
  padding: 18px 18px 14px 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08);
}

/* When Spiral Look is enabled, a narrow stack of page edges sits behind the
   right side of the card. The first layer supplies the book-block depth and
   its soft outer shadow; the second draws many separate paper edges. */
.be-timeline-box__inner--page-depth::before,
.be-timeline-box__inner--page-depth::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.be-timeline-box__inner--page-depth::before {
  z-index: -2;
  top: 7px;
  right: -25px;
  bottom: 7px;
  width: 30px;
  border: 1px solid rgba(128, 128, 128, 0.24);
  border-left: 0;
  border-radius: 0 16px 16px 0;
  background: #f3f3f1;
  box-shadow: 8px 5px 15px rgba(44, 38, 29, 0.18);
  clip-path: polygon(0 0, 46% 1%, 72% 3%, 100% 6%, 100% 94%, 72% 97%, 46% 99%, 0 100%);
}
.be-timeline-box__inner--page-depth::after {
  z-index: -1;
  top: 8px;
  right: -21px;
  bottom: 8px;
  width: 25px;
  border-radius: 0 14px 14px 0;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.92), transparent 7%, transparent 93%, rgba(173,173,169,0.26)),
    repeating-linear-gradient(
      90deg,
      #fafaf8 0,
      #fafaf8 2px,
      #c9c9c5 2px,
      #c9c9c5 3px,
      #f0f0ed 3px,
      #f0f0ed 5px
    );
  clip-path: polygon(0 0, 42% 1%, 68% 3%, 100% 6%, 100% 94%, 68% 97%, 42% 99%, 0 100%);
}

.be-timeline-box__header {
  text-align: center; margin: 0 0 14px 0;
  font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
}

.be-timeline-box__inner--brand-logo .be-timeline-box__header {
  margin-top: 11px;
}

.be-timeline-box__brand {
  position: absolute;
  z-index: 3;
  top: 7px;
  right: 10px;
  display: block;
  width: 154px;
  max-width: 40%;
  aspect-ratio: 187 / 24;
  background: #fff url("./bioexplorer-logo.png?v=127") center / contain no-repeat;
  pointer-events: none;
}

/* Inside-box timeline */
.be-timeline-list {
  --be-dot-left: -23px;
  --be-dot-top: 11px;
  --be-dot-size: 8px;
  --be-spiral-width: 82px;
  --be-spiral-height: 46px;
  --be-spiral-top-offset: 13px;
  --be-spiral-end-inset: 15px;
  --be-gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0 0 0 34px;
}

.be-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 14px;
  margin: var(--be-gap) 0;
}

.be-timeline-item__separator {
  position: absolute;
  left: -34px;
  right: 0;
  top: calc(100% + var(--be-divider-space-above, 10px));
  display: none;
  height: 1px;
  background: #d8d8d8;
  pointer-events: none;
}
.be-timeline-list--dividers .be-timeline-item + .be-timeline-item {
  margin-top: 0;
}
.be-timeline-list--dividers .be-timeline-item:not(:last-child) {
  margin-bottom: calc(var(--be-divider-space-above, 10px) + 1px + var(--be-divider-space-below, 10px));
}
.be-timeline-list--dividers .be-timeline-item:not(:last-child) .be-timeline-item__separator {
  display: block;
}
.be-timeline-year-badge {
  grid-column: 1;
  grid-row: 1;
}
.be-timeline-item__content {
  /* Column 2 of row 1: sits to the right of the badge, holding the
     optional per-year title. min-width: 0 lets the column shrink so
     long words in the title don't push the grid past the container. */
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.be-timeline-item__body {
  /* Row 2, spanning both columns. This is the key layout change:
     the body text starts at the LEFT EDGE of the year item (column 1)
     -- the same x-coordinate as the first digit of the year badge
     (1 in 1999, 2 in 2001 for a range) -- rather than being squeezed
     into the narrow content column to the right of the badge. The
     body therefore uses the full content width below the header row,
     on both desktop and mobile, so neither viewport leaves a wasted
     white-space column next to the badge.

     padding-left: 2ch offsets the body content by approximately two
     character widths from the left edge, landing at the 3rd digit of
     the year badge (9 in 1999, 0 in 2001). This makes the connecting
     separator (-, &, "to") visually prominent to the left of the
     body text, instead of being lost at the start of a line that
     starts at the first digit. */
  grid-column: 1 / -1;
  grid-row: 2;
  padding-left: 2ch;
}

/* A year without a title uses an inline-start float for the badge. This
   lets only the first brief line begin beside YEAR: with a small gap;
   wrapped lines return to the normal 2ch body inset instead of inheriting
   the badge column's large permanent indent. */
.be-timeline-item--no-title {
  display: block;
  box-sizing: border-box;
  padding-left: 2ch;
}
.be-timeline-item--no-title .be-timeline-year-badge {
  float: left;
  margin-left: -2ch;
  margin-right: 10px;
}
.be-timeline-item--no-title .be-timeline-item__content {
  display: none;
}
.be-timeline-item--no-title .be-timeline-item__body {
  display: block;
  padding-left: 0;
  container-type: normal;
  container-name: none;
}

/* Body wrapper (added in v1.6.0). The body is a real block element
   in the year-item grid (grid-column: 1 / -1; grid-row: 2, set on the
   base .be-timeline-item__body rule above) so it spans both columns
   on every viewport -- desktop and mobile alike. The image-align
   modifiers (be-align-left, be-align-right, be-align-none) are now
   applied to this wrapper instead of .be-timeline-item__content,
   because the brief image now lives inside the body wrapper. */

/* Dot */
.be-timeline-item::before {
  content: "";
  position: absolute;
  left: var(--be-dot-left);
  top: var(--be-dot-top);
  width: var(--be-dot-size);
  height: var(--be-dot-size);
  border-radius: 50%;
  background: #1f1f1f;
  z-index: 2;
}

/* Segment line */
.be-timeline-item::after {
  content: "";
  position: absolute;
  left: calc(var(--be-dot-left) + (var(--be-dot-size) / 2) - 1px);
  top: calc(var(--be-dot-top) + (var(--be-dot-size) / 2));
  width: 2px;
  height: calc(100% + var(--be-gap));
  background: var(--be-rail-color);
  border-radius: 2px;
}
.be-timeline-item:last-child::after { display: none; }

.be-timeline-list--dividers .be-timeline-item:not(:last-child)::after {
  height: calc(100% + var(--be-divider-space-above, 10px) + 1px + var(--be-divider-space-below, 10px));
}

/* Optional spiral-binding marker. This keeps the short dimensional brass rails
   and original brown eyelet depth while excluding the rails' cast shadow. */
.be-timeline-list--spiral .be-timeline-item::before {
  background: transparent;
  box-shadow: none;
}

.be-timeline-list--spiral .be-timeline-item::after {
  display: none;
}

.be-timeline-list--spiral .be-timeline-year-badge {
  position: relative;
}

.be-timeline-list--spiral .be-timeline-year-badge::before {
  content: "";
  position: absolute;
  display: block;
  left: calc(var(--be-dot-left) + (var(--be-dot-size) / 2) - var(--be-spiral-width) + var(--be-spiral-end-inset));
  top: 50%;
  width: var(--be-spiral-width);
  height: var(--be-spiral-height);
  box-sizing: border-box;
  background: url("./sprial-coil.png?v=127") left top / contain no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
  filter: none;
  transform: translateY(-50%);
  transform-origin: right center;
  z-index: 1;
}

.be-timeline-year-badge {
  display: inline-block;
  min-width: 72px;
  text-align: center;
  padding: 3px 10px;
  border-radius: 2px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

/* Year-range badge (added in v1.6.0 for ranges like "1999-2000").
   ------------------------------------------------------------
   The PHP helper be_timeline_split_year_range() detects these patterns
   (1999-2000, 1999 - 2000, 1999&2000, 1999 & 2000, 1999 to 2000) and
   renders them as <y1><sep><span class="be-timeline-year-badge__y2"><y2>[colon]</span>.
   The CSS below turns that into a two-line badge on desktop with the
   first digit of each year vertically aligned:

   - font-variant-numeric: tabular-nums makes every digit the same
     width, so the "1" in "1999" and the "2" in "2000" sit in
     mathematically identical columns.
   - text-align: left (overriding the default text-align: center) puts
     the first character of each line at the same x-coordinate, so the
     "2" lands directly under the "1" rather than being centered under
     the whole "1999-" string.
   - The .be-timeline-year-badge__y2 wrapper is display: block on
     desktop, which forces the second year onto its own line.
   - On mobile (max-width: 782px) all of the above are reverted: the
     second year goes back to display: inline, text-align goes back to
     center, and the range reads as a single line -- matching how the
     user originally typed it. The min-width: 72px still applies, so
     a longer range like "1999-2001" still has a comfortable pill. */
.be-timeline-year-badge--range {
  font-variant-numeric: tabular-nums;
  text-align: left;
  white-space: normal;
  line-height: 1.2;
}
.be-timeline-year-badge__y2 {
  /* The parent range badge sets `white-space: normal` so the second year
     can drop to its own line, but that inherits into this span and lets
     "2001:" wrap to a third line when the badge's `min-width: 72px` is
     just barely too narrow for 5 bold tabular-num digits. Pin the span
     itself to nowrap so the second year + colon stay together; the
     badge is `display: inline-block` with no max-width, so it grows
     to fit. The mobile override below flips this back to `display: inline`
     (and the normal `white-space` is fine there because the whole range
     reads as one line). */
  display: block;
  white-space: nowrap;
}

@media (max-width: 782px) {
  .be-timeline-year-badge--range {
    text-align: center;
  }
  .be-timeline-year-badge__y2 {
    display: inline;
  }
}

.be-timeline-item__content { min-width: 0; }

/* Per-year title (optional, added in v1.6.0).
   ------------------------------------------------------------
   The element is h3 by default (or h4/h5/div based on the user's
   choice in the year settings), but the default browser styling
   for headings is bold + sometimes a link-like underline, which
   reads as a clickable link or a heavy section heading -- not
   what we want for an in-line label next to a year badge. The
   rules below strip both: font-weight: normal removes the bold,
   text-decoration: none + text-decoration-line: none remove any
   inherited underline (the explicit text-decoration-line is the
   longhand that actually wins in case any future theme CSS uses
   !important on the shorthand). The natural font-size of the
   chosen element still applies, so H3 > H4 > H5 in size while
   sharing the same calm, un-bolded appearance. Color and
   font-size overrides set on the element via inline style take
   precedence over the element's natural size.

   The title is the first child of .be-timeline-item__content,
   which is a flex item inside .be-timeline-item. The parent
   flex container uses align-items: baseline, which aligns the
   badge text and the title text (the first line of the content
   column) on the same baseline -- so the title sits on the same
   level/line as the year. A negative margin-top pulls the title
   up by a few pixels to compensate for the badge's 3px vertical
   padding, so the baselines line up visually rather than just
   mathematically. */
.be-timeline-year__title {
  margin: -3px 0 8px 0;
  font-weight: normal;
  text-decoration: none;
  text-decoration-line: none;
  display: block;
  line-height: 1.3;
}

/* "No styling" variant (div instead of an h-tag). The class is
   kept on the element so future CSS can target this specific
   variant if needed; for now it shares the same rules as the
   heading variants above. */
.be-timeline-year__title--unstyled {
  margin: -3px 0 8px 0;
  font-weight: normal;
  text-decoration: none;
  text-decoration-line: none;
  display: block;
  line-height: 1.3;
}

/* Image alignment */
.be-timeline-item__body.be-align-left img { float: left; margin: 0 14px 10px 0; max-width: 45%; height: auto; }
.be-timeline-item__body.be-align-right img { float: right; margin: 0 0 10px 14px; max-width: 45%; height: auto; }
.be-timeline-item__body.be-align-none img { float: none; margin: 10px 0; max-width: 100%; height: auto; }
.be-timeline-item__content::after { content: ""; display: block; clear: both; }

/* Embeds */
.be-timeline-embed { margin-top: 10px; }
.be-timeline-embed iframe { max-width: 100%; }

/* General info */
.be-timeline-general { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e7e7e7; }
.be-timeline-general__list { margin: 0; padding-left: 20px; }
.be-timeline-general__list li { margin: 6px 0; }

/* Mobile (v1.6.0)
   Earlier versions forced flex-direction: column on .be-timeline-item
   here, which stacked the badge above the content and pushed the
   per-year title onto its own line. The desktop flex layout (badge in
   column 1, content in column 2) is now kept on mobile, so the title
   sits on the same line as the year. The dot/rail padding and image
   float reset below are still needed at narrow widths. */
@media (max-width: 640px) {
  .be-timeline-box__brand {
    top: 6px;
    right: 8px;
    width: 122px;
    max-width: 36%;
  }
  .be-timeline-box__inner--brand-logo .be-timeline-box__header {
    margin-top: 8px;
  }
  .be-timeline-list {
    padding-left: 28px;
    --be-dot-left: -20px;
    --be-spiral-width: 58px;
    --be-spiral-height: 33px;
    --be-spiral-top-offset: 9.5px;
    --be-spiral-end-inset: 13px;
  }
  .be-timeline-item__separator { left: -28px; }
  .be-timeline-year-badge { width: fit-content; }
  .be-timeline-item .be-timeline-year__title {
    /* 0px for one line; about -4px for two lines. The percentage is based
       on the title's actual rendered height, so only wrapped titles rise. */
    transform: translateY(max(-0.15lh, calc(0.15lh - 15%)));
  }
  .be-timeline-item__content img { float: none !important; max-width: 100% !important; margin: 10px 0 !important; }
}


/* General info spacing */
.be-timeline-general { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e7e7e7; }
.be-timeline-general:first-child { margin-top: 0; }
.be-timeline-box__inner > .be-timeline-general:first-of-type { border-top: none; padding-top: 0; }
.be-timeline-general--bottom { margin-top: 14px; }

.be-timeline-general::after,
.be-timeline-item__content::after { content: ""; display: block; clear: both; }

/* Image alignment inside general info and year brief (theme CSS can override floats, so use higher specificity) */
.be-timeline-box .be-timeline-item__body.be-align-left figure.wp-block-image,
.be-timeline-box .be-timeline-general.be-align-left figure.wp-block-image {
  float: left !important;
  margin: 0 14px 10px 0 !important;
  max-width: 45% !important;
}

.be-timeline-box .be-timeline-item__body.be-align-right figure.wp-block-image,
.be-timeline-box .be-timeline-general.be-align-right figure.wp-block-image {
  float: right !important;
  margin: 0 0 10px 14px !important;
  max-width: 45% !important;
}

.be-timeline-box .be-timeline-item__body.be-align-center figure.wp-block-image,
.be-timeline-box .be-timeline-general.be-align-center figure.wp-block-image {
  float: none !important;
  margin: 10px auto !important;
  max-width: 70% !important;
}

.be-timeline-box .be-timeline-general.be-align-none figure.wp-block-image,
.be-timeline-box .be-timeline-item__body.be-align-none figure.wp-block-image {
  float: none !important;
  margin: 10px 0 !important;
  max-width: 100% !important;
}

/* Ensure the text wraps around floated images */
.be-timeline-box .be-timeline-general::after,
.be-timeline-box .be-timeline-item__body::after {
  content: "";
  display: block;
  clear: both;
}

/* Image alignment when users paste raw <img> into RichText (not wrapped in figure.wp-block-image) */
.be-timeline-box .be-timeline-item__body.be-align-left > img,
.be-timeline-box .be-timeline-general.be-align-left > img {
  float: left !important;
  margin: 0 14px 10px 0 !important;
  max-width: 45% !important;
  height: auto !important;
}

.be-timeline-box .be-timeline-item__body.be-align-right > img,
.be-timeline-box .be-timeline-general.be-align-right > img {
  float: right !important;
  margin: 0 0 10px 14px !important;
  max-width: 45% !important;
  height: auto !important;
}

.be-timeline-box .be-timeline-item__body.be-align-center > img,
.be-timeline-box .be-timeline-general.be-align-center > img {
  float: none !important;
  display: block !important;
  margin: 10px auto !important;
  max-width: 70% !important;
  height: auto !important;
}

.be-timeline-box .be-timeline-general.be-align-none > img,
.be-timeline-box .be-timeline-item__body.be-align-none > img {
  float: none !important;
  display: block !important;
  margin: 10px 0 !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Optional per-year supplemental image (new field, additive only -- has no
   effect on existing content, since .be-timeline-brief-image only appears on
   the new opt-in field). Framed as a small "card" -- border, padding,
   background, subtle shadow -- so a small source image (e.g. an old document
   photo that's only ~200px wide) reads as an intentional inset rather than a
   loose thumbnail, without changing its actual pixel size or file weight. */
.be-timeline-brief-image {
  box-sizing: border-box;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  padding: 6px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.be-timeline-brief-image img {
  display: block;
  border-radius: 3px;
  /* The plugin's older ".be-align-* img" rule (for bare <img> tags pasted
     directly into a year's brief) is a plain descendant selector with no
     !important, so it also matches this img nested inside our new figure --
     applying its own max-width: 45% on top of the figure's max-width: 45%
     and compounding into an image at ~20% of the intended size. Reset those
     properties back to fill the figure (which already carries the real
     float/max-width/margin for alignment) so sizing isn't applied twice. */
  float: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  height: auto !important;
}

.be-timeline-brief-image figcaption {
  font-size: 12px;
  color: #6b6b6b;
  margin-top: 6px;
  font-style: italic;
}

/* Viewport fallback (browsers without container query support): only force
   full-width stacking at genuinely narrow phone widths. Wider windows keep
   the float/wrap already set by the be-align-* class above, since there's
   enough room for the brief to wrap beside a small (~200px) image. */
@media (max-width: 420px) {
  .be-timeline-brief-image {
    float: none !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
  }
}

/* Progressive enhancement: base the stack-vs-wrap decision on the actual
   width available to this timeline item's body column, not just the raw
   device viewport, so the image keeps wrapping wherever real estate allows
   (a wider theme content area, a resized browser window, etc.) and only
   stacks when that column itself is genuinely too narrow for the image. */
@supports (container-type: inline-size) {
  .be-timeline-item__body {
    container-type: inline-size;
    container-name: be-timeline-content;
  }

  @container be-timeline-content (max-width: 420px) {
    .be-timeline-brief-image {
      float: none !important;
      max-width: 100% !important;
      margin: 10px 0 !important;
    }
  }
}

/* Mobile layout (v1.6.0)
   ------------------------------------------------------------
   The base .be-timeline-item rule above uses display:grid (not flex)
   and places .be-timeline-item__body in row 2 with grid-column: 1 / -1,
   so the body text spans both columns at full content width on every
   viewport automatically -- desktop and mobile share the same layout
   with no breakpoint override. The body starts at the LEFT EDGE of
   the year item, which is the same x-coordinate as the first digit of
   the year badge (1 in 1999, 2 in 2001 for a range) -- so the brief
   aligns with the year level, not with the title.

   Earlier revisions used flex + float + clear, which forced the body
   into the narrow column to the right of the badge. The user reported
   this left a wide white space on the left of the body on mobile. The
   grid approach moves the body out of that narrow column and into
   row 2 spanning both columns, eliminating the white space on every
   viewport.

   The only mobile-specific override remaining is the image float
   reset below -- brief images should never float on narrow viewports
   regardless of which container they end up in. */
@media (max-width: 782px) {
  .be-timeline-item__body img { float: none !important; max-width: 100% !important; margin: 10px 0 !important; }
}