/* =========================================================
   BNS Treatment Journey — widget + modal styles
   Scope: .bns7-widget (widget), .bns7-ov / .bns7-modal (overlay)
   Accent colour: var(--accent, #4a9ebb) — set as inline CSS var
   Google Fonts & Tabler Icons are enqueued separately by PHP.
   ========================================================= */

/* ── WIDGET WRAPPER ── */
.bns7-widget {
  background: #111;
  font-family: 'Montserrat', sans-serif;
  padding: 0.25rem 2rem 2.5rem;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  color: #fff;
  overflow-x: clip; /* prevent any child from causing horizontal scroll */
  --inter-gap: 2.5rem; /* space between Group 1 and Group 2 card pairs */
}
.bns7-widget *,
.bns7-widget *::before,
.bns7-widget *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── HEADER ── */
.bns7-widget .b7-head {
  margin-bottom: 2.5rem;
}
.bns7-widget .b7-head p {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #888;
}

/* ── SUMMARY HEADER ── */
.bns7-widget .b7-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0 2.25rem;
  margin-bottom: 1.75rem;
  position: relative;
}
/* Fading rule below */
.bns7-widget .b7-summary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right, transparent, #252525 25%, #252525 75%, transparent);
}
/* Eyebrow — flanked by thin lines */
.bns7-widget .b7-summary-eyebrow {
  display: flex !important;
  align-items: center;
  gap: 14px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #888;
}
.bns7-widget .b7-summary-eyebrow::before,
.bns7-widget .b7-summary-eyebrow::after {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: #444;
}
/* Stats row — two blocks separated by a thin vertical divider */
.bns7-widget .b7-summary-stats {
  display: flex !important;
  align-items: center;
  gap: 2.5rem;
}
.bns7-widget .b7-summary-stat {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}
.bns7-widget .b7-summary-stat-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #eee;
  line-height: 1;
}
.bns7-widget .b7-summary-stat-label {
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: #888;
}
/* Vertical divider between the two stats */
.bns7-widget .b7-summary-divider {
  display: block !important;
  width: 1px;
  height: 36px;
  background: #252525;
  flex-shrink: 0;
}
/* Description line */
.bns7-widget .b7-summary-desc {
  font-size: 11px;
  font-weight: 400;
  color: #888;
  letter-spacing: .08em;
  text-align: center;
  font-style: italic;
}

/* ── CARDS ROW — 4 equal columns, collapsed borders ── */
.bns7-widget .b7-track {
  display: grid;
  grid-template-columns: 1fr 1fr var(--inter-gap) 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}

/* ── CARD ── */
.bns7-widget .b7-sess {
  background: #151515;
  border: 1px solid #222;
  border-radius: 4px;
  padding: 2rem 1.75rem 1.5rem;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background .2s;
  min-width: 0;
}
.bns7-widget .b7-sess:hover      { background: #191919; z-index: 1; }
.bns7-widget .b7-sess:focus-visible { outline: 1px solid #555; outline-offset: -1px; }

/* top accent line — always visible, coloured by group */
.bns7-widget .b7-sbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  transition: opacity .25s;
}
/* Group 1 (visits 1-2): Stage 1 accent */
.bns7-widget .b7-group--1 .b7-sbar {
  background: var(--accent, #4a9ebb);
  opacity: .55;
}
/* Group 2 (visits 3-4): Stage 2 accent */
.bns7-widget .b7-group--2 .b7-sbar {
  background: var(--accent-2, #4d7ec0);
  opacity: .55;
}
.bns7-widget .b7-sess:hover .b7-sbar { opacity: 1; }

/* ── CARD TOP ROW ── */
.bns7-widget .b7-toprow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2rem;
}
/* Left: "VISIT 01" stacked label + number */
.bns7-widget .b7-num {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #888;
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.bns7-widget .b7-num strong {
  font-size: 28px;
  font-weight: 800;
  color: #e8e8e8;
  letter-spacing: -.02em;
  line-height: 1;
}
/* Right: icon box + badge label — flex column, centred */
.bns7-widget .b7-stage-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bns7-widget .b7-icon {
  width: 34px;
  height: 34px;
  border: 1px solid #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.bns7-widget .b7-icon i { font-size: 16px; color: var(--accent, #4a9ebb); }
.bns7-widget .b7-stage-badge span {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #666;
  text-align: center;
  line-height: 1;
}

/* ── TITLE ── */
.bns7-widget .b7-stitle {
  font-size: 20px;
  font-weight: 800;
  color: #f0f0f0;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -.02em;
  word-break: break-word;
  overflow-wrap: break-word;
}
.bns7-widget .b7-stitle .accent { color: var(--accent, #4a9ebb); }

/* ── BULLET LIST ── */
.bns7-widget .b7-desc {
  font-size: 12px;
  font-weight: 400;
  color: #aaa;
  line-height: 1.7;
  flex: 1;
  margin-bottom: 1.5rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent, #4a9ebb);
  opacity: .85;
  /* button elements default to white-space:nowrap — override it */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}

/* ── FOOTER ROW — fixed min-height aligns all cards ── */
.bns7-widget .b7-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  padding-bottom: .1rem;
  border-top: 1px solid #2a2a2a;
  margin-top: auto;
  min-height: 44px;
  flex-shrink: 0;
}
.bns7-widget .b7-foot-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #aaa;
}
.bns7-widget .b7-foot-link {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #888;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color .2s;
  white-space: nowrap;
}
.bns7-widget .b7-sess:hover .b7-foot-link { color: #ccc; }
.bns7-widget .b7-foot-link i { font-size: 12px; }

/* ── TIMELINE BAR (below cards) ── */
.bns7-widget .b7-timeline {
  position: relative;
  padding: 0.75rem 0 0; /* top breathing room; visit pills flow below the dots */
  margin-top: 0;
}
.bns7-widget .b7-tl-rule {
  position: absolute;
  top: 0.75rem; /* must match padding-top */
  left: 0; right: 0;
  height: 1px;
  background: #444;
}
.bns7-widget .b7-tl-rule::after {
  content: '';
  position: absolute;
  right: -1px; top: -4px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid #444;
}
.bns7-widget .b7-tl-points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.bns7-widget .b7-tl-pt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.bns7-widget .b7-tl-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent, #4a9ebb);
  border: 2px solid rgba(74,158,187,.5);
  flex-shrink: 0;
  position: relative;
  top: -4px;
  transition: background .2s, border-color .2s;
}
/* Visit N pill labels */
.bns7-widget .b7-tl-lbl {
  display: inline-block;
  background: rgba(74,158,187,.1);
  border: 1px solid rgba(74,158,187,.3);
  border-radius: 20px;
  padding: 4px 13px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent, #4a9ebb);
  margin-top: .6rem;
  text-align: center;
  white-space: nowrap;
}

/* ── GAP LABELS ROW (below cards) ── */
.bns7-widget .b7-gap-row {
  position: relative;
  height: 5.5rem;
  display: flex;
  align-items: center;
}

/* Full-width connector line running behind all three pills.
   Left half teal (group 1), right half periwinkle (group 2). */
.bns7-widget .b7-gap-row::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(74,158,187,.2)  6%,
    rgba(74,158,187,.35) 47%,
    rgba(77,126,192,.35) 53%,
    rgba(77,126,192,.2)  94%,
    transparent 100%
  );
  pointer-events: none;
}

/* Pill — sits on the line, covers it behind itself */
.bns7-widget .b7-gap-pill {
  position: absolute;
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* solid bg matching widget so the connector line terminates cleanly at the pill edge */
  background: #111;
  border: 1.5px solid rgba(74,158,187,.55);
  border-radius: 30px;
  padding: 9px 20px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--accent, #4a9ebb);
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* Clock icon inside the pill */
.bns7-widget .b7-gap-pill i {
  font-size: 13px;
  opacity: .8;
  flex-shrink: 0;
}

/* Left-pointing arrowhead ◄ before the icon */
.bns7-widget .b7-gap-pill::before {
  content: '';
  display: block;
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid currentColor;
  opacity: .6;
  flex-shrink: 0;
}
/* Right-pointing arrowhead ► after the text */
.bns7-widget .b7-gap-pill::after {
  content: '';
  display: block;
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 7px solid currentColor;
  opacity: .6;
  flex-shrink: 0;
}

/* Middle pill — bridges groups 1 and 2, uses a blended neutral-blue */
.bns7-widget .b7-gap-pill--mid {
  border-color: rgba(140,150,210,.5);
  color: #9aaad8;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* Group 2 pill (visits 3-4) */
.bns7-widget .b7-gap-pill--g2 {
  border-color: rgba(77,126,192,.55);
  color: var(--accent-2, #4d7ec0);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}

/* ── STAGE BRACKETS (above cards — ticks point downward toward cards) ── */
.bns7-widget .b7-stages-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr var(--inter-gap) 1fr 1fr; /* mirrors .b7-track */
  margin-bottom: 1rem;
  gap: 0 12px;
}
/* Stage 1 spans track columns 1-2; Stage 2 spans columns 4-5 */
.bns7-widget .b7-stage-group--1 { grid-column: 1 / 3; }
.bns7-widget .b7-stage-group--2 { grid-column: 4 / 6; }
.bns7-widget .b7-stage-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Inner sub-grid: two bracket halves side by side */
.bns7-widget .b7-stage-brackets-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
.bns7-widget .b7-stage-bracket {
  position: relative;
  width: 100%;
  height: 8px;
  margin-top: .45rem; /* space below the stage name pill */
}
.bns7-widget .b7-sb-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: #555;
}
/* Left bracket half: line extends to right edge so it connects with the right half */
.bns7-widget .b7-stage-brackets-row .b7-stage-bracket:first-child .b7-sb-line {
  right: 0;
}
/* Right bracket half: line extends to left edge to connect with left half */
.bns7-widget .b7-stage-brackets-row .b7-stage-bracket:last-child .b7-sb-line {
  left: 0;
}
/* Ticks hang downward from the bracket line ends */
.bns7-widget .b7-sb-tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 7px;
  background: #555;
}
.bns7-widget .b7-sb-tick-l { left: 0; }
.bns7-widget .b7-sb-tick-r { right: 0; }
/* Stage name centred under both bracket halves — pill style */
.bns7-widget .b7-stage-name {
  display: inline-block;
  background: rgba(74,158,187,.08);
  border: 1px solid rgba(74,158,187,.25);
  border-top: 2px solid var(--accent, #4a9ebb);
  border-radius: 4px;
  padding: 8px 22px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent, #4a9ebb);
  text-align: center;
  white-space: normal;
  margin-bottom: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}


/* ── GROUP COLOUR DISTINCTION ──────────────────────────────────────────
   Group 1 = visits 1-2 = --accent (teal)
   Group 2 = visits 3-4 = --accent-2 (amber)
   Applied consistently: card background tint, desc border, timeline dots + pills,
   gap pill, stage bracket ticks, stage label.
   ─────────────────────────────────────────────────────────────────────── */

/* Card background — Group 2 gets a micro warm tint */
.bns7-widget .b7-group--2 .b7-sess {
  background: #161511;
}
.bns7-widget .b7-group--2 .b7-sess:hover { background: #1b1a12; }

/* Description left border */
.bns7-widget .b7-group--2 .b7-sess .b7-desc {
  border-left-color: var(--accent-2, #4d7ec0);
}

/* Title accent word + icon colour for group 2 */
.bns7-widget .b7-group--2 .b7-sess .b7-stitle .accent {
  color: var(--accent-2, #4d7ec0);
}
.bns7-widget .b7-group--2 .b7-sess .b7-icon i {
  color: var(--accent-2, #4d7ec0);
}

/* Timeline — visits 3 & 4 dot + label pill */
.bns7-widget .b7-tl-points .b7-tl-pt:nth-child(n+3) .b7-tl-dot {
  background: var(--accent-2, #4d7ec0);
  border-color: rgba(77,126,192,.5);
}
.bns7-widget .b7-tl-points .b7-tl-pt:nth-child(n+3) .b7-tl-lbl {
  background: rgba(77,126,192,.1);
  border-color: rgba(77,126,192,.3);
  color: var(--accent-2, #4d7ec0);
}


/* Stage bracket ticks + lines */
.bns7-widget .b7-stage-group--1 .b7-sb-line,
.bns7-widget .b7-stage-group--1 .b7-sb-tick { background: var(--accent, #4a9ebb); opacity: .45; }
.bns7-widget .b7-stage-group--2 .b7-sb-line,
.bns7-widget .b7-stage-group--2 .b7-sb-tick { background: var(--accent-2, #4d7ec0); opacity: .45; }

/* Stage label pills — Group 1 teal (existing), Group 2 amber */
.bns7-widget .b7-stage-group--2 .b7-stage-name {
  background: rgba(77,126,192,.08);
  border-color: rgba(77,126,192,.25);
  border-top-color: var(--accent-2, #4d7ec0);
  color: var(--accent-2, #4d7ec0);
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* ── GROUP WRAPPERS — desktop layout ───────────────────────────
   Each group is a real grid item in .b7-track's 5-col template,
   spanning its two card columns.  Only ONE level of display:contents
   (on .b7-group-cards) so cards become direct grid items of the group.
   ──────────────────────────────────────────────────────────────── */
.bns7-widget .b7-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.bns7-widget .b7-group-cards { display: contents; }
.bns7-widget .b7-group--1    { grid-column: 1 / 3; }
.bns7-widget .b7-group--2    { grid-column: 4 / 6; }

/* Mobile-only elements — hidden on desktop */
.bns7-widget .b7-mob-group-header,
.bns7-widget .b7-mob-intra-gap { display: none !important; }
/* Desktop: inter-gap div is explicitly placed in column 3 as a visual spacer */
.bns7-widget .b7-mob-inter-gap      { display: block !important; grid-column: 3 / 4; }
.bns7-widget .b7-mob-inter-gap-pill { display: none !important; }

/* Gap row visible on desktop — !important guards against Elementor cascade override */
.bns7-widget .b7-gap-row { display: flex !important; }

/* Visit timeline hidden on desktop */
.bns7-widget .b7-timeline { display: none !important; }

/* ── RESPONSIVE: Tablet & Small Laptop (701px – 1024px) ── */
@media (min-width: 701px) and (max-width: 1024px) {
  .bns7-widget {
    padding: 0.25rem 1.25rem 2rem;
    --inter-gap: 1.5rem;
  }

  /* Summary */
  .bns7-widget .b7-summary            { padding: 0.5rem 0 1.75rem; margin-bottom: 1.25rem; }
  .bns7-widget .b7-summary-stat-value { font-size: 22px; }
  .bns7-widget .b7-summary-stats      { gap: 2rem; }
  .bns7-widget .b7-summary-eyebrow    { font-size: 8px; }
  .bns7-widget .b7-summary-desc       { font-size: 10px; }

  /* Stage labels — allow wrapping on narrow tablets */
  .bns7-widget .b7-stage-name {
    font-size: 9px;
    padding: 6px 14px;
    letter-spacing: .16em;
    white-space: normal;
    text-align: center;
    line-height: 1.4;
  }

  /* Cards */
  .bns7-widget .b7-sess             { padding: 1.25rem 0.875rem 1rem; }
  .bns7-widget .b7-toprow           { margin-bottom: 1.25rem; }
  .bns7-widget .b7-num              { font-size: 8.5px; }
  .bns7-widget .b7-num strong       { font-size: 21px; }
  .bns7-widget .b7-icon             { width: 28px; height: 28px; }
  .bns7-widget .b7-icon i           { font-size: 13px; }
  .bns7-widget .b7-stage-badge span { font-size: 6.5px; }
  .bns7-widget .b7-stitle           { font-size: 15px; }
  .bns7-widget .b7-desc             { font-size: 11px; }
  .bns7-widget .b7-foot-label       { font-size: 7.5px; }
  .bns7-widget .b7-foot-link        { font-size: 7.5px; }

  /* Gap row */
  .bns7-widget .b7-gap-row  { height: 4.75rem; }
  .bns7-widget .b7-gap-pill { font-size: 9px; padding: 7px 13px; gap: 6px; }
  .bns7-widget .b7-gap-pill i { font-size: 11px; }
}

/* ── RESPONSIVE: Narrow Tablet (701px – 820px) — extra compact ── */
@media (min-width: 701px) and (max-width: 820px) {
  .bns7-widget {
    padding: 0.25rem 0.75rem 1.75rem;
    --inter-gap: 0.875rem;
  }
  .bns7-widget .b7-group            { gap: 8px; }
  .bns7-widget .b7-stitle           { font-size: 13px; }
  .bns7-widget .b7-desc             { font-size: 10px; }
  .bns7-widget .b7-num strong       { font-size: 18px; }
  .bns7-widget .b7-sess             { padding: 1rem 0.625rem 0.875rem; }
  .bns7-widget .b7-stage-name       { font-size: 8px; padding: 5px 10px; letter-spacing: .12em; }
  .bns7-widget .b7-gap-pill         { font-size: 8px; padding: 6px 10px; gap: 5px; }
  /* hide arrowheads — too cramped at narrow widths */
  .bns7-widget .b7-gap-pill::before,
  .bns7-widget .b7-gap-pill::after  { display: none; }
}

/* ── MOBILE — 2×2 group layout ── */
@media (max-width: 700px) {

  /* Widget */
  .bns7-widget { padding: 0.25rem 0.875rem 1.75rem; }

  /* ── Summary — compact but visible ── */
  .bns7-widget .b7-summary            { display: flex; padding: 0.75rem 0 1.5rem; margin-bottom: 1rem; }
  .bns7-widget .b7-summary-eyebrow    { font-size: 7.5px; gap: 10px; }
  .bns7-widget .b7-summary-eyebrow::before,
  .bns7-widget .b7-summary-eyebrow::after { width: 22px; }
  .bns7-widget .b7-summary-stats      { gap: 1.75rem; }
  .bns7-widget .b7-summary-stat-value { font-size: 22px; }
  .bns7-widget .b7-summary-stat-label { font-size: 7.5px; }
  .bns7-widget .b7-summary-desc       { font-size: 10px; }

  /* ── Desktop-only elements ── */
  .bns7-widget .b7-stages-row { display: none !important; }
  .bns7-widget .b7-gap-row    { display: none !important; }

  /* ── Track: block wrapper so groups stack vertically ── */
  .bns7-widget .b7-track {
    display: block;
    padding: 0;
  }
  .bns7-widget .b7-track::before,
  .bns7-widget .b7-track::after { display: none; }

  /* ── Groups: flex column — header → 2-col cards → intra-gap ── */
  .bns7-widget .b7-group {
    display: flex;
    flex-direction: column;
  }

  /* ── 2-column card grid inside each group ── */
  .bns7-widget .b7-group-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* ── Mobile stage-group header ── */
  .bns7-widget .b7-mob-group-header {
    display: flex !important;
    align-items: center;
    margin-bottom: 0.625rem;
  }
  .bns7-widget .b7-mob-group-header::before,
  .bns7-widget .b7-mob-group-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(74,158,187,.22);
  }
  .bns7-widget .b7-mob-group-header--2::before,
  .bns7-widget .b7-mob-group-header--2::after {
    background: rgba(77,126,192,.22);
  }
  .bns7-widget .b7-mob-stage-name {
    display: inline-block;
    flex-shrink: 0;
    margin: 0 10px;
    padding: 5px 13px;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent, #4a9ebb);
    background: rgba(74,158,187,.07);
    border: 1px solid rgba(74,158,187,.28);
    border-top: 2px solid var(--accent, #4a9ebb);
    border-radius: 3px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
  }
  .bns7-widget .b7-mob-stage-name--2 {
    color: var(--accent-2, #4d7ec0);
    background: rgba(77,126,192,.07);
    border-color: rgba(77,126,192,.28);
    border-top-color: var(--accent-2, #4d7ec0);
  }

  /* ── Intra-group gap pill (1 week, below each 2-card row) ── */
  .bns7-widget .b7-mob-intra-gap {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0.6rem 0 0.75rem;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(74,158,187,.65);
    font-family: 'Montserrat', sans-serif;
  }
  .bns7-widget .b7-mob-intra-gap i   { font-size: 10px; }
  .bns7-widget .b7-mob-intra-gap--2  { color: rgba(77,126,192,.65); }

  /* ── Inter-group gap separator (2.5 months healing) ── */
  .bns7-widget .b7-mob-inter-gap {
    display: flex !important;
    align-items: center;
    padding: 0.875rem 0;
  }
  .bns7-widget .b7-mob-inter-gap::before {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(140,150,210,.28));
  }
  .bns7-widget .b7-mob-inter-gap::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, rgba(140,150,210,.28));
  }
  .bns7-widget .b7-mob-inter-gap-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 10px;
    padding: 7px 16px;
    background: #111;
    border: 1.5px solid rgba(140,150,210,.4);
    border-radius: 22px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9aaad8;
    font-family: 'Montserrat', sans-serif;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
    flex-shrink: 0;
  }
  .bns7-widget .b7-mob-inter-gap-pill i { font-size: 12px; }

  /* ── Card adjustments for narrow 2-col layout ── */
  .bns7-widget .b7-sess           { padding: 1.125rem 1rem 1rem; }
  .bns7-widget .b7-toprow         { margin-bottom: 1.25rem; }
  .bns7-widget .b7-num            { font-size: 9px; gap: .35rem; }
  .bns7-widget .b7-num strong     { font-size: 20px; }
  .bns7-widget .b7-icon           { width: 28px; height: 28px; }
  .bns7-widget .b7-icon i         { font-size: 13px; }
  .bns7-widget .b7-stage-badge    { gap: 4px; }
  .bns7-widget .b7-stage-badge span { font-size: 7.5px; }
  .bns7-widget .b7-stitle         { font-size: 18px; line-height: 1.25; margin-bottom: 0.625rem; }
  .bns7-widget .b7-stitle .accent { display: block; }
  .bns7-widget .b7-desc           { font-size: 11.5px; margin-bottom: 0.75rem; padding-left: 0.625rem; }
  .bns7-widget .b7-foot           { padding-top: 0.75rem; min-height: unset; flex-direction: column; align-items: flex-start; gap: 4px; }
  .bns7-widget .b7-foot-label     { font-size: 6.5px; }
  .bns7-widget .b7-foot-link      { font-size: 6.5px; gap: 3px; }
  .bns7-widget .b7-foot-link i    { font-size: 9px; }

  /* ── Timeline — hidden on mobile ── */
  .bns7-widget .b7-timeline { display: none; }
}

/* ── RESPONSIVE MOBILE: Small Phones (≤480px) ── */
@media (max-width: 480px) {
  .bns7-widget                           { padding: 0.25rem 0.625rem 1.5rem; }
  .bns7-widget .b7-group-cards           { gap: 6px; }
  .bns7-widget .b7-sess                  { padding: 0.875rem 0.75rem 0.75rem; }
  .bns7-widget .b7-num strong            { font-size: 18px; }
  .bns7-widget .b7-stitle                { font-size: 16px; }
  .bns7-widget .b7-desc                  { font-size: 10.5px; }
  .bns7-widget .b7-summary-stat-value    { font-size: 20px; }
  .bns7-widget .b7-summary-stats         { gap: 1.5rem; }
  .bns7-widget .b7-mob-inter-gap-pill    { font-size: 8.5px; padding: 6px 14px; }
  .bns7-widget .b7-mob-stage-name        { font-size: 6.5px; padding: 4px 10px; margin: 0 8px; }
}

/* ── RESPONSIVE MOBILE: Very Small Phones (≤360px) ── */
@media (max-width: 360px) {
  .bns7-widget                           { padding: 0.25rem 0.375rem 1.5rem; }
  .bns7-widget .b7-group-cards           { gap: 5px; }
  .bns7-widget .b7-sess                  { padding: 0.75rem 0.5rem 0.625rem; }
  .bns7-widget .b7-num                   { font-size: 7.5px; }
  .bns7-widget .b7-num strong            { font-size: 15px; }
  .bns7-widget .b7-icon                  { width: 23px; height: 23px; }
  .bns7-widget .b7-icon i               { font-size: 11px; }
  .bns7-widget .b7-stage-badge          { gap: 3px; }
  .bns7-widget .b7-stage-badge span      { font-size: 5.5px; }
  .bns7-widget .b7-stitle                { font-size: 13px; }
  .bns7-widget .b7-desc                  { font-size: 10px; padding-left: 0.5rem; }
  .bns7-widget .b7-foot-label            { font-size: 5.5px; }
  .bns7-widget .b7-foot-link             { font-size: 5.5px; gap: 2px; }
  .bns7-widget .b7-foot-link i          { font-size: 8px; }
  .bns7-widget .b7-summary-stat-value    { font-size: 18px; }
  .bns7-widget .b7-summary-eyebrow       { font-size: 7px; gap: 8px; }
  .bns7-widget .b7-summary-eyebrow::before,
  .bns7-widget .b7-summary-eyebrow::after { width: 16px; }
  .bns7-widget .b7-mob-inter-gap-pill    { font-size: 8px; padding: 5px 11px; }
  .bns7-widget .b7-mob-stage-name        { font-size: 5.5px; padding: 3px 8px; margin: 0 6px; letter-spacing: .13em; }
}

/* =========================================================
   MODAL OVERLAY
   .bns7-ov  — the full-screen backdrop
   .bns7-modal — the dialog box
   --accent is set inline on .bns7-ov by PHP render()
   ========================================================= */
.bns7-ov {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .85);
  z-index: 999999;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  font-family: 'Montserrat', sans-serif;
}
.bns7-ov.open { display: flex; }

.bns7-modal {
  background: #151515;
  border: 1px solid #222;
  border-radius: 0;
  width: 100%;
  max-width: 820px;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  animation: bns7in .2s ease;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
}

@keyframes bns7in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* left media panel */
.bm-left {
  width: 300px;
  height: 420px;
  flex-shrink: 0;
  background: #0e0e0e;
  border-right: 1px solid #222;
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
  align-self: flex-start;
}
.bm-left-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.bm-left::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, transparent 100%);
  pointer-events: none;
}
/* Self-hosted MP4 / WebM video */
.bm-left-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

/* YouTube / Vimeo iframe */
.bm-left-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* When left panel holds video, suppress the decorative image gradient overlay */
.bm-left.bm-left--video::after { display: none; }

.bm-left-empty {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  color: #2a2a2a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
.bm-left-empty i { font-size: 28px; }
.bm-left-caption {
  position: absolute;
  bottom: .9rem; left: 1rem;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #ccc;
  font-family: 'Montserrat', sans-serif;
  z-index: 1;
}

/* right content panel */
.bm-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 2rem 2.25rem 2rem 2rem !important;
  position: relative;
  box-sizing: border-box;
}

/* close button */
.bm-close {
  position: absolute;
  top: 1.25rem; right: 1.25rem;
  width: 28px; height: 28px;
  background: #1e1e1e;
  border: 1px solid #2a2a2a;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: color .15s;
  font-family: 'Montserrat', sans-serif;
  border-radius: 0;
  flex-shrink: 0;
  z-index: 2;
}
.bm-close:hover { color: #ccc; background: #222; }

/* header row */
.bm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1rem !important;
  padding-right: 2.5rem;
  margin-top: 0;
}
.bm-step {
  font-size: 9px;
  font-weight: 700;
  color: #888;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}
.bm-step strong { color: var(--accent, #4a9ebb); }
.bm-badge {
  font-size: 9px;
  font-weight: 700;
  color: #888;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}

/* title */
.bm-title {
  font-size: 26px;
  font-weight: 800;
  color: #f0f0f0;
  line-height: 1.15;
  margin-bottom: 1.25rem !important;
  letter-spacing: -.02em;
  font-family: 'Montserrat', sans-serif;
  display: block;
}
.bm-title .accent { color: var(--accent, #4a9ebb); }

/* divider */
.bm-divider {
  height: 1px;
  background: #222;
  margin-bottom: 1.25rem !important;
  display: block;
}

/* body text */
.bm-body {
  font-size: 12px;
  font-weight: 500;
  color: #c8c8c8;
  line-height: 1.75;
  flex: 1;
  margin-bottom: 1.5rem !important;
  font-family: 'Montserrat', sans-serif;
  display: block;
}

/* 2×2 metadata grid */
.bm-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem 1.5rem;
  border-top: 1px solid #222;
  padding-top: 1.25rem;
  margin-top: auto;
}
.bm-meta-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #555;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: .3rem;
}
.bm-meta-value {
  font-size: 12px;
  font-weight: 700;
  color: #e0e0e0;
  font-family: 'Montserrat', sans-serif;
}

/* empty state */
.bm-empty          { text-align: center; padding: 2.5rem 0; }
.bm-empty-ico      { font-size: 28px; color: #2a2a2a; margin-bottom: .6rem; }
.bm-empty p        { font-size: 11px; color: #555; font-weight: 600; line-height: 1.5; font-family: 'Montserrat', sans-serif; }

/* supplementary description block */
.bm-desc {
  margin-top: 1.25rem;
  font-size: 12px;
  font-weight: 500;
  color: #c8c8c8;
  line-height: 1.75;
  font-family: 'Montserrat', sans-serif;
}

/* mobile: stack vertically */
@media (max-width: 600px) {
  .bns7-modal    { flex-direction: column; max-height: 92vh; overflow-y: auto; }
  .bm-left       { width: 100%; height: 180px; border-right: none; border-bottom: 1px solid #222; }
  .bm-right      { padding: 1.5rem 1.25rem; }
}