/* ------------------------------------------------------------------
   vs-flow-cards-v3.css
   Card language for NDC capability flow index pages.

   Used by /capability/order and /capability/offer - both load this
   file, so any change here affects BOTH pages.

   FILENAME: supersedes vs-flow-cards-v2.css, which superseded
   vs-flow-cards.css. The CMS only busts asset caches when the site's
   ASSET-CACHE-INCR changes, so overwriting a stylesheet in place gets
   served stale and fixes never reach the browser. ALWAYS publish a
   significant rewrite to a NEW filename. The two older files are now
   unreferenced and can be deleted.

   Everything is namespaced under .vsflow and the custom properties are
   scoped to .vsflow rather than :root, because capability pages run on
   `LeftNavTech`, which already loads techspecs.css, vaContent.css,
   techSpec.css and Bootstrap. Generic selectors would collide there.

   Layout: one flow per row. Each card is a two-column grid - diagram
   on the left, content on the right - collapsing to stacked below
   900px. Cards with no diagram use .no-media and run full width.

   CALL TO ACTION - why it is a text link, not a button:
   the flow diagrams are drawn as rounded rectangles with a solid brand
   red fill, a centred white label and a drop shadow - which is exactly
   what a filled button looks like. A filled CTA in the same card gave
   four button-shaped objects of which only one was clickable. The form
   collision, not the colour, was the problem: restyling the button
   (outline, alternative reds) never fixed it. The CTA is therefore a
   text link with a trailing arrow - unambiguous as a control, and no
   longer competing with the diagram nodes for the same visual role.

   --vsflow-img-scale: some source PNGs have empty canvas baked into
   the file (e.g. Shopping-Booking-Flow-Instant-without-Seats.png
   carries roughly 25% dead space to the right of its artwork). Add
   .tight to that card's .vsflow-thumb to scale the artwork back up.
   A CLASS, not an inline style - the CMS editor strips inline style
   attributes on save. A correction for badly cropped sources, not the
   fix; the fix is re-exporting those PNGs trimmed to their artwork.
   ------------------------------------------------------------------ */

.vsflow{
  --vs-red:#E10A0A;
  --vs-red-deep:#A80808;
  --vs-purple:#5C2D91;
  --ink:#1A1A1A;
  --ink-mid:#55555C;
  --ink-soft:#7A7A82;
  --rule:#E2E2E6;
  --surface:#FFFFFF;
  --surface-alt:#F7F7F9;
  --api-bg:#FDEDED;
  --portal-bg:#F1EBF8;
  --radius:4px;

  /* Diagram red, sampled from the flow artwork. The CTA uses this
     rather than --vs-red so the link relates to the diagrams instead
     of introducing a second, near-but-different red. */
  --vs-diagram:#B52C37;
  --vs-diagram-deep:#8E1F29;

  --vsflow-media-w:400px;
  --vsflow-media-ratio:16 / 9;
  --vsflow-media-pad:8px;

  color:var(--ink);

  /* Gutter correction. The content sits inside <div class="row">, whose
     -15px margin cancels the container padding the template's title and
     subtitle sit inside, leaving the cards 15px left of the title.
     Drop this if the block is ever moved out of a .row wrapper. */
  padding:0 15px;
}

.vsflow *{box-sizing:border-box;}

/* ---------- Page head ---------- */

.vsflow-head{padding:4px 0 26px;}
.vsflow-kicker{
  margin:0 0 8px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;
}
.vsflow-head h1{
  margin:0 0 10px;font-size:32px;line-height:1.15;font-weight:700;letter-spacing:-.015em;
}
.vsflow-head p{margin:0;color:var(--ink-mid);font-size:16px;max-width:70ch;}

/* ---------- Groups ---------- */

.vsflow-group{margin-bottom:42px;}
.vsflow-group-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px;}
.vsflow-group-head h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em;}
.vsflow-count{font-size:13px;color:var(--ink-soft);}
.vsflow-note{margin:0 0 16px;font-size:14px;color:var(--ink-mid);max-width:70ch;}
.vsflow-rule{height:3px;border-radius:2px;margin-bottom:18px;background:var(--rule);}
.vsflow-rule.api{background:var(--vs-red);}
.vsflow-rule.portal{background:var(--vs-purple);}
.vsflow-rule.time{background:var(--ink);}

/* ---------- Cards: one per row ---------- */

.vsflow-items{display:grid;gap:14px;grid-template-columns:1fr;}

.vsflow-item{
  background:var(--surface);border:1px solid var(--rule);
  /* Coloured left accent - commented out. Uncomment this and the
     .portal override below to bring the accent back. */
  /* border-left:4px solid var(--vs-red); */
  border-radius:var(--radius);
  padding:20px 22px;
  display:grid;
  grid-template-columns:minmax(0,var(--vsflow-media-w)) minmax(0,1fr);
  gap:22px;align-items:start;
}
/* .vsflow-item.portal{border-left-color:var(--vs-purple);} */
.vsflow-item.no-media{grid-template-columns:1fr;}

.vsflow-body{display:flex;flex-direction:column;min-height:100%;}

.vsflow-item h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em;}
.vsflow-item h3 a{color:var(--ink);text-decoration:none;}
.vsflow-item h3 a:hover,.vsflow-item h3 a:focus{color:var(--vs-diagram);text-decoration:underline;}

.vsflow-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;}
.vsflow-tag{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  padding:4px 9px;border-radius:2px;white-space:nowrap;
  background:var(--surface-alt);color:var(--ink-mid);border:1px solid var(--rule);
}
.vsflow-tag.api{background:var(--api-bg);color:var(--vs-red-deep);border-color:transparent;}
.vsflow-tag.portal{background:var(--portal-bg);color:var(--vs-purple);border-color:transparent;}

.vsflow-item p{margin:12px 0 10px;color:var(--ink-mid);font-size:15px;}

/* ---------- Diagram frame ---------- */

.vsflow-thumb{
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:var(--vsflow-media-ratio);
  padding:var(--vsflow-media-pad);overflow:hidden;
  border:1px solid var(--rule);border-radius:var(--radius);background:var(--surface-alt);
}
.vsflow-thumb img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
  transform:scale(var(--vsflow-img-scale,1));
  transform-origin:left center;
}
.vsflow-thumb.tight{--vsflow-img-scale:1.24;}
.vsflow-thumb:hover,.vsflow-thumb:focus{border-color:var(--vs-diagram);}

/* ---------- Card foot ---------- */

.vsflow-status{
  display:flex;gap:20px;flex-wrap:wrap;align-items:center;
  margin-top:auto;padding-top:13px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--ink-soft);
}
.vsflow-status b{color:var(--ink);font-weight:700;}

/* ---------- CTA: text link ----------
   ID-qualified so it competes on equal footing with the docs template's
   own anchor colours (techSpec.css / vaContent.css); an ID outranks any
   number of classes even with !important, and this sheet loads last.
   -webkit-text-fill-color is set because it overrides `color` wherever a
   theme sets it. :visited is deliberate - without it the link flips
   colour once a user follows a flow and returns to the index. */

#va-content .vsflow a.vsflow-link,
#va-content .vsflow a.vsflow-link:link,
#va-content .vsflow a.vsflow-link:visited,
#va-flows .vsflow a.vsflow-link,
#va-flows .vsflow a.vsflow-link:link,
#va-flows .vsflow a.vsflow-link:visited,
.vsflow .vsflow-status a.vsflow-link,
.vsflow .vsflow-status a.vsflow-link:link,
.vsflow .vsflow-status a.vsflow-link:visited{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;padding:0;
  font-size:15px;font-weight:700;letter-spacing:.01em;
  color:var(--vs-diagram)!important;
  -webkit-text-fill-color:var(--vs-diagram)!important;
  text-decoration:none!important;
}

#va-content .vsflow a.vsflow-link:hover,
#va-content .vsflow a.vsflow-link:focus,
#va-flows .vsflow a.vsflow-link:hover,
#va-flows .vsflow a.vsflow-link:focus,
.vsflow .vsflow-status a.vsflow-link:hover,
.vsflow .vsflow-status a.vsflow-link:focus{
  color:var(--vs-diagram-deep)!important;
  -webkit-text-fill-color:var(--vs-diagram-deep)!important;
  text-decoration:underline!important;
}

/* Arrow nudges right on hover. Purely decorative - the span carries
   aria-hidden, so screen readers announce only "View flow". */
.vsflow .vsflow-arrow{
  display:inline-block;
  transition:transform .15s ease;
  font-weight:400;
}
.vsflow a.vsflow-link:hover .vsflow-arrow,
.vsflow a.vsflow-link:focus .vsflow-arrow{transform:translateX(3px);}

/* Visible keyboard focus - a text link has no button box to imply it. */
.vsflow a.vsflow-link:focus-visible{
  outline:2px solid var(--vs-diagram);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Foot ---------- */

.vsflow-foot{
  margin-top:6px;padding:20px 0 10px;border-top:1px solid var(--rule);
  font-size:13px;color:var(--ink-soft);
}
.vsflow-foot p{margin:0;}

@media (min-width:901px){
  .vsflow-foot p{white-space:nowrap;}
}

@media (max-width:1200px){
  .vsflow{--vsflow-media-w:340px;}
}

@media (max-width:900px){
  .vsflow-item{grid-template-columns:1fr;gap:16px;}
  .vsflow{--vsflow-media-w:100%;--vsflow-media-ratio:21 / 9;}
}

@media (max-width:640px){
  .vsflow-head h1{font-size:26px;}
  .vsflow-head{padding-bottom:20px;}
  .vsflow{--vsflow-media-ratio:16 / 9;}
}

@media (prefers-reduced-motion:reduce){
  .vsflow *{transition:none!important;animation:none!important;}
}