/* =========================================================
   BVO Event Timeline v3.8
   Design principle:
   - Desktop: ONE horizontal centerline.
     Every node center, start diamond and calendar endpoint
     share the exact same Y coordinate.
     Date labels sit ABOVE the line.
   - Mobile: ONE vertical centerline.
     Every node center, connector and calendar endpoint
     share the exact same X coordinate.
   ========================================================= */

.bvo-et3{
  --bvo-blue:#005baa;
  --bvo-blue-dark:#004b8d;
  --bvo-navy:#003f7d;
  --bvo-text:#183b56;
  --bvo-muted:#657b8d;
  --bvo-border:#dceaf5;
  --bvo-soft:#f4f9fd;
  --bvo-gold:#d8a52a;
  --bvo-green:#16a765;
  width:100%;
  box-sizing:border-box;
  font-family:inherit;
  color:var(--bvo-text);
  position:relative;
  overflow:hidden;
}
.bvo-et3 *{box-sizing:border-box}

/* Filters */
.bvo-et3-filters{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 34px;
}
.bvo-et3-filter{
  appearance:none;
  border:1px solid #d7e5f0;
  background:#fff;
  color:var(--bvo-navy);
  border-radius:999px;
  padding:10px 20px;
  min-height:44px;
  font:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1.2;
  cursor:pointer;
  transition:.18s ease;
}
.bvo-et3-filter:hover{border-color:var(--bvo-blue);color:var(--bvo-blue)}
.bvo-et3-filter.is-active{
  background:var(--bvo-blue);
  border-color:var(--bvo-blue);
  color:#fff;
  box-shadow:0 5px 14px rgba(0,91,170,.18);
}

/* =========================
   DESKTOP
   ========================= */
.bvo-et3-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
  padding:82px 0 42px;
}

/* The only horizontal timeline. Its center is y=35px. */
.bvo-et3-grid:before{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  top:35px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    var(--bvo-blue) 0%,
    #76a3b9 36%,
    var(--bvo-gold) 55%,
    #76a3b9 74%,
    var(--bvo-blue) 100%
  );
  transform:translateY(-50%);
  z-index:0;
}

.bvo-et3-item{
  min-width:0;
  position:relative;
  z-index:1;
}

/* Date sits above its node, with a dedicated row. */
.bvo-et3-date-col{
  /* Two-row date stack, centered on the node.
     Row 1 = weekday, Row 2 = date. */
  position:absolute;
  left:50%;
  top:-118px;
  transform:translateX(-50%);
  width:96px;
  min-width:96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  white-space:normal;
  text-align:center;
  pointer-events:none;
  z-index:20;
  background:#fff;
  padding:5px 4px 6px;
  border-radius:9px;
}
.bvo-et3-date-day{
  order:2;
  display:block;
  width:100%;
  font-size:14px;
  line-height:1.05;
  font-weight:800;
  color:var(--bvo-navy);
}
.bvo-et3-date-weekday{
  order:1;
  display:block;
  width:100%;
  font-size:11px;
  line-height:1.05;
  font-weight:700;
  color:var(--bvo-muted);
}

/* Card starts well below the date + timeline, preventing overlap. */
.bvo-et3-card{
  min-width:0;
  position:relative;
  background:#fff;
  border:1px solid var(--bvo-border);
  border-radius:16px;
  padding:20px 14px 16px;
  margin:0 6px;
  box-shadow:0 7px 22px rgba(0,63,125,.08);
  display:flex;
  flex-direction:column;
  min-height:285px;
  overflow:visible;
  transition:transform .18s ease,box-shadow .18s ease;
}
.bvo-et3-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(0,63,125,.12);
}

/* Node center is exactly at y=35px:
   card top = 82px, pseudo top = -47px => node center = 35px. */
.bvo-et3-card:before{
  content:"";
  position:absolute;
  left:50%;
  top:-47px;
  width:18px;
  height:18px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
  border:5px solid var(--bvo-blue);
  box-shadow:0 0 0 5px rgba(0,91,170,.11);
  z-index:9;
}

/* Exactly one vertical connector between node center and card top. */
.bvo-et3-card:after{
  content:"";
  position:absolute;
  left:50%;
  top:-47px;
  width:2px;
  height:47px;
  transform:translateX(-50%);
  background:#a8c1d0;
  z-index:2;
}

.bvo-et3-icon{
  width:66px;
  height:66px;
  flex:0 0 66px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  font-size:33px;
  line-height:1;
  background:linear-gradient(145deg,#eef7ff,#f8fbfe);
  border:1px solid #d8e9f6;
  border-radius:50%;
  box-shadow:0 5px 14px rgba(0,91,170,.07);
}
.bvo-et3-title{
  margin:0 0 14px;
  color:var(--bvo-navy);
  font-size:16px;
  line-height:1.35;
  font-weight:700;
  min-height:44px;
  text-align:center;
}
.bvo-et3-meta{
  display:flex;
  flex-direction:column;
  gap:9px;
  color:var(--bvo-muted);
  font-size:12px;
  line-height:1.45;
}
.bvo-et3-meta>div{
  display:flex;
  gap:6px;
  align-items:flex-start;
}
.bvo-et3-meta .dashicons{
  font-size:16px;
  width:16px;
  height:16px;
  line-height:16px;
  color:var(--bvo-blue);
  flex:0 0 16px;
}
.bvo-et3-bottom{
  margin-top:auto;
  padding-top:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  text-align:center;
}
.bvo-et3-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:5px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  line-height:1.1;
  white-space:nowrap;
}
.bvo-et3-status-upcoming{background:#e8f8ef;color:#10824e}
.bvo-et3-status-current{background:#fff2d8;color:#b36a00}
.bvo-et3-status-past{background:#edf1f4;color:#697985}

.bvo-et3-info{
  display:block;
  width:100%;
  max-width:170px;
  border:1px solid var(--bvo-blue);
  background:var(--bvo-blue);
  color:#fff;
  border-radius:999px;
  font:inherit;
  font-size:12px;
  font-weight:700;
  padding:8px 12px;
  cursor:pointer;
  white-space:nowrap;
  text-align:center;
  transition:.18s ease;
}
.bvo-et3-info:hover{
  background:var(--bvo-blue-dark);
  border-color:var(--bvo-blue-dark);
  color:#fff;
  text-decoration:none;
}
.bvo-et3-info span{
  font-size:17px;
  line-height:0;
  vertical-align:-1px;
  margin-left:7px;
  color:var(--bvo-gold);
}
.bvo-et3-card[hidden]{display:none}

.bvo-et3-empty{
  padding:25px;
  border:1px dashed var(--bvo-border);
  background:var(--bvo-soft);
  border-radius:12px;
  text-align:center;
  color:var(--bvo-muted);
}

/* Start diamond: same exact Y as timeline. */
.bvo-et3-timeline-start{
  position:absolute;
  left:5%;
  top:35px;
  width:32px;
  height:32px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
  border:2px solid var(--bvo-blue);
  box-shadow:0 0 0 5px rgba(0,91,170,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bvo-blue);
  z-index:10;
}
.bvo-et3-timeline-start span{
  font-size:16px;
  line-height:1;
}

/* Calendar endpoint: same exact Y as timeline. */
.bvo-et3-timeline-end{
  position:absolute;
  right:5%;
  top:35px;
  width:38px;
  height:38px;
  transform:translate(50%,-50%);
  border-radius:50%;
  background:#fff;
  border:2px solid var(--bvo-blue);
  box-shadow:0 0 0 6px rgba(0,91,170,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bvo-blue);
  z-index:10;
}
.bvo-et3-timeline-end .dashicons{
  font-size:20px;
  width:20px;
  height:20px;
  line-height:20px;
}

/* Modal */
.bvo-et3-modal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:25px;
}
.bvo-et3-modal.is-open{display:flex}
.bvo-et3-backdrop{position:absolute;inset:0;background:rgba(0,20,45,.78)}
.bvo-et3-dialog{
  position:relative;
  z-index:2;
  max-width:min(94vw,1100px);
  max-height:92vh;
  background:#fff;
  border-radius:12px;
  padding:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.bvo-et3-modal-image{
  display:block;
  max-width:calc(94vw - 20px);
  max-height:calc(92vh - 20px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:7px;
}
.bvo-et3-close{
  position:absolute;
  right:8px;
  top:8px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:25px;
  line-height:34px;
  text-align:center;
  cursor:pointer;
  z-index:3;
}
.bvo-et3-no-scroll{overflow:hidden}

/* =========================================================
   DESKTOP ROW FIX v4.8
   - Desktop only (>=1101px)
   - Exactly 6 event columns on one horizontal row.
   - Flex is used here deliberately so no event can wrap to row 2,
     even when Flatsome/UX Builder injects width/min-width rules.
   - Timeline/date/node geometry remains unchanged.
   ========================================================= */
@media (min-width:1101px){
  .bvo-et3-grid{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  .bvo-et3-item{
    flex:1 1 0 !important;
    width:0 !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }

  .bvo-et3-card{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin-left:6px !important;
    margin-right:6px !important;
  }
}

/* Tablet */
@media (max-width:1100px){
  .bvo-et3-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    row-gap:42px;
  }
  .bvo-et3-grid:before{left:8%;right:8%}
  .bvo-et3-timeline-start{left:8%}
  .bvo-et3-timeline-end{right:8%}
}

/* =========================
   MOBILE
   ========================= */
@media (max-width:650px){
  /*
   * MOBILE v4.5 — rebuilt geometry
   *
   * Fixed horizontal zones:
   *   date zone | timeline | connector | event card
   *
   * Timeline center = 62px.
   * Date group center = 40px (22px LEFT of node) so it is
   * visually separated from the node while remaining aligned
   * to the node/connector centerline.
   *
   * Card starts at x=104px, giving the connector a clean
   * 42px run from the timeline to the card.
   */

  .bvo-et3{
    width:100%;
    max-width:100%;
    overflow:hidden;
    padding:0 0 12px;
    background:
      radial-gradient(circle at 96% 12%,rgba(0,91,170,.08),transparent 28%),
      linear-gradient(180deg,#fff 0%,#f6fbff 100%);
  }

  .bvo-et3-filters{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:6px;
    width:100%;
    margin:0 0 24px;
    padding:0 2px;
  }

  .bvo-et3-filter{
    width:100%;
    min-width:0;
    min-height:42px;
    padding:8px 2px;
    font-size:10.5px;
    line-height:1.15;
    letter-spacing:-.2px;
    white-space:nowrap;
  }

  /*
   * The timeline itself is a separate absolute rail.
   * It does NOT participate in card sizing.
   */
  .bvo-et3-grid{
    display:block;
    position:relative;
    width:100%;
    max-width:100%;
    padding:86px 0 64px;
    margin:0;
  }

  /*
   * REAL MOBILE RAIL — an actual element, not ::before.
   * This avoids Flatsome/theme pseudo-element collisions.
   * Center line = x:62px.
   */
  .bvo-et3-mobile-rail{
    position:absolute !important;
    left:72px !important;
    top:38px !important;
    bottom:34px !important;
    width:4px !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    border:0 !important;
    border-radius:999px !important;
    background:linear-gradient(
      180deg,
      var(--bvo-blue) 0%,
      #72a5c2 38%,
      var(--bvo-gold) 62%,
      #72a5c2 80%,
      var(--bvo-blue) 100%
    ) !important;
    transform:translateX(-50%) !important;
    opacity:1 !important;
    visibility:visible !important;
    z-index:0 !important;
    pointer-events:none !important;
  }

  /* Disable the old pseudo rail only on mobile. */
  .bvo-et3-grid:before{
    content:none !important;
    display:none !important;
  }

  /*
   * Every event is a fixed 100%-width row.
   * No CSS grid/flex sizing is allowed to squeeze the card.
   */
  .bvo-et3-item{
    position:relative;
    display:block;
    width:100%;
    min-height:0;
    margin:0 0 20px;
    padding:0;
    z-index:1;
  }

  /*
   * Date group is positioned independently.
   * Its center is x=27px, while the node/rail center is x=72px.
   * Thus the group is clearly separated from the node.
   */
  .bvo-et3-date-col{
    position:absolute;
    left:27px;
    top:0;
    transform:translateX(-50%);
    width:64px;
    min-width:64px;
    height:54px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    margin:0;
    padding:0;
    text-align:center;
    white-space:normal;
    background:transparent;
    border:0;
    box-shadow:none;
    z-index:5;
    pointer-events:none;
  }

  .bvo-et3-date-weekday{
    order:1;
    display:block;
    width:100%;
    margin:0;
    font-size:10.5px;
    line-height:1.05;
    font-weight:700;
    color:var(--bvo-navy);
  }

  .bvo-et3-date-day{
    order:2;
    display:block;
    width:100%;
    margin:0;
    font-size:17px;
    line-height:1.05;
    font-weight:800;
    color:var(--bvo-navy);
  }

  /*
   * Card occupies the entire area to the right of the timeline.
   * 104px start + 8px right padding = predictable width.
   */
  .bvo-et3-card{
    position:relative;
    display:flex;
    width:calc(100% - 104px);
    max-width:none;
    min-width:0;
    min-height:0;
    margin:0 8px 0 104px;
    padding:18px 15px 15px;
    border-radius:17px;
    overflow:visible;
    box-shadow:0 7px 22px rgba(0,63,125,.08);
  }

  /*
   * Node center:
   * x = 62px
   * y = 28px
   * It is independent of date and card dimensions.
   */
  .bvo-et3-card:before{
    content:"";
    position:absolute;
    left:-32px;
    top:28px;
    width:18px;
    height:18px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:#fff;
    border:5px solid var(--bvo-blue);
    box-shadow:0 0 0 4px rgba(0,91,170,.10);
    z-index:8;
  }

  /*
   * Exactly ONE connector — ends exactly at the card's outer edge.
   * Timeline/node center = 72px; card left edge = 104px.
   * Therefore connector length = 32px, with no overlap into the card.
   * Its vertical center remains exactly aligned with the node center.
   */
  .bvo-et3-card:after{
    content:"";
    position:absolute;
    left:-32px;
    top:28px;
    width:32px;
    height:3px;
    transform:translateY(-50%);
    background:var(--bvo-blue);
    border-radius:999px;
    z-index:2;
  }

  .bvo-et3-icon{
    width:62px;
    height:62px;
    flex:0 0 62px;
    font-size:31px;
    margin:0 auto 12px;
  }

  .bvo-et3-title{
    font-size:17px;
    line-height:1.3;
    min-height:0;
    margin:0 0 13px;
    text-align:center;
  }

  .bvo-et3-meta{
    font-size:13px;
    line-height:1.45;
    gap:9px;
  }

  .bvo-et3-meta>div{
    gap:7px;
  }

  .bvo-et3-meta .dashicons{
    flex:0 0 18px;
    width:18px;
    font-size:18px;
    line-height:18px;
  }

  .bvo-et3-bottom{
    padding-top:14px;
    gap:9px;
  }

  .bvo-et3-status{
    min-height:28px;
    padding:6px 12px;
    font-size:12px;
  }

  .bvo-et3-info{
    width:100%;
    max-width:none;
    min-height:42px;
    padding:10px 14px;
    font-size:13px;
  }

  /*
   * Diamond:
   * same x as timeline (72px), at the very top of the rail.
   * It does not share a box with the date group.
   */
  .bvo-et3-timeline-start{
    left:72px;
    top:38px;
    width:30px;
    height:30px;
    transform:translate(-50%,-50%);
    z-index:10;
  }

  .bvo-et3-timeline-start span{
    font-size:14px;
  }

  /*
   * Calendar endpoint:
   * same x as timeline (72px).
   */
  .bvo-et3-timeline-end{
    left:72px;
    right:auto;
    top:auto;
    bottom:3px;
    width:36px;
    height:36px;
    transform:translate(-50%,50%);
    z-index:10;
  }

  .bvo-et3-timeline-end .dashicons{
    font-size:20px;
    width:20px;
    height:20px;
    line-height:20px;
  }

  /*
   * Small phones: preserve the same geometry but give the card
   * slightly more width by moving the rail 56px left.
   */
  @media (max-width:380px){
    /* Keep the same visual axis on small phones. The card geometry remains unchanged. */
    .bvo-et3-mobile-rail{left:66px !important}
    .bvo-et3-timeline-start{left:66px}
    .bvo-et3-timeline-end{left:66px}
    .bvo-et3-date-col{left:22px}
    .bvo-et3-card{
      width:calc(100% - 94px);
      margin-left:94px;
      margin-right:6px;
    }
    .bvo-et3-card:before,
    .bvo-et3-card:after{left:-28px}
    .bvo-et3-card:after{width:28px}
  }

  /* =========================================================
     MOBILE v5.0
     Hide status filter buttons and reclaim their vertical space.
     Desktop remains untouched. Mobile card geometry remains unchanged; only the timeline axis is shifted right.
     ========================================================= */
  .bvo-et3-filters{
    display:none !important;
  }

  .bvo-et3-grid{
    margin-top:0 !important;
    padding-top:58px !important;
  }
}