/* ==========================================================================
   WBI Timeline
   Self-contained component. Every visual value is a `--wbi-tl-*` custom
   property, so the Bricks element only has to override variables.
   ========================================================================== */

.wbi-timeline {
  /* --- Brand: WBI gradient -------------------------------------------- */
  --wbi-tl-brand-1: #D6630F;
  --wbi-tl-brand-2: #FFCD2E;
  --wbi-tl-brand-3: #199C64;
  --wbi-tl-brand-4: #3E94B9;

  /* --- Axis ------------------------------------------------------------ */
  --wbi-tl-axis-color: #C9CBCD;
  --wbi-tl-axis-thickness: 2px;
  --wbi-tl-axis-dash: 9px;
  --wbi-tl-axis-gap: 7px;
  --wbi-tl-axis-edge: 32px;          /* room before the 1st milestone / after the last */
  --wbi-tl-start-size: 11px;
  --wbi-tl-start-color: #C9CBCD;
  --wbi-tl-arrow-size: 9px;
  --wbi-tl-arrow-thickness: 2px;
  --wbi-tl-arrow-color: #B7B9BB;

  /* --- Pin: ball + stem, two shapes -------------------------------------
     The ball is a separate circle, much wider than the stem, centered on
     the axis. Each shape carries its own linear gradient. */
  --wbi-tl-ball-size: 14px;
  --wbi-tl-stem-w: 5px;
  --wbi-tl-pin-h: 52px;
  --wbi-tl-ball-from: var(--wbi-tl-brand-1);  /* orange */
  --wbi-tl-ball-to: var(--wbi-tl-brand-2);    /* yellow */
  --wbi-tl-ball-angle: 135deg;
  --wbi-tl-stem-from: var(--wbi-tl-brand-2);  /* yellow, next to the ball */
  --wbi-tl-stem-to: var(--wbi-tl-brand-3);    /* green, at the tip */
  --wbi-tl-pin-image-w: var(--wbi-tl-ball-size);

  /* --- Card ------------------------------------------------------------ */
  --wbi-tl-card-bg: #EEF0F1;
  --wbi-tl-card-radius: 12px;
  --wbi-tl-card-pad: 24px;
  --wbi-tl-card-width: 265px;
  /* The year block is narrower than the card: that is what makes the
     subtitle wrap onto two lines as in the design. */
  --wbi-tl-year-width: 165px;
  --wbi-tl-card-offset-x: 0px;
  --wbi-tl-notch-depth: 40px;        /* 0 = no notch */
  --wbi-tl-notch-width: 26%;

  /* The card outline is drawn by two pseudo-elements, so only drop-shadow()
     follows its real contour; box-shadow would paint the rectangle.
     With a transparent color it draws nothing, which is the default. */
  --wbi-tl-card-shadow-x: 0px;
  --wbi-tl-card-shadow-y: 6px;
  --wbi-tl-card-shadow-blur: 16px;
  --wbi-tl-card-shadow-color: transparent;
  --wbi-tl-card-shadow: drop-shadow(
    var(--wbi-tl-card-shadow-x) var(--wbi-tl-card-shadow-y)
    var(--wbi-tl-card-shadow-blur) var(--wbi-tl-card-shadow-color)
  );

  /* --- Text boxes -------------------------------------------------------
     The background is declared here; padding and margin are NOT. Bricks
     dimension controls emit one token per side (`-top`, `-right`...) and
     only for the sides the editor filled in, so they are read with a
     fallback where they are consumed. Declaring them here would pin them
     to 0 and the fallback would never apply. */
  --wbi-tl-year-num-bg: transparent;
  --wbi-tl-lead-bg: transparent;

  /* --- Typography -------------------------------------------------------
     Sizes are in `em` against --wbi-tl-base, not in `rem`: many themes
     (Bricks included) set the root to 10px with font-size:62.5%, and with
     `rem` the component would shrink by 37% without anyone asking. To make
     it follow the theme on purpose, set --wbi-tl-base: 1rem. */
  --wbi-tl-base: 16px;
  /* Theme Styles > WBI Elements > Font (see wbi-fonts.css) */
  --wbi-tl-font: var(--wbi-font), system-ui, -apple-system, "Segoe UI", sans-serif;

  --wbi-tl-year-size: clamp(2.5em, 1.6em + 2.2vw, 3.75em);
  --wbi-tl-year-weight: 800;
  --wbi-tl-year-lh: 1;
  --wbi-tl-year-ls: -0.02em;
  --wbi-tl-year-color: #3A3A3A;

  --wbi-tl-lead-size: clamp(1em, 0.9em + 0.3vw, 1.125em);
  --wbi-tl-lead-weight: 700;
  --wbi-tl-lead-lh: 1.35;
  --wbi-tl-lead-color: #2B2B2B;
  --wbi-tl-lead-gap: 14px;

  --wbi-tl-body-size: clamp(0.9375em, 0.9em + 0.15vw, 1em);
  --wbi-tl-body-weight: 400;
  --wbi-tl-body-lh: 1.6;
  --wbi-tl-body-color: #3A3A3A;
  --wbi-tl-body-strong-weight: 700;
  --wbi-tl-body-strong-color: inherit;

  /* --- Layout ---------------------------------------------------------- */
  --wbi-tl-col-gap: 28px;
  --wbi-tl-col-min: 210px;
  --wbi-tl-card-clearance: var(--wbi-tl-pin-h);  /* gap axis -> card */
  --wbi-tl-year-clearance: 30px;                 /* gap axis -> year */

  /* --- Carousel -------------------------------------------------------- */
  --wbi-tl-per-view: 2;       /* container 540-899px */
  --wbi-tl-per-view-sm: 1.15; /* container < 540px */
  --wbi-tl-dot-size: 9px;
  --wbi-tl-dot-size-active: 13px;
  --wbi-tl-dot-color: #D2D4D6;
  --wbi-tl-dot-color-active: #2B2B2B;
  --wbi-tl-dot-gap: 16px;
  --wbi-tl-dots-offset: 40px;

  /* --- Animation ------------------------------------------------------- */
  --wbi-tl-reveal-shift: 14px;
  --wbi-tl-reveal-duration: 420ms;
  --wbi-tl-reveal-stagger: 90ms;
  --wbi-tl-reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  container-type: inline-size;
  container-name: wbitl;
  font-family: var(--wbi-tl-font);
  font-size: var(--wbi-tl-base);
  position: relative;

  /* Required, not cosmetic: `container-type: inline-size` stops the content
     from contributing intrinsic width, and Bricks containers are flex with
     `align-items: flex-start`, so the element does not stretch on its own.
     Without this, it collapses to 0 px wide inside the builder. */
  width: 100%;
}

.wbi-timeline *,
.wbi-timeline *::before,
.wbi-timeline *::after { box-sizing: border-box; }

/* ==========================================================================
   Viewport + track
   ========================================================================== */

/* The scroll padding matches the track's inline padding, so the first snap
   point is 0. Without it the browser snapped the strip to the first milestone
   on load (32 px on phones), before the first paint, and Chrome takes that
   scroll for user input: it stops recording LCP and the page reports none. */
.wbi-timeline__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--wbi-tl-axis-edge);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wbi-timeline__viewport::-webkit-scrollbar { display: none; }

.wbi-timeline__viewport:focus-visible {
  outline: 2px solid var(--wbi-tl-brand-4);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Explicit columns (the markup prints --wbi-tl-count): without them,
   `grid-column: 1 / -1` on the axis would not span the implicit columns. */
.wbi-timeline__track {
  display: grid;
  grid-template-columns:
    repeat(var(--wbi-tl-count, 4), minmax(var(--wbi-tl-col-min), 1fr));
  /* The axis row is 0 tall: the axis and the node center on it and overflow.
     If it were `auto`, it would take the height of the start dot and push
     the cards a few pixels further than their own token says. */
  grid-template-rows: 1fr 0 1fr;
  column-gap: var(--wbi-tl-col-gap);
  padding-inline: var(--wbi-tl-axis-edge);
  margin: 0;
  list-style: none;
  min-width: 100%;
}

/* --- Axis: dashed line + start dot -------------------------------------
   It is a grid item spanning every column, not an absolute: that way it
   covers the full scrollable width and not just the visible part. */
.wbi-timeline__track::before {
  content: "";
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  margin-inline: calc(-1 * var(--wbi-tl-axis-edge));
  height: max(var(--wbi-tl-start-size), var(--wbi-tl-axis-thickness));
  background-image:
    radial-gradient(
      circle closest-side,
      var(--wbi-tl-start-color) 99%,
      transparent 100%
    ),
    repeating-linear-gradient(
      to right,
      var(--wbi-tl-axis-color) 0 var(--wbi-tl-axis-dash),
      transparent var(--wbi-tl-axis-dash)
        calc(var(--wbi-tl-axis-dash) + var(--wbi-tl-axis-gap))
    );
  background-size:
    var(--wbi-tl-start-size) var(--wbi-tl-start-size),
    calc(100% - var(--wbi-tl-start-size) - 12px) var(--wbi-tl-axis-thickness);
  background-position: left center, right center;
  background-repeat: no-repeat;
}

/* --- Axis: arrowhead --------------------------------------------------- */
.wbi-timeline__track::after {
  content: "";
  grid-row: 2;
  grid-column: -2 / -1;
  justify-self: end;
  align-self: center;
  width: var(--wbi-tl-arrow-size);
  height: var(--wbi-tl-arrow-size);
  margin-right: calc(-1 * var(--wbi-tl-axis-edge));
  border-top: var(--wbi-tl-arrow-thickness) solid var(--wbi-tl-arrow-color);
  border-right: var(--wbi-tl-arrow-thickness) solid var(--wbi-tl-arrow-color);
  rotate: 45deg;
}

/* ==========================================================================
   Milestone
   ========================================================================== */

.wbi-timeline__item {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  scroll-snap-align: start;
  justify-items: center;
}

/* Node: cell on the axis that anchors the pin */
.wbi-timeline__node {
  grid-row: 2;
  position: relative;
  width: var(--wbi-tl-stem-w);
  height: 0;
  align-self: center;
}

/* The .pin element IS the stem; the ball is its ::before */
.wbi-timeline__pin {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--wbi-tl-pin-h);
  border-radius: 999px;
  background: linear-gradient(
    to bottom,
    var(--wbi-tl-stem-from),
    var(--wbi-tl-stem-to)
  );
}

.wbi-timeline__pin::before {
  content: "";
  position: absolute;
  left: 50%;
  width: var(--wbi-tl-ball-size);
  height: var(--wbi-tl-ball-size);
  border-radius: 50%;
  background: linear-gradient(
    var(--wbi-tl-ball-angle),
    var(--wbi-tl-ball-from),
    var(--wbi-tl-ball-to)
  );
}

/* Card below -> stem points down, ball centered on the axis */
[data-card="bottom"] .wbi-timeline__pin {
  top: 0;
  transform-origin: 50% 0;
}
[data-card="bottom"] .wbi-timeline__pin::before {
  top: 0;
  translate: -50% -50%;
}

/* Card above -> stem points up, gradient reversed */
[data-card="top"] .wbi-timeline__pin {
  bottom: 0;
  transform-origin: 50% 100%;
  background: linear-gradient(
    to top,
    var(--wbi-tl-stem-from),
    var(--wbi-tl-stem-to)
  );
}
[data-card="top"] .wbi-timeline__pin::before {
  bottom: 0;
  translate: -50% 50%;
}

/* ==========================================================================
   Modifiers toggled by the Bricks controls
   ========================================================================== */

/* Hide the start dot: the axis height becomes just its thickness. It is set
   on the track and not on the root, because Bricks writes the size control
   on the root with an id selector (#brxe-x) that would beat this class. A
   value declared on the track wins over the inherited one regardless. */
.wbi-timeline--no-start .wbi-timeline__track { --wbi-tl-start-size: 0px; }
.wbi-timeline--no-arrow .wbi-timeline__track::after { display: none; }

/* Custom image instead of the CSS pin: replaces ball and stem at once.
   The origin goes back to the center so it can be flipped on the top
   milestones. */
.wbi-timeline--pin-image .wbi-timeline__node {
  width: var(--wbi-tl-pin-image-w);
}
.wbi-timeline--pin-image .wbi-timeline__pin {
  background: var(--wbi-tl-pin-image) center / contain no-repeat;
  border-radius: 0;
}
.wbi-timeline--pin-image .wbi-timeline__pin::before { display: none; }
.wbi-timeline--pin-image [data-card="top"] .wbi-timeline__pin {
  transform: scaleY(-1);
  transform-origin: 50% 50%;
}

/* --- Placement of the two blocks --------------------------------------- */
[data-card="bottom"] .wbi-timeline__year {
  grid-row: 1;
  align-self: end;
  padding-bottom: var(--wbi-tl-year-clearance);
}
[data-card="bottom"] .wbi-timeline__card {
  grid-row: 3;
  align-self: start;
  margin-top: var(--wbi-tl-card-clearance);
}
[data-card="top"] .wbi-timeline__card {
  grid-row: 1;
  align-self: end;
  margin-bottom: var(--wbi-tl-card-clearance);
}
[data-card="top"] .wbi-timeline__year {
  grid-row: 3;
  align-self: start;
  padding-top: var(--wbi-tl-year-clearance);
}

/* ==========================================================================
   Year block
   ========================================================================== */

.wbi-timeline__year {
  width: min(var(--wbi-tl-year-width), 100%);
  translate: var(--wbi-tl-card-offset-x) 0;
}

.wbi-timeline__year-num {
  display: block;
  padding:
    var(--wbi-tl-year-num-pad-top, 0px) var(--wbi-tl-year-num-pad-right, 0px)
    var(--wbi-tl-year-num-pad-bottom, 0px) var(--wbi-tl-year-num-pad-left, 0px);
  margin:
    var(--wbi-tl-year-num-margin-top, 0px) var(--wbi-tl-year-num-margin-right, 0px)
    var(--wbi-tl-year-num-margin-bottom, 0px) var(--wbi-tl-year-num-margin-left, 0px);
  background: var(--wbi-tl-year-num-bg);
  font-size: var(--wbi-tl-year-size);
  font-weight: var(--wbi-tl-year-weight);
  line-height: var(--wbi-tl-year-lh);
  letter-spacing: var(--wbi-tl-year-ls);
  color: var(--wbi-tl-year-color);
}

.wbi-timeline__year-lead {
  display: block;
  padding:
    var(--wbi-tl-lead-pad-top, 0px) var(--wbi-tl-lead-pad-right, 0px)
    var(--wbi-tl-lead-pad-bottom, 0px) var(--wbi-tl-lead-pad-left, 0px);
  /* The top side belongs to --wbi-tl-lead-gap and the margin control does
     not offer it: adding them with calc() would break as soon as the editor
     typed a 0, because Bricks emits zeros without a unit and
     calc(14px + 0) is invalid. */
  margin:
    var(--wbi-tl-lead-gap)
    var(--wbi-tl-lead-margin-right, 0px)
    var(--wbi-tl-lead-margin-bottom, 0px)
    var(--wbi-tl-lead-margin-left, 0px);
  background: var(--wbi-tl-lead-bg);
  font-size: var(--wbi-tl-lead-size);
  font-weight: var(--wbi-tl-lead-weight);
  line-height: var(--wbi-tl-lead-lh);
  color: var(--wbi-tl-lead-color);
  text-wrap: balance;
}

/* ==========================================================================
   Card - outline = union of two rounded rectangles.
   Perfectly rounded corners without mask or clip-path, over any background.
   ========================================================================== */

.wbi-timeline__card {
  position: relative;
  width: min(var(--wbi-tl-card-width), 100%);
  translate: var(--wbi-tl-card-offset-x) 0;
  padding: var(--wbi-tl-card-pad);
  /* Sides only: the vertical gap from the axis is
     --wbi-tl-card-clearance and lives in the Layout group. */
  margin:
    var(--wbi-tl-card-margin-top, 0px) var(--wbi-tl-card-margin-right, 0px)
    var(--wbi-tl-card-margin-bottom, 0px) var(--wbi-tl-card-margin-left, 0px);
  filter: var(--wbi-tl-card-shadow, none);
}

.wbi-timeline__card::before,
.wbi-timeline__card::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: var(--wbi-tl-card-bg);
  border-radius: var(--wbi-tl-card-radius);
}

/* Larger rectangle: full width, set back on the notched edge */
.wbi-timeline__card::before { inset: 0; }
/* Smaller rectangle: full height, width cut by the notch */
.wbi-timeline__card::after  { inset: 0; }

[data-card="bottom"] .wbi-timeline__card::before { top: var(--wbi-tl-notch-depth); }
[data-card="bottom"] .wbi-timeline__card::after  { right: var(--wbi-tl-notch-width); }
[data-card="bottom"] .wbi-timeline__card {
  padding-top: calc(var(--wbi-tl-notch-depth) + var(--wbi-tl-card-pad));
}

[data-card="top"] .wbi-timeline__card::before { bottom: var(--wbi-tl-notch-depth); }
[data-card="top"] .wbi-timeline__card::after  { right: var(--wbi-tl-notch-width); }
[data-card="top"] .wbi-timeline__card {
  padding-bottom: calc(var(--wbi-tl-notch-depth) + var(--wbi-tl-card-pad));
}

.wbi-timeline__card-body {
  position: relative;
  z-index: 1;
  font-size: var(--wbi-tl-body-size);
  font-weight: var(--wbi-tl-body-weight);
  line-height: var(--wbi-tl-body-lh);
  color: var(--wbi-tl-body-color);
  overflow-wrap: anywhere;
}

.wbi-timeline__card-body > :first-child { margin-top: 0; }
.wbi-timeline__card-body > :last-child { margin-bottom: 0; }
.wbi-timeline__card-body strong,
.wbi-timeline__card-body b {
  font-weight: var(--wbi-tl-body-strong-weight);
  color: var(--wbi-tl-body-strong-color);
}

/* ==========================================================================
   Carousel dots
   ========================================================================== */

.wbi-timeline__dots {
  display: none;
  justify-content: center;
  align-items: center;
  margin-top: var(--wbi-tl-dots-offset);
}

.wbi-timeline--scrollable .wbi-timeline__dots { display: flex; }

.wbi-timeline__dot {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  /* 44x44 touch target even though the visible dot is 9px */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-inline: calc(var(--wbi-tl-dot-gap) / 2 - 22px);
}

.wbi-timeline__dot::before {
  content: "";
  width: var(--wbi-tl-dot-size);
  height: var(--wbi-tl-dot-size);
  border-radius: 50%;
  background: var(--wbi-tl-dot-color);
  transition: width 200ms ease, height 200ms ease, background-color 200ms ease;
}

.wbi-timeline__dot[aria-current="true"]::before {
  width: var(--wbi-tl-dot-size-active);
  height: var(--wbi-tl-dot-size-active);
  background: var(--wbi-tl-dot-color-active);
}

.wbi-timeline__dot:focus-visible {
  outline: 2px solid var(--wbi-tl-brand-4);
  outline-offset: -12px;
  border-radius: 50%;
}

/* ==========================================================================
   Carousel mode - the component reacts to ITS container, not the viewport
   ========================================================================== */

/* These rules target descendants, never .wbi-timeline: an element is not
   reached by the container query it defines itself.

   Only structure changes here. Cosmetic tokens (padding, gaps, notch...)
   keep a single value so each Bricks control governs them completely, with
   their own breakpoints when needed. */
@container wbitl (max-width: 899px) {
  /* A percentage in track sizing already resolves against the content box,
     so the side padding is not subtracted again here. */
  .wbi-timeline__track {
    grid-template-columns: repeat(var(--wbi-tl-count, 4), calc(
      (100% - (var(--wbi-tl-per-view) - 1) * var(--wbi-tl-col-gap))
      / var(--wbi-tl-per-view)
    ));
  }

  /* The card fills the column; the year block keeps its short width so the
     subtitle keeps wrapping as in the design. */
  .wbi-timeline__card { width: 100%; }
}

/* Indirection so the value still comes from a root token and the Bricks
   control can change it despite the specificity of this rule. */
@container wbitl (max-width: 539px) {
  .wbi-timeline__viewport { --wbi-tl-per-view: var(--wbi-tl-per-view-sm, 1.15); }
}

/* ==========================================================================
   Reveal - only turned on by JS, so without JS everything stays visible
   ========================================================================== */

.wbi-timeline--js .wbi-timeline__year,
.wbi-timeline--js .wbi-timeline__card {
  opacity: 0;
  translate: var(--wbi-tl-card-offset-x) var(--wbi-tl-reveal-shift);
  transition:
    opacity var(--wbi-tl-reveal-duration) var(--wbi-tl-reveal-ease),
    translate var(--wbi-tl-reveal-duration) var(--wbi-tl-reveal-ease);
  transition-delay: calc(var(--wbi-tl-i, 0) * var(--wbi-tl-reveal-stagger));
}

.wbi-timeline--js .wbi-timeline__pin {
  opacity: 0;
  scale: 1 0.3;
  transition:
    opacity var(--wbi-tl-reveal-duration) var(--wbi-tl-reveal-ease),
    scale var(--wbi-tl-reveal-duration) var(--wbi-tl-reveal-ease);
  transition-delay: calc(var(--wbi-tl-i, 0) * var(--wbi-tl-reveal-stagger));
}

.wbi-timeline--js.is-revealed .wbi-timeline__year,
.wbi-timeline--js.is-revealed .wbi-timeline__card {
  opacity: 1;
  translate: var(--wbi-tl-card-offset-x) 0;
}

.wbi-timeline--js.is-revealed .wbi-timeline__pin {
  opacity: 1;
  scale: 1 1;
}

@media (prefers-reduced-motion: reduce) {
  .wbi-timeline--js .wbi-timeline__year,
  .wbi-timeline--js .wbi-timeline__card {
    opacity: 1;
    translate: var(--wbi-tl-card-offset-x) 0;
    transition: none;
  }
  .wbi-timeline--js .wbi-timeline__pin {
    opacity: 1;
    scale: 1 1;
    transition: none;
  }
  .wbi-timeline__dot::before { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .wbi-timeline__viewport { scroll-behavior: smooth; }
}