/* Yuvalim City Boy - timeline chart.
   The axis runs left to right even though the site is RTL, so the whole chart
   is an ltr island. */

.yvt{
  direction: ltr;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}

/* filter pills sit above the chart, pushed to the right edge */
.yvt__filters{
  direction: rtl;
  display: flex;
  gap: clamp(10px, 1.2vw, 23px);
  align-self: flex-start;
  margin-bottom: clamp(18px, 2.66vw, 51px);
}
.yvt__pill{
  width: clamp(120px, 10.625vw, 204px);
  height: clamp(34px, 2.3438vw, 45px);
  border-radius: 56px;
  border: 1.5px solid transparent;
  /* Hebrew has no descenders, so a button centred on the full line box reads as
     sitting low. A hair of padding under the text evens it out. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px;
  font-family: inherit;
  /* 20px, not the design's 24: Heebo runs wider than the font in the mockup and
     at 24 the label crowds the capsule instead of sitting inside it */
  font-size: clamp(12px, 1.0417vw, 20px);
  letter-spacing: -.02em;
  color: var(--Ink, #020202);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease, filter .25s ease;
}
.yvt__pill:focus, .yvt__pill:focus-visible, .yvt__pill:active{ outline: none; box-shadow: none; }
.yvt__pill[data-group="future"]{ background: #8BC0FD; }
.yvt__pill[data-group="marketing"]{ background: var(--Accent, #FDF48B); }
/* the pills look the same in every state of the design, so pressing one only
   gives a small physical response - no lightening, the label stays ink */
.yvt__pill:hover{ transform: translateY(-1px); box-shadow: 0 3px 10px rgba(2, 2, 2, .16); }
.yvt__pill:active{ transform: translateY(1px); box-shadow: none; }
.yvt__pill:hover, .yvt__pill:active{ color: var(--Ink, #020202); }

.yvt__plot{ position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* year ruler */
.yvt__years{ position: relative; height: clamp(24px, 1.8229vw, 35px); flex: 0 0 auto; }
.yvt__year{
  position: absolute;
  top: 0;
  font-size: clamp(15px, 1.25vw, 24px);
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--Ink, #020202);
  white-space: nowrap;
}

/* vertical separators, drawn behind the bars from the ruler downwards */
.yvt__grid{ position: absolute; inset-block: 0; inset-inline: 0; pointer-events: none; z-index: 0; }
.yvt__gridline{ position: absolute; top: 0; bottom: 0; width: 1px; background: #C9C7BA; }

.yvt__rows{
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: clamp(18px, 2.55vw, 49px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(8px, 1.0417vw, 20px);
}
.yvt__row{ position: relative; height: clamp(28px, 2.5vw, 48px); flex: 0 0 auto; }

.yvt__bar{
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 47px;
  display: flex;
  align-items: center;
  /* collapsed to just the opening dot until it is opened */
  transform-origin: left center;
  cursor: pointer;
  transition: width .85s cubic-bezier(.22, 1, .36, 1), opacity .35s ease;
}
.yvt__bar.is-collapsed:hover .yvt__dot--start{ transform: scale(1.12); }
.yvt__dot--start{ transition: transform .25s ease; }
.yvt__bar[data-group="marketing"]{ background: var(--Accent, #FDF48B); }
.yvt__bar[data-group="future"]{ background: #8BC0FD; }

.yvt__dot{
  position: absolute;
  top: 50%;
  width: clamp(22px, 1.8229vw, 35px);
  height: clamp(22px, 1.8229vw, 35px);
  margin-top: calc(clamp(22px, 1.8229vw, 35px) / -2);
  border-radius: 50%;
  flex: 0 0 auto;
}
.yvt__dot--start{
  left: 8px;
  background: #F4F2E6;
  border: 2px solid var(--Ink, #020202);
}
/* while a bar is closed the dot is filled with its own colour, the way the
   design shows the collapsed state */
.yvt__bar.is-collapsed[data-group="marketing"] .yvt__dot--start{ background: var(--Accent, #FDF48B); }
.yvt__bar.is-collapsed[data-group="future"] .yvt__dot--start{ background: #8BC0FD; }
.yvt__dot--end{
  right: 8px;
  background: var(--Ink, #020202);
  transition: opacity .3s ease .25s;
}

.yvt__label{
  position: absolute;
  left: calc(8px + clamp(22px, 1.8229vw, 35px) + 12px);
  top: 50%;
  transform: translateY(-50%);
  direction: rtl;
  font-size: clamp(14px, 1.25vw, 24px);
  line-height: 1.4;
  letter-spacing: -.02em;
  color: var(--Ink, #020202);
  white-space: nowrap;
  transition: opacity .3s ease .2s;
}

/* collapsed state - the bar shrinks back to its opening dot */
.yvt__bar.is-collapsed{ width: calc(clamp(22px, 1.8229vw, 35px) + 16px) !important; }
.yvt__bar.is-collapsed .yvt__label,
.yvt__bar.is-collapsed .yvt__dot--end{ opacity: 0; transition-delay: 0s; }

/* hidden group - the row keeps its slot so nothing jumps */
.yvt__bar.is-off{ opacity: 0; pointer-events: none; }

@media (max-width: 1024px){
  .yvt__label{ font-size: 13px; }
  .yvt__rows{ gap: 6px; }
}

/* the half-year rules belong to the desktop ruler only */
.yvt__gridline--year{ display: none; }

/* Phone layout (Figma 35:3297): no filter pills, a year label every second
   year with the unlabelled years ruled instead, and taller bars. Every size is
   a share of the 1080-wide mobile frame (design px / 10.8 = vw), so the chart
   keeps its proportions and the page still fits one screen without scrolling. */
@media (max-width: 768px){
  /* the host is an Elementor block, and its own class sets display:block with a
     higher specificity - without this the plot never fills the chart */
  .yvt{ display: flex !important; }
  .yvt__filters{ display: none; }
  .yvt__gridline--half{ display: none; }
  .yvt__gridline--year{ display: block; }

  .yvt__years{ height: 4.9vw; }
  .yvt__year{ font-size: 4.44vw; }
  .yvt__year.is-odd{ display: none; }

  .yvt__rows{ margin-top: 4.3vw; gap: 4.17vw; justify-content: flex-start; }
  .yvt__row{ height: 6.85vw; flex: 0 0 auto; }

  .yvt__dot{ width: 4.44vw; height: 4.44vw; margin-top: -2.22vw; }
  .yvt__dot--start{ left: 1.48vw; border-width: 0.28vw; }
  .yvt__dot--end{ right: 1.48vw; }
  .yvt__bar.is-collapsed{ width: 7.4vw !important; }
  .yvt__label{ left: 7.77vw; font-size: 4.44vw; }
  /* a 25px lead would push the 2026 bars off the left edge at this width */
  .yvt{ --yvt-lead: 1.2vw; }
}

/* A short phone (or one with browser chrome eating the viewport) cannot hold
   ten bars at the design pitch, and the page must not scroll, so the chart
   steps down a size rather than pushing the button off screen. */
@media (max-width: 768px) and (max-height: 760px){
  .yvt__rows{ margin-top: 3vw; gap: 3.1vw; }
  .yvt__row{ height: 5.6vw; }
  .yvt__dot{ width: 3.7vw; height: 3.7vw; margin-top: -1.85vw; }
  .yvt__dot--start{ left: 1.2vw; }
  .yvt__dot--end{ right: 1.2vw; }
  .yvt__bar.is-collapsed{ width: 6.1vw !important; }
  .yvt__label{ left: 6.6vw; font-size: 3.8vw; }
  .yvt__year{ font-size: 3.8vw; }
}

@media (prefers-reduced-motion: reduce){
  .yvt__bar, .yvt__label, .yvt__dot--end{ transition: none; }
}

/* Last slide: "restart" button. Its Elementor width is fixed in vw, but the label
   grows with the font while padding and border do not, so between about 960 and
   1500px the box is narrower than the text and the arrow wraps. Keep the design
   width as a minimum and let the box grow with the label. */
.elementor .e-5f61531{ white-space: nowrap; }
@media (min-width: 768px){
  .elementor .e-5f61531{ width: auto; min-width: clamp(170px, 14.0625vw, 270px); }
}