/* ============================================================
   Broker Genius — pipeline-diagram.css
   Front-page-only stylesheet.

   1. The "Invoices in, filed declarations out" pipeline diagram,
      converted from the Claude Design "PipelineDiagram" component.
   2. Two front-page overrides from the same redesign export: the
      centred stats cells and the coverage Map / List toggle.
      They live here rather than in main.css because main.css is
      shared with the other templates (templates/about.php also
      uses .stats) and this file loads on the front page only.
   ============================================================ */

/* ============================================================
   Stats — the redesign centres each cell
   ============================================================ */
.stats .stat {
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ============================================================
   Pipeline diagram
   ============================================================ */
@keyframes pl-run-x {
  0%   { left: -6px; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: calc(100% - 6px); opacity: 0; }
}
@keyframes pl-pulse { 50% { opacity: 0.35; } }

.pipeline {
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  padding: 76px 28px;
  color: var(--ink);
}

.pipeline__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.pipeline__title {
  font-size: 52px;
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 700;
  font-stretch: 92%;
  margin: 14px 0 0;
  max-width: 18ch;
  text-wrap: balance;
}
.pipeline__blurb {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 42ch;
  text-wrap: pretty;
}

.pipeline__board {
  margin-top: 36px;
  border: 2px dashed var(--ink);
  background: var(--card);
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: stretch;
}

/* ---------- Input / output columns ---------- */
.pipeline__side {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pipeline__side-label {
  align-self: flex-start;
  border: 1.5px dashed var(--ink);
  padding: 7px 12px;
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.12em;
}
.pipeline__side-label--out { align-self: flex-end; }

.pipeline__port {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 14px 16px;
  box-shadow: 3px 3px 0 rgba(16, 22, 42, 0.10);
}
.pipeline__port:hover { box-shadow: 5px 5px 0 var(--accent); }
.pipeline__port-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  background: var(--card);
  font: 600 11px var(--font-mono);
}
.pipeline__port-icon--out { background: var(--accent); }
.pipeline__port-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pipeline__ready {
  border: 2px solid var(--ink);
  background: var(--ink);
  color: #fff;
  padding: 14px 16px;
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.1em;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.pipeline__ready-dot {
  color: var(--accent);
  animation: pl-pulse 1.8s ease-in-out infinite;
}

/* ---------- Centre column ---------- */
.pipeline__core {
  flex: 3 1 430px;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
}

.pipeline__caps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.pipeline__cap {
  border: 2px solid var(--ink);
  background: #FFF8E4;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.pipeline__cap-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  font: 600 12px var(--font-mono);
}
.pipeline__cap-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.pipeline__engine-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.pipeline__engine {
  flex: 1 1 170px;
  min-width: 0;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: #fff;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 5px 5px 0 var(--accent);
}
.pipeline__engine-mark {
  width: 70px;
  height: 70px;
  margin: 0 auto;
  border: 1.5px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--ink);
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
}
.pipeline__engine-title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-top: 14px;
}
.pipeline__engine-status {
  font: 600 10px var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-top: 8px;
  animation: pl-pulse 1.8s ease-in-out infinite;
}

.pipeline__wire {
  flex: 0 1 46px;
  min-width: 26px;
  position: relative;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 12px);
}
.pipeline__wire-dot {
  position: absolute;
  top: -5px;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 1.5px solid var(--ink);
  animation: pl-run-x 2.4s linear infinite;
}

/* ---------- Entry workspace mock ---------- */
.pipeline__workspace {
  flex: 2 1 270px;
  min-width: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 5px 5px 0 rgba(16, 22, 42, 0.10);
}
.pipeline__workspace-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  border-bottom: 2px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font: 600 9.5px var(--font-mono);
  letter-spacing: 0.12em;
}
.pipeline__workspace-count { color: var(--accent); }
.pipeline__workspace-body {
  display: grid;
  grid-template-columns: minmax(0, 110px) minmax(0, 1fr);
}

.pipeline__rail {
  border-right: 1px solid var(--line);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.pipeline__rail-head { height: 9px; background: var(--ink); }
.pipeline__rail-row { height: 7px; background: #E4E0D4; }

.pipeline__table {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pipeline__table-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 46px 46px 46px;
  gap: 8px;
  align-items: center;
  background: transparent;
  padding: 4px 5px;
}
.pipeline__table-row--flag { background: #FFF3D6; }
.pipeline__cell { height: 7px; background: var(--line); }
.pipeline__table-row--flag .pipeline__cell { background: #C9A44A; }

/* ============================================================
   Coverage — Map / List toggle and the markets directory
   ============================================================ */
.coverage__tabs { display: flex; gap: 14px; }
.coverage__tab {
  font: 700 15px var(--font-sans);
  color: var(--ink);
  background: transparent;
  padding: 15px 24px;
  border: 2px solid var(--ink);
  box-shadow: none;
  white-space: nowrap;
  cursor: pointer;
}
.coverage__tab:hover { box-shadow: 1px 1px 0 var(--ink); }
.coverage__tab.is-active {
  background: var(--accent);
  box-shadow: 4px 4px 0 var(--ink);
}

.coverage__panel[hidden] { display: none; }

.coverage__markets {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 8px 8px 0 rgba(16, 22, 42, 0.12);
}
.coverage__markets-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 22px;
  border-bottom: 2px solid var(--ink);
  font: 600 11px var(--font-mono);
  letter-spacing: 0.12em;
}
.coverage__markets-note { color: var(--brown); }

.coverage__region {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
}
.coverage__region-head {
  padding: 20px 22px;
  border-right: 1px solid var(--line);
  background: var(--paper);
}
.coverage__region-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.coverage__region-count {
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.11em;
  color: var(--brown);
  margin-top: 6px;
}
.coverage__region-list {
  padding: 20px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.coverage__chip {
  font: 500 13px var(--font-sans);
  padding: 6px 11px;
  border: 1.5px solid #E4D8B4;
  background: #FFF8E4;
}

.coverage__ask {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.coverage__ask-text { font-size: 14.5px; color: var(--muted); }
.coverage__ask-cta {
  font: 700 13px var(--font-sans);
  padding: 11px 20px;
  border: 2px solid var(--ink);
  background: var(--accent);
  box-shadow: 3px 3px 0 var(--ink);
}
.coverage__ask-cta:hover { box-shadow: 1px 1px 0 var(--ink); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .pipeline__title { font-size: 42px; }
  .pipeline__board { padding: 22px; gap: 20px; }
  .pipeline__side,
  .pipeline__core { flex: 1 1 100%; }
  .pipeline__side-label,
  .pipeline__side-label--out { align-self: flex-start; }
  .coverage__region { grid-template-columns: 1fr; }
  .coverage__region-head { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 720px) {
  .pipeline { padding: 56px 20px; }
  .pipeline__title { font-size: 34px; }
  .pipeline__caps { grid-template-columns: 1fr; }
  .pipeline__engine,
  .pipeline__workspace { flex: 1 1 100%; }
  .pipeline__wire { display: none; }
  .pipeline__workspace { margin-top: 18px; }
  .coverage__tabs { width: 100%; }
  .coverage__tab { flex: 1 1 auto; padding: 13px 16px; font-size: 14px; }
}

/* ============================================================
   Lottie stage
   ============================================================
   Holds the original heroanimation.json in the same frame the
   built diagram used: full-bleed inside the container, 2px ink
   border and the hard shadow the rest of the page uses. The
   animation is 1200x448, so the box keeps that ratio while it
   loads and never jumps once the player hydrates.
   ============================================================ */
.pipeline__lottie {
  margin-top: 40px;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 8px 8px 0 rgba(16, 22, 42, 0.12);
  padding: 18px;
  overflow: hidden;
}
.pipeline__lottie .wp-block-lpb-lottie-player { margin: 0; }
.pipeline__lottie dotlottie-player,
.pipeline__lottie .wp-block-lpb-lottie-player > div {
  display: block;
  width: 100%;
  max-width: 100%;
}
/* Reserve the animation's own 1200:448 ratio before it hydrates. */
.pipeline__lottie .wp-block-lpb-lottie-player { aspect-ratio: 1200 / 448; }

@media (max-width: 720px) {
  .pipeline__lottie { padding: 10px; box-shadow: 5px 5px 0 rgba(16, 22, 42, 0.12); }
}