/**
 * Timeline Widget Styles
 *
 * @package BongoHive
 */

.bh-timeline {
  --bh-tl-font-heading: "PT Sans", "Lato", Arial, sans-serif;
  --bh-tl-font-body: "Noto Sans", "Ubuntu", Arial, sans-serif;
  --bh-tl-gold: #f0af24;
  --bh-tl-gold-dark: #60460e;
  --bh-tl-gold-darkest: #48340a;
  --bh-tl-shark: #1d2229;
  --bh-tl-muted: #606469;
  --bh-tl-neutral: #7f7f7f;
  --bh-tl-impact-bg: #f9fafb;
  --bh-tl-card-radius: 4px;
  --bh-tl-connector: var(--bh-tl-gold);
  --bh-tl-badge-size: 48px;
  --bh-tl-track-width: 2px;

  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-bottom: 100px;
  padding-top: 50px;
  width: 100%;
}

/* ==========================================================================
   Filter strip
   ========================================================================== */

.bh-timeline__filter {
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px clamp(24px, 6vw, 100px);
  width: 100%;
  z-index: 5;
}

.bh-timeline--sticky-filter .bh-timeline__filter {
  position: sticky;
  top: 0;
  backdrop-filter: saturate(180%) blur(6px);
  -webkit-backdrop-filter: saturate(180%) blur(6px);
}

.bh-timeline__filter-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
}

.bh-timeline__filter-heading {
  color: var(--bh-tl-shark);
  font-family: var(--bh-tl-font-body);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.bh-timeline__filter-label {
  color: #6a7282;
  font-family: var(--bh-tl-font-body);
  font-size: 14px;
  line-height: 1.5;
}

.bh-timeline__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.bh-timeline__chip {
  background-color: #ffffff;
  border: 1px solid #d1d5dc;
  border-radius: var(--bh-tl-card-radius);
  color: #364153;
  cursor: pointer;
  font-family: var(--bh-tl-font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.5;
  min-width: 70px;
  padding: 9px 16px;
  text-align: center;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.bh-timeline__chip[aria-current="true"] {
  background-color: var(--bh-tl-gold);
  border-color: var(--bh-tl-gold);
  color: #000000;
}

.bh-timeline__chip:focus-visible {
  outline: 2px solid var(--bh-tl-gold);
  outline-offset: 2px;
}

.bh-timeline__chip:not([aria-current="true"]):hover {
  background-color: #fef9ee;
  border-color: var(--bh-tl-gold);
}

/* ==========================================================================
   Timeline body — zig-zag layout with center badge column
   ========================================================================== */

.bh-timeline__body {
  /* The single source of truth for the rail's horizontal position. The
     `::before` rail and the absolute-positioned `.bh-timeline__badge`
     both consume this variable, so they can never drift apart. */
  --bh-tl-line-x: 50%;
  display: flex;
  flex-direction: column;
  gap: 80px;
  list-style: none;
  margin: 0;
  /* Body has no horizontal padding — that lives on the row instead, so
     `var(--bh-tl-line-x)` resolves to the same point of reference for
     both the rail (relative to the body's padding-box) and the badge
     (relative to the row's padding-box, which now equals the body's
     padding-box width). */
  padding: 0;
  position: relative;
}

.bh-timeline__row {
  align-items: flex-start;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) var(--bh-tl-badge-size) minmax(0, 1fr);
  padding: 0 24px;
  position: relative;
  /* Offset jump-scroll targets so the sticky filter bar doesn't sit on top
     of the row we just jumped to. Sized per breakpoint below to match the
     filter bar's actual height at each viewport size. Falls back gracefully
     on browsers that don't support scroll-margin. */
  scroll-margin-top: 140px;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.bh-timeline__row:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}

.bh-timeline__row[hidden] {
  display: none;
}

/* Alternate sides: odd rows show text-left/image-right, even rows flip. */
.bh-timeline__row:nth-child(even) .bh-timeline__text {
  grid-column: 3;
  text-align: left;
}

.bh-timeline__row:nth-child(even) .bh-timeline__text > * {
  text-align: left;
}

.bh-timeline__row:nth-child(even) .bh-timeline__media {
  grid-column: 1;
  grid-row: 1;
}

.bh-timeline__row:nth-child(even) .bh-timeline__impact {
  text-align: left;
  align-items: flex-start;
}

.bh-timeline__row:nth-child(even) .bh-timeline__readmore {
  flex-direction: row;
}

/* Vertical gold connector line behind the badges. Anchored to
   `--bh-tl-line-x` on the body and centred on that x via translateX so
   the same variable controls both the rail and the badge. */
.bh-timeline__body::before {
  background: linear-gradient(
    to bottom,
    var(--bh-tl-connector) 0%,
    var(--bh-tl-connector) 50%,
    #d1d5dc 50%,
    var(--bh-tl-connector) 100%
  );
  content: "";
  height: 100%;
  left: var(--bh-tl-line-x);
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: var(--bh-tl-track-width);
  z-index: 0;
}

.bh-timeline__text {
  display: flex;
  flex-direction: column;
  gap: 21px;
  padding: 0 50px;
  align-items: flex-end;
  text-align: right;
}

.bh-timeline__text > * {
  text-align: right;
  width: 100%;
}

.bh-timeline__title {
  color: var(--bh-tl-gold-darkest);
  font-family: var(--bh-tl-font-heading);
  font-size: clamp(22px, 2vw + 8px, 28px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 0;
}

.bh-timeline__summary {
  color: var(--bh-tl-muted);
  font-family: var(--bh-tl-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.bh-timeline__readmore {
  align-items: center;
  color: var(--bh-tl-gold-dark);
  display: inline-flex;
  font-family: var(--bh-tl-font-body);
  font-size: 16px;
  gap: 15px;
  text-decoration: none;
  transition: opacity 150ms ease, transform 150ms ease;
}

.bh-timeline__row:nth-child(even) .bh-timeline__readmore {
  color: var(--bh-tl-gold-darkest);
}

.bh-timeline__readmore:hover,
.bh-timeline__readmore:focus-visible {
  opacity: 0.85;
  transform: translateX(2px);
}

.bh-timeline__readmore-icon {
  flex-shrink: 0;
}

.bh-timeline__impact {
  align-items: flex-end;
  background-color: var(--bh-tl-impact-bg);
  border-radius: var(--bh-tl-card-radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  width: 100%;
}

.bh-timeline__impact-label {
  color: var(--bh-tl-neutral);
  font-family: var(--bh-tl-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-transform: uppercase;
}

.bh-timeline__impact-text {
  color: var(--bh-tl-muted);
  font-family: var(--bh-tl-font-body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}

/* Badge column — kept as an empty grid spacer so the 48px gap between
   text and image is preserved. It is *not* the positioning ancestor of
   the badge any more, so the absolute-positioned badge below bubbles up
   to the row and locks to the same `--bh-tl-line-x` as the rail. No
   alternating override exists for the badge — cards may flip sides,
   but the badge never moves off the line. */
.bh-timeline__badge-col {
  align-items: flex-start;
  display: flex;
  height: 100%;
  justify-content: center;
  position: static;
  z-index: 1;
}

.bh-timeline__badge {
  align-items: center;
  background-color: var(--bh-tl-gold);
  border: 4px solid #ffffff;
  border-radius: 9999px;
  box-shadow: 0 10px 7.5px rgba(0, 0, 0, 0.1), 0 4px 3px rgba(0, 0, 0, 0.1);
  color: #000000;
  display: inline-flex;
  font-family: var(--bh-tl-font-body);
  font-size: 12px;
  font-weight: 700;
  height: var(--bh-tl-badge-size);
  justify-content: center;
  /* Anchor the badge to the rail. Its centre lands at the row's
     `--bh-tl-line-x`, which is the same point of reference as the
     rail's body-level `--bh-tl-line-x`. */
  left: var(--bh-tl-line-x);
  line-height: 1;
  position: absolute;
  top: 12px;
  transform: translateX(-50%);
  width: var(--bh-tl-badge-size);
  z-index: 2;
}

.bh-timeline__media {
  border-radius: var(--bh-tl-card-radius);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.bh-timeline__image {
  display: block;
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

/* ==========================================================================
   Footer CTA pill
   ========================================================================== */

.bh-timeline__cta-wrap {
  display: flex;
  justify-content: center;
}

.bh-timeline__cta {
  background-color: var(--bh-tl-gold);
  border-radius: 9999px;
  box-shadow: 0 10px 7.5px rgba(0, 0, 0, 0.1), 0 4px 3px rgba(0, 0, 0, 0.1);
  color: #000000;
  display: inline-block;
  font-family: var(--bh-tl-font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.5;
  padding: 16px 32px;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

a.bh-timeline__cta:hover,
a.bh-timeline__cta:focus-visible {
  box-shadow: 0 14px 12px rgba(0, 0, 0, 0.12), 0 6px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* ==========================================================================
   Editor preview notice for dynamic mode
   ========================================================================== */

.bh-timeline__editor-notice {
  align-items: center;
  background: #ffffff;
  border: 1px dashed #d8d8d8;
  border-radius: 8px;
  color: var(--bh-tl-muted);
  display: flex;
  flex-direction: column;
  font-family: var(--bh-tl-font-body);
  gap: 4px;
  margin: 0 24px;
  padding: 32px;
  text-align: center;
}

.bh-timeline__editor-notice strong {
  color: var(--bh-tl-shark);
  font-family: var(--bh-tl-font-heading);
}

/* ==========================================================================
   Responsive
   ==========================================================================
   Three-step ladder:

   - <= 1024 px  Tablet portrait + large phones in landscape. The desktop
                 zig-zag (text | badge | image, alternating sides) gets
                 cramped below ~1100 px, so we switch to a single-column
                 stacked layout: left-rail badge, image on the right of
                 row 1, text spans full-width on row 2.
   - <=  768 px  Phones. Filter bar collapses, chips become a horizontal
                 scroller with 44px tap targets, cards tighten up.
   - <=  480 px  Small phones. One more typography/spacing step-down. */

@media (max-width: 1024px) {
  .bh-timeline {
    gap: 56px;
  }

  .bh-timeline__body {
    /* Rail slides from centre to the left-rail badge column. Because
       both the rail and the badge consume this same variable, swapping
       it here keeps them locked together with no extra overrides. */
    --bh-tl-line-x: calc(var(--bh-tl-badge-size) / 2);
    gap: 48px;
  }

  /* Dim the rail so it guides the eye without competing with the story
     content on the narrow stacked layout. (Position is inherited from
     the variable above.) */
  .bh-timeline__body::before {
    opacity: 0.55;
  }

  /* Row becomes badge | image (row 1) + text spanning (row 2). The
     alternating override for :nth-child(even) is neutralized. */
  .bh-timeline__row,
  .bh-timeline__row:nth-child(even) {
    align-items: flex-start;
    grid-template-columns: var(--bh-tl-badge-size) minmax(0, 1fr);
    gap: 20px;
    scroll-margin-top: 120px;
  }

  .bh-timeline__badge-col {
    grid-row: 1;
    grid-column: 1;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0;
  }

  .bh-timeline__media,
  .bh-timeline__row:nth-child(even) .bh-timeline__media {
    grid-row: 1;
    grid-column: 2;
    /* aspect-ratio inherited from base — gives consistent card height
       even when editors upload mixed portrait/landscape images. */
  }

  .bh-timeline__text,
  .bh-timeline__row:nth-child(even) .bh-timeline__text {
    grid-row: 2;
    grid-column: 1 / -1;
    align-items: flex-start;
    padding: 0;
    text-align: left;
  }

  .bh-timeline__text > *,
  .bh-timeline__row:nth-child(even) .bh-timeline__text > * {
    text-align: left;
  }

  .bh-timeline__impact,
  .bh-timeline__row:nth-child(even) .bh-timeline__impact {
    align-items: flex-start;
  }

  .bh-timeline__row:nth-child(even) .bh-timeline__readmore {
    flex-direction: row;
  }
}

@media (max-width: 768px) {
  .bh-timeline {
    gap: 40px;
    padding-bottom: 56px;
    padding-top: 24px;
  }

  .bh-timeline__filter {
    flex-direction: column;
    gap: 14px;
    padding: 16px 16px 12px;
  }

  .bh-timeline__filter-head {
    gap: 6px 16px;
  }

  .bh-timeline__filter-heading {
    font-size: 20px;
  }

  .bh-timeline__filter-label {
    font-size: 12px;
  }

  .bh-timeline__chips {
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    /* Snap to chip starts so a flick lands cleanly on a year. Using
       "proximity" rather than "mandatory" so a slow drag still allows
       fine positioning. */
    scroll-snap-type: x proximity;
    /* Fade the rail's left + right edges so users get a visual cue that
       more chips exist off-screen. mask-image is safely ignored on
       browsers that don't support it. */
    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 18px,
      #000 calc(100% - 18px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 18px,
      #000 calc(100% - 18px),
      transparent 100%
    );
  }

  .bh-timeline__chip {
    flex-shrink: 0;
    min-height: 44px; /* WCAG 2.5.5 minimum tap target */
    padding: 10px 14px;
    font-size: 14px;
    scroll-snap-align: start;
  }

  .bh-timeline__body {
    gap: 32px;
  }

  .bh-timeline__row,
  .bh-timeline__row:nth-child(even) {
    gap: 14px;
    /* Body padding moved here so `var(--bh-tl-line-x)` resolves to the
       same coordinate space for both the body-level rail and the
       row-level badge. */
    padding: 0 16px;
    scroll-margin-top: 96px;
  }

  /* No height override — aspect-ratio in the base rule scales with width. */

  .bh-timeline__title {
    font-size: 22px;
    line-height: 1.3;
  }

  .bh-timeline__summary {
    font-size: 15px;
  }

  .bh-timeline__readmore {
    font-size: 15px;
    gap: 10px;
  }

  .bh-timeline__impact {
    padding: 14px;
  }

  .bh-timeline__impact-text {
    font-size: 15px;
  }

  .bh-timeline__cta {
    padding: 14px 24px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .bh-timeline__body {
    gap: 28px;
  }

  .bh-timeline__row,
  .bh-timeline__row:nth-child(even) {
    gap: 12px;
    padding: 0 12px;
  }

  .bh-timeline__title {
    font-size: 19px;
  }

  .bh-timeline__summary,
  .bh-timeline__impact-text {
    font-size: 14px;
  }

  .bh-timeline__badge {
    font-size: 11px;
  }

  .bh-timeline__media,
  .bh-timeline__row:nth-child(even) .bh-timeline__media {
    /* Slightly squarer on small phones so faces in cover-fit images
       aren't cropped to a sliver. */
    aspect-ratio: 4 / 3;
  }

  .bh-timeline__chip {
    padding: 9px 12px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bh-timeline__chip,
  .bh-timeline__readmore,
  .bh-timeline__cta {
    transition: none;
  }
  .bh-timeline__readmore:hover,
  .bh-timeline__readmore:focus-visible,
  a.bh-timeline__cta:hover,
  a.bh-timeline__cta:focus-visible {
    transform: none;
  }
}