/* ==========================================================
   Step 6 — Stay The Course
   Fully namespaced to avoid collisions with shared shell CSS.
   ========================================================== */

.s6-wrap { display: flex; flex-direction: column; padding: var(--space-4, 4px) var(--space-4, 4px) var(--space-8, 8px); }
.s6-section { position: relative; padding-left: var(--space-44, 44px); padding-bottom: var(--space-4, 4px); margin-bottom: var(--space-4, 4px); border-bottom: 1px solid var(--color-border, #e6e8ec); }
.s6-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
/* .s6-section-num styling now lives in journey-layout.css, shared
   with steps 2-5. */
.s6-error { padding: var(--space-24, 24px); text-align: center; color: var(--color-gray-muted, #6b7280); font-size: var(--font-size-14, 14px); }
.s6-title { font-family: var(--ev-font-heading, "Playfair Display", serif); font-size: var(--font-size-12, 12px); color: var(--ev-color-navy, #173763); margin: 0 0 4px; }
.s6-sub { font-size: var(--font-size-10, 10px); color: var(--color-gray-muted, #6b7280); margin: 0 0 10px; }

/* Sections 1 and 4 */
.s6-behavior-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.s6-virtue-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.s6-behavior-card, .s6-virtue-card { padding: var(--space-4, 4px); }
.s6-behavior-icon, .s6-virtue-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-circle, 50%); margin-bottom: var(--space-2, 2px); }
.s6-behavior-icon svg, .s6-virtue-icon svg { width: 16px; height: 16px; }
.s6-behavior-title, .s6-virtue-title { font-size: var(--font-size-11, 11px); font-weight: 700; margin-bottom: var(--space-2, 2px); line-height: 1.25; }
.s6-behavior-body, .s6-virtue-body { font-size: var(--font-size-9, 9px); color: var(--color-gray-muted, #6b7280); line-height: 1.1; margin: 0; }

/* Section 2: stable CSS-only timeline; no SVG or runtime positioning. */
.s6-journey { overflow-x: auto; padding: 4px 0 6px; }
.s6-journey-stages { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: start; }
.s6-journey-stage { position: relative; min-width: 0; padding: 0 8px; text-align: center; }
/* .s6-journey-stage:not(:last-child)::after { position: absolute; z-index: 0; top: 24px; left: calc(50% + 31px); width: calc(100% - 62px); height: 2px; content: ""; background: #c7d2e3; } */
.s6-journey-icon { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 2px solid var(--color-white, #fff); border-radius: var(--radius-circle, 50%); box-shadow: 0 0 0 1px rgba(23, 55, 99, .08); margin: 0 auto 2px; }
.s6-journey-icon svg { width: 22px; height: 22px; }
.s6-journey-title { color: var(--color-ink, #1f2733); font-size: var(--font-size-10, 10px); font-weight: 700; line-height: 1.25; margin-bottom: var(--space-2, 2px); }
.s6-journey-body { color: var(--color-gray-muted, #6b7280); font-size: var(--font-size-9, 9px); line-height: 1.1; margin: 0; }

/***** to check ****/

/* ==========================================
   1. The Straight Connecting Lines
   ========================================== */
.s6-journey-stage:not(:last-child)::after {
  position: absolute;
  z-index: 0;
  /* Vertical alignment: centers the line horizontally across the steps */
  top: 24px; 
  height: 0;
  /* Positioning math from your original setup */
  left: calc(50% + 28px);
  width: calc(100% - 56px);
  box-sizing: border-box;
  content: "";
  pointer-events: none;

  /* Reset curves and draw a flat top border */
  border-radius: 0;
  border: none;
  border-top: 2px solid #c7d2e3; 
}

/* Optional: Keep your final step dashed if you still want that finish */
.s6-journey-stage:nth-child(6)::after {
  border-top-style: dashed;
}


/* ==========================================
   2. The Forward-Pointing Arrowheads (→)
   ========================================== */
.s6-journey-stage:not(:last-child)::before {
  position: absolute;
  z-index: 1;
  content: "";
  width: 0;
  height: 0;
  pointer-events: none;
  
  /* Vertical alignment: matches the 24px center of your line */
  top: 21px; 
  
  /* Horizontal placement: snaps perfectly to the right end of the line */
  left: calc(150% - 36px); 
  
  /* Rotates the triangle to point perfectly straight-right */
  transform: rotate(90deg); 
  
  /* Pure CSS Triangle template using your connector color */
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #c7d2e3; 
}
/* Section 3 */
.s6-crisis-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: var(--space-2, 2px); }
.s6-crisis-card { text-align: center; padding: var(--space-4, 4px) var(--space-5, 5px); }
.s6-crisis-icon { display: inline-flex; color: var(--ev-color-navy, #173763); margin-bottom: var(--space-4, 4px); }
.s6-crisis-icon svg { width: 16px; height: 16px; }
.s6-crisis-year { font-size: var(--font-size-10, 10px); font-weight: 700; color: var(--color-ink, #1f2733); margin-bottom: var(--space-2, 2px); }
.s6-crisis-label { font-size: var(--font-size-9, 9px); color: var(--color-gray-muted, #6b7280); line-height: 1.2; }
.s6-crisis-banner { display: flex; align-items: center; gap: 1px;   padding: 0px 0px; font-size: var(--font-size-9, 9px); color: var(--color-ink, #1f2733); font-weight: 500; }
.s6-crisis-banner-icon { display: inline-flex; flex-shrink: 0; }
.s6-crisis-banner-icon svg { width: 16px; height: 16px; }

@media (max-width: 900px) {
    .s6-behavior-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .s6-crisis-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .s6-virtue-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .s6-journey-stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) and (min-width: 541px) {
    /* 4 per row: stage 4 wraps to a new row, so its connector to
       stage 5 would otherwise point sideways into empty space.
       Bounded to this window only — max-width:900px alone would
       also match every width below 540px, where the layout is
       3 columns and stage 4 is back to being a same-row connector
       (suppressing it there hid a connector that should show). */
    .s6-journey-stage:nth-child(4)::after,
    .s6-journey-stage:nth-child(4)::before {
        display: none;
    }
}

@media (max-width: 540px) {
    .s6-behavior-row, .s6-virtue-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .s6-crisis-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .s6-journey-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* 3 per row: stages 3 and 6 each wrap to a new row. */
    .s6-journey-stage:nth-child(3)::after,
    .s6-journey-stage:nth-child(3)::before,
    .s6-journey-stage:nth-child(6)::after,
    .s6-journey-stage:nth-child(6)::before {
        display: none;
    }

    /* Tighten the connector's clearance from the 48px icon (24px
       radius) at this width: desktop's 28px/56px leaves a 4px buffer
       past the icon edge, which eats a disproportionate share of the
       much shorter run available here. 26px/52px keeps a 2px buffer —
       the minimum useful value, since anything closer than the 24px
       icon radius renders behind the icon (z-index 0 vs 1) and isn't
       visible anyway. Arrowhead offset shifted by the same 2px to
       keep it 8px before the line's new end point. */
    .s6-journey-stage:not(:last-child)::after {
        left: calc(50% + 26px);
        width: calc(100% - 52px);
    }
    .s6-journey-stage:not(:last-child)::before {
        left: calc(150% - 34px);
    }
}