/* ── BUYER JOURNEY (Buy page) ──
   Four expandable step cards; step 3 holds the day 0 to 30 timeline.
   Markup is generated by _tools/buyer-journey/build.cjs; behavior is in js/journey.js. */

.journey-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.journey-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  text-align: left; cursor: pointer; padding: 1.6rem 1.5rem 1.4rem; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
  color: #fff; font-family: var(--font-body); transition: border-color 0.2s ease, background 0.2s ease;
}
.journey-card:hover { background: var(--panel-hover); border-color: var(--panel-border-hover); }
.journey-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.journey-card { scroll-margin-top: 110px; } /* keeps a scrolled-to card clear of the fixed menu bar */
.journey-card[aria-expanded="true"] { border: 1px solid var(--gold); background: var(--panel-hover); }
.journey-num { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--gold); }
.journey-title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; }
.journey-sub { font-size: 0.8rem; letter-spacing: 0.06em; opacity: 0.75; }
.journey-chevron {
  position: absolute; top: 1.4rem; right: 1.3rem; width: 10px; height: 10px;
  border-right: 1.5px solid rgba(255,255,255,0.7); border-bottom: 1.5px solid rgba(255,255,255,0.7);
  transform: rotate(45deg); transition: transform 0.25s ease;
}
.journey-card[aria-expanded="true"] .journey-chevron { transform: rotate(225deg); top: 1.65rem; }
.journey-hint { text-align: center; font-size: 0.85rem; opacity: 0.6; margin-top: 1.25rem; }

.journey-panel {
  margin-top: 1rem; padding: 2rem; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--panel-border); box-shadow: var(--panel-shadow);
}
.journey-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; counter-reset: j; }
.journey-list li { counter-increment: j; padding-left: 2.6rem; position: relative; }
.journey-list li::before {
  content: counter(j); position: absolute; left: 0; top: 0.1rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold); font-size: 0.85rem; display: flex; align-items: center; justify-content: center;
}
.journey-list h4 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 0.35rem; }
.journey-list p { font-size: 0.92rem; }

/* Timeline: desktop SVG */
.tl-svg { width: 100%; height: auto; display: block; }
.tl-svg text { font-family: var(--font-body); }
.tl-axis { stroke: rgba(255,255,255,0.55); stroke-width: 2; }
.tl-tick { stroke: rgba(255,255,255,0.55); stroke-width: 1.5; }
.tl-day { fill: rgba(255,255,255,0.75); font-size: 14px; text-anchor: middle; }
.tl-lane { fill: rgba(255,255,255,0.7); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
.tl-sep { stroke: rgba(255,255,255,0.1); }
.tl-branch { stroke-width: 1.5; }
.tl-branch-deadline { stroke: #c8a96e; }
.tl-branch-step, .tl-branch-span { stroke: rgba(255,255,255,0.35); stroke-dasharray: 4 4; }
.tl-label { fill: #fff; font-size: 15px; }
.tl-ev { cursor: pointer; outline: none; }
.tl-hit { fill: transparent; }
.tl-deadline .tl-dot, .tl-deadline .tl-bar { fill: #c8a96e; }
.tl-step .tl-dot { fill: #1f2028; stroke: #fff; stroke-width: 2; }
.tl-span .tl-bar { fill: rgba(255,255,255,0.32); }
.tl-ev:hover .tl-dot, .tl-ev:hover .tl-bar, .tl-ev:focus-visible .tl-dot, .tl-ev:focus-visible .tl-bar { stroke: #fff; stroke-width: 2; }
.tl-ev.selected .tl-dot, .tl-ev.selected .tl-bar { stroke: #fff; stroke-width: 4; }
.tl-ev.selected .tl-label { font-weight: 500 !important; }

/* Timeline: phone list */
.tl-list { display: none; list-style: none; position: relative; margin: 0; padding: 0 0 0 0.25rem; }
.tl-list::before { content: ''; position: absolute; left: 0.85rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: rgba(255,255,255,0.25); }
.tl-item {
  display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; grid-template-areas: "mark when lane" "mark title lane";
  column-gap: 0.75rem; align-items: center; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; color: #fff; font-family: var(--font-body); padding: 0.7rem 0.4rem; border-radius: 10px;
}
.tl-item:hover, .tl-item.selected { background: rgba(255,255,255,0.06); }
.tl-mark { grid-area: mark; justify-self: center; width: 14px; height: 14px; border-radius: 50%; position: relative; z-index: 1; }
.tl-item.tl-deadline .tl-mark { background: #c8a96e; }
.tl-item.tl-step .tl-mark { background: #1f2028; border: 2px solid #fff; }
.tl-item.tl-span .tl-mark { width: 8px; height: 24px; border-radius: 4px; background: rgba(255,255,255,0.45); }
.tl-item.selected .tl-mark { box-shadow: 0 0 0 3px rgba(255,255,255,0.85); }
.tl-item-when { grid-area: when; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.tl-item-title { grid-area: title; font-size: 1rem; }
.tl-item-lane { grid-area: lane; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; }

.tl-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1rem; font-size: 0.8rem; opacity: 0.85; }
.tl-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.tl-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.tl-key-deadline { background: #c8a96e; }
.tl-key-step { background: #1f2028; border: 2px solid #fff; }
.tl-key-span { width: 22px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.4); }
.tl-note { font-size: 0.85rem !important; opacity: 0.75 !important; margin-top: 0.75rem; max-width: 760px; }

.tl-detail { margin-top: 1.25rem; }
.tl-detail-card { padding: 1.5rem; border-radius: 12px; background: rgba(6,6,8,0.45); border: 1px solid rgba(200,169,110,0.35); }
.tl-detail-card h4 { font-family: var(--font-display); font-size: 1.5rem; margin: 0.35rem 0 1rem; }
.tl-detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.tl-detail-label { display: block; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.65; margin-bottom: 0.35rem; }
.tl-detail-grid p { font-size: 0.92rem; }

@media (max-width: 900px) {
  .journey-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-list { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .tl-svg { display: none; }
  .tl-list { display: block; }
  .tl-legend { display: none; }
  .tl-list .tl-detail { margin: 0.25rem 0 0.75rem 2.4rem; }
  .tl-detail-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .tl-detail-card { padding: 1.1rem; }
  .tl-detail-card h4 { font-size: 1.25rem; }
}
@media (max-width: 600px) {
  .journey-cards { grid-template-columns: 1fr; }
  .journey-panel { padding: 1.25rem; }
}