/* =====================================================================
   Barquecon DevOps — site-specific helpers on top of bqt.css
   (3-col mega menu, static workflow/pipeline diagrams, tech badges,
    numbered steps, 2-col grid). Brand tokens come from bqt.css :root.
   ===================================================================== */

/* 3-column mega menu (Workflows, Industries) */
.bqt-mega.bqt-mega--3 { grid-template-columns: repeat(3, 1fr); min-width: 560px; }
@media (max-width: 991px) { .bqt-mega.bqt-mega--3 { min-width: 0; grid-template-columns: 1fr; } }

/* 2-column grid */
.bqt-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 768px) { .bqt-grid--2 { grid-template-columns: 1fr; } }

/* ---- Static pipeline / workflow diagram ---------------------------- */
.wf-pipeline {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  justify-content: center; margin: 8px 0;
}
.wf-stage {
  flex: 1 1 150px; min-width: 150px; max-width: 220px;
  background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: var(--radius-sm); padding: 18px 16px; text-align: center;
  box-shadow: var(--shadow); position: relative; margin: 10px;
}
.wf-stage__num {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--navy);
  font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.wf-stage__icon { color: var(--gold-dark); font-size: 1.4rem; margin: 6px 0 8px; }
.wf-stage h4 { font-size: .98rem; margin: 0 0 .3rem; }
.wf-stage p { color: var(--muted); font-size: .8rem; margin: 0; line-height: 1.5; }
.wf-stage::after {
  content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; right: -22px; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: .9rem;
}
.wf-stage:last-child::after { display: none; }
@media (max-width: 768px) {
  .wf-stage::after { content: "\f063"; right: 50%; top: auto; bottom: -22px; transform: translateX(50%); }
}

/* On a navy section, lift stage cards */
.bqt-section--navy .wf-stage { background: #16273a; border-color: rgba(255,255,255,.08); }
.bqt-section--navy .wf-stage h4 { color: #fff; }
.bqt-section--navy .wf-stage p { color: #aab8c7; }

/* ---- Numbered "how it works" steps --------------------------------- */
.step-list { display: grid; gap: 18px; max-width: 880px; }
.step-item { display: flex; gap: 16px; align-items: flex-start; }
.step-item__num {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(241,182,33,.15); color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.step-item h4 { font-size: 1.02rem; margin: 4px 0 .25rem; }
.step-item p { color: var(--muted); font-size: .92rem; margin: 0; }

/* ---- Technology badges --------------------------------------------- */
.tech-group { margin-bottom: 22px; }
.tech-group__head {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--gold-dark); margin: 0 0 .7rem;
}
.tech-badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white); border: 1px solid var(--line); border-radius: 40px;
  padding: .45rem 1rem; margin: 0 8px 8px 0; font-size: .85rem; font-weight: 500; color: var(--ink);
  box-shadow: var(--shadow); transition: all var(--ease);
}
.tech-badge i { color: var(--gold-dark); }
.tech-badge:hover { transform: translateY(-2px); border-color: var(--gold); }

/* ---- Inline "tag" pills (used inside cards / on dark) --------------- */
.tag-pill {
  display: inline-block; background: rgba(241,182,33,.14); color: var(--gold-dark);
  border-radius: 4px; padding: .2rem .6rem; margin: 2px 4px 2px 0; font-size: .76rem; font-weight: 600;
}

/* ---- Stat band ----------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 768px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat-box { text-align: center; }
.stat-box .num { font-size: 2.1rem; font-weight: 800; color: var(--gold); line-height: 1; }
.stat-box .lbl { color: #aab8c7; font-size: .85rem; margin-top: .4rem; }

/* Make a plain card behave as a link card */
a.bqt-card { color: inherit; display: block; }
a.bqt-card:hover { color: inherit; }