/* ===========================================================================
   Booked Wild — Journal: "What does 'frictionless booking website' actually
   mean for your travel website?"

   Article-scoped only. Everything here hangs off .fx- classes used on that one
   page, so no other Journal post is affected and journal.css is untouched.
   Colours, radii, fonts and spacing all come from the tokens journal.css
   already declares (--bw-ink, --bw-accent, --bw-cream, --bw-r-card and so on).

   The visuals replace the article's image placeholders: a booking-journey map,
   two before/after comparisons, a handover diagram and a speed stat. They are
   built from markup rather than flat images so the text stays selectable,
   searchable and translatable, and so they reflow on a phone instead of
   demanding a horizontal scroll.
   =========================================================================== */

/* ---- shared figure shell -------------------------------------------------- */
.fx { margin: 40px 0; }
.fx__cap {
  font-family: 'Karla', sans-serif; font-size: 15px; line-height: 1.5;
  color: var(--bw-muted); margin: 14px 0 0;
}
.fx__label {
  font-family: 'Karla', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--bw-accent);
  margin: 0 0 14px;
}

/* ---- 1. the booking journey map ------------------------------------------
   Two named stages so the handover is visible as a seam rather than implied,
   with the friction note under each. On desktop the steps run across; on a
   phone the whole thing becomes a vertical list — no sideways scrolling. */
.fx-journey {
  border: 1px solid var(--bw-line); border-radius: var(--bw-r-card);
  background: var(--bw-cream); padding: 30px 30px 26px;
}
.fx-journey__stage + .fx-journey__stage { margin-top: 10px; }
.fx-journey__name {
  font-family: 'Karla', sans-serif; font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bw-muted);
  margin: 0 0 12px;
}
.fx-journey__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fx-journey__steps li {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Karla', sans-serif; font-size: 15px; font-weight: 600; color: var(--bw-ink);
  background: var(--bw-white); border: 1px solid var(--bw-line-2);
  border-radius: var(--bw-r-pill); padding: 11px 18px;
}
.fx-journey__steps li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bw-accent-mid); flex: none;
}
/* the seam between the site and the booking platform */
.fx-journey__seam {
  display: flex; align-items: center; gap: 14px; margin: 18px 0;
  font-family: 'Karla', sans-serif; font-size: 13.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--bw-accent);
}
.fx-journey__seam::before,
.fx-journey__seam::after { content: ""; height: 1px; background: var(--bw-line-2); flex: 1; }
.fx-journey__note {
  font-family: 'Karla', sans-serif; font-size: 14.5px; line-height: 1.55;
  color: var(--bw-body); margin: 12px 0 0;
}
.fx-journey__foot {
  margin: 22px 0 0; padding: 16px 18px; border-radius: var(--bw-r-md);
  background: var(--bw-tint); border: 1px solid var(--bw-line);
  font-family: 'Karla', sans-serif; font-size: 15px; line-height: 1.6; color: var(--bw-ink);
}

/* ---- 2. before / after comparisons ---------------------------------------- */
.fx-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.fx-card {
  border-radius: var(--bw-r-card); padding: 24px 24px 26px;
  border: 1px solid var(--bw-line); background: var(--bw-cream);
}
.fx-card--bad { background: var(--bw-cream); border-color: var(--bw-line-2); }
.fx-card--good { background: var(--bw-white); border-color: var(--bw-accent-mid);
  box-shadow: 0 16px 40px rgba(12, 42, 28, .07); }
.fx-card__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Karla', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px;
}
.fx-card--bad .fx-card__tag { color: var(--bw-muted); }
.fx-card--good .fx-card__tag { color: var(--bw-accent); }
.fx-card__tag::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.fx-card--bad .fx-card__tag::before { background: var(--bw-line-2); }
.fx-card--good .fx-card__tag::before { background: var(--bw-accent); }
.fx-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.fx-card li {
  position: relative; padding-left: 22px;
  font-family: 'Karla', sans-serif; font-size: 15.5px; line-height: 1.55; color: var(--bw-body);
}
.fx-card li::before {
  content: ""; position: absolute; left: 2px; top: 9px;
  width: 8px; height: 8px; border-radius: 50%;
}
.fx-card--bad li::before { background: var(--bw-line-2); }
.fx-card--good li::before { background: var(--bw-accent); }

/* a small screen sketch so the comparison reads visually, not only as words */
.fx-screen {
  border: 1px solid var(--bw-line-2); border-radius: var(--bw-r-md);
  background: var(--bw-white); padding: 12px; margin: 0 0 16px;
}
.fx-screen__bar { height: 7px; border-radius: 4px; background: var(--bw-line); margin: 0 0 8px; }
.fx-screen__bar--short { width: 46%; }
.fx-screen__bar--mid { width: 72%; }
.fx-screen__cta {
  border-radius: var(--bw-r-pill); font-family: 'Karla', sans-serif;
  font-size: 12.5px; font-weight: 700; text-align: center; padding: 9px 10px; margin-top: 10px;
}
.fx-screen__cta--strong { background: var(--bw-accent); color: var(--bw-white); }
.fx-screen__cta--weak {
  background: transparent; color: var(--bw-muted);
  border: 1px dashed var(--bw-line-2); font-weight: 600; font-size: 11.5px;
}

/* ---- 3. the handover diagram ---------------------------------------------- */
.fx-hand { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 16px; align-items: stretch; }
.fx-hand__side { border-radius: var(--bw-r-card); padding: 22px 22px 24px; border: 1px solid var(--bw-line); }
.fx-hand__side--brand { background: var(--bw-ink); color: var(--bw-cream); border-color: var(--bw-ink); }
.fx-hand__side--plain { background: var(--bw-cream); color: var(--bw-body); border-style: dashed; border-color: var(--bw-line-2); }
.fx-hand__t {
  font-family: 'Schibsted Grotesk', sans-serif; font-size: 17px; font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 10px;
}
.fx-hand__side--brand .fx-hand__t { color: var(--bw-white); }
.fx-hand__side p {
  font-family: 'Karla', sans-serif; font-size: 14.5px; line-height: 1.55; margin: 0;
}
.fx-hand__side--brand p { color: rgba(242, 246, 238, .82); }
.fx-hand__gap {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Karla', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bw-muted);
  min-width: 74px; text-align: center;
}
.fx-hand__gap span[aria-hidden] { font-size: 22px; color: var(--bw-accent); line-height: 1; }

/* ---- 4. the speed stat ---------------------------------------------------- */
.fx-stat {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center;
  background: var(--bw-ink); color: var(--bw-cream);
  border-radius: var(--bw-r-card); padding: 30px 32px;
}
.fx-stat__n {
  font-family: 'Schibsted Grotesk', sans-serif; font-size: clamp(46px, 6vw, 74px);
  line-height: .9; letter-spacing: -.045em; font-weight: 800; color: var(--bw-accent-soft); margin: 0;
}
.fx-stat__k {
  font-family: 'Karla', sans-serif; font-size: 16px; line-height: 1.6;
  color: rgba(242, 246, 238, .88); margin: 0;
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .fx-compare { grid-template-columns: minmax(0, 1fr); }
  /* the handover stops being a left/right pair and becomes a top/bottom one,
     so the arrow points down the page instead of across it */
  .fx-hand { grid-template-columns: minmax(0, 1fr); }
  .fx-hand__gap { min-width: 0; flex-direction: row; padding: 4px 0; }
  .fx-hand__gap span[aria-hidden] { transform: rotate(90deg); }
}
@media (max-width: 560px) {
  .fx { margin: 32px 0; }
  .fx-journey { padding: 22px 18px 20px; }
  /* one step per row: a phone should never have to scroll sideways to read the
     journey, which is the whole point of the graphic */
  .fx-journey__steps { flex-direction: column; gap: 8px; }
  .fx-journey__steps li { width: 100%; font-size: 14.5px; padding: 10px 14px; }
  .fx-card { padding: 20px 18px 22px; }
  .fx-stat { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 24px 20px; text-align: left; }
  .fx-stat__k { font-size: 15px; }
}

/* ---- in-article CTA -------------------------------------------------------
   This must NOT reuse .bw-cta: in journal.css that class is the HEADER button,
   and it is display:none at <=939px, so an in-body CTA wearing it disappears on
   every phone. .btn is likewise only defined as a descendant of .bw-sidecta.
   Article-scoped classes, styled to match the sidebar button on a cream ground. */
.fx-ctawrap { margin: 28px 0 34px; }
/* .bw-prose a (0,1,1) sets colour AND a border-bottom underline, so it outranks a
   bare .fx-ctabtn (0,1,0) — the pill rendered dark-green-on-green and underlined.
   Qualified to (0,2,1) so the button wins on its own ground. */
.bw-prose a.fx-ctabtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; box-sizing: border-box;
  font-family: 'Karla', sans-serif; font-size: 16px; font-weight: 600;
  line-height: 1.3; text-align: center; text-decoration: none;
  padding: 13px 26px; border-radius: var(--bw-r-pill);
  background: var(--bw-accent); color: var(--bw-white);
  transition: background .18s ease, color .18s ease;
}
/* services.css/journal.css both set a[:hover]{color:...} at (0,1,1), so the
   hover colour has to be re-asserted at equal-or-greater weight here. */
.bw-prose a.fx-ctabtn { border-bottom: 0; padding-bottom: 13px; }
.bw-prose a.fx-ctabtn:hover, .bw-prose a.fx-ctabtn:focus-visible {
  background: var(--bw-ink); color: var(--bw-white); border-bottom-color: transparent; }
.bw-prose a.fx-ctabtn:focus-visible { outline: 3px solid var(--bw-accent); outline-offset: 3px; }

@media (max-width: 560px) {
  /* full-width, wrapping, 48px minimum touch target — never a clipped pill */
  .bw-prose a.fx-ctabtn { display: flex; width: 100%; max-width: 100%;
    padding-left: 18px; padding-right: 18px; font-size: 15px; }
}
@media (max-width: 360px) {
  .bw-prose a.fx-ctabtn { padding-left: 14px; padding-right: 14px; font-size: 14px; }
}