/* ===========================================================================
   Booked Wild — "AI is the front door for travel bookings" Journal article

   One component only: the Adobe statistic pull quote. journal.css already
   styles .bw-prose blockquote; this is the same object carrying more weight,
   because the statistic is the point of that section — it should interrupt the
   reading rhythm rather than sit in the flow as another paragraph.

   Modelled on .sp-pull in article-speed.css so the two read as the same family.
   Scoped to .ai-pull, which no other page uses, so every existing article is
   untouched.
   =========================================================================== */

.bw-prose blockquote.ai-pull {
  background: var(--bw-ink, #0C2A1C);
  border-left: 4px solid var(--bw-accent-mid, #7FC98B);
  border-radius: var(--bw-r-md, 18px);
  padding: 32px 34px; margin: 34px 0 32px;
}
.bw-prose blockquote.ai-pull p {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: clamp(20px, 2.1vw, 27px); line-height: 1.34; letter-spacing: -0.02em;
  font-weight: 600; color: var(--bw-cream, #F2F6EE); margin: 0;
}
/* the three figures are what the eye should land on first */
.bw-prose blockquote.ai-pull strong { color: var(--bw-accent-soft, #9FDCA9); font-weight: 800; }

/* Attribution stays visibly attached to the statistic, and visibly subordinate
   to it. .bw-prose cite is not otherwise styled, so this defines it outright. */
.bw-prose blockquote.ai-pull .ai-pull__src {
  display: block; margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid rgba(159, 220, 169, 0.28);
  font-family: 'Karla', sans-serif; font-style: normal;
  font-size: 14px; letter-spacing: 0.06em; line-height: 1.5;
  color: rgba(242, 246, 238, 0.72);
}

@media (max-width: 560px) {
  .bw-prose blockquote.ai-pull {
    padding: 24px 22px; margin: 28px 0 26px; border-radius: var(--bw-r-sm, 12px);
  }
  .bw-prose blockquote.ai-pull p { font-size: 19px; line-height: 1.38; }
  .bw-prose blockquote.ai-pull .ai-pull__src { margin-top: 15px; padding-top: 13px; font-size: 13px; }
}

/* ---- the enquiry card, inside the prose column ----------------------------
   The site's page-enquiry form (.pgform) normally sits after </article> as a
   full-bleed dark band. Here it closes the article inside .bw-prose, so the
   heading, copy, CTA and form read as one block. The markup, classes, JS hooks,
   validation, submission and success behaviour are the component's own and are
   untouched — only the band around it is neutralised, and the article's own
   prose typography is stopped from repainting the card's dark half.

   Lifted verbatim from article-speed.css, which solves the identical problem on
   the sibling article, so the two cards stay identical. */

.pgform--inline {
  /* the band's own ground, padding and seam belong to a full-width section */
  padding: 0;
  background: none;
  border-bottom: 0;
  margin: 40px 0 8px;
}
.pgform--inline .pgform__inner { max-width: 100%; }
/* Inside .bw-prose the article's own typography outranks the card's:
   .bw-prose h2 (0,1,1) beats .pgform__title (0,1,0) and paints the heading
   --bw-ink, which is invisible on the card's dark half; the same is true of h3
   and of the prose paragraph rhythm. Each is restated here at (0,2,1). */
.bw-prose .pgform--inline .pgform__title {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.08; letter-spacing: -0.03em; font-weight: 800;
  color: var(--pf-white, #FFFFFF);
  margin: 0 0 18px; scroll-margin-top: 100px;
}
.bw-prose .pgform--inline .pgform__lede {
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 17px; line-height: 1.6;
  color: rgba(242, 246, 238, 0.82); margin: 0 0 20px; max-width: 46ch;
}
.bw-prose .pgform--inline .pgform__done h3 {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  color: var(--pf-ink, #0C2A1C); margin: 0 0 10px; font-size: 21px; line-height: 1.25;
}
.bw-prose .pgform--inline .pgform__done p { color: var(--pf-body, #22452F); margin: 0; }
.bw-prose .pgform--inline p { margin-bottom: 0; }
.bw-prose .pgform--inline label { margin: 0; }

/* pageform.css collapses the card at a 1024px VIEWPORT, but here the card lives
   in a 760px column at every viewport width, so it must always be one column:
   copy and call button above, form below. */
.pgform--inline .pgform__card { grid-template-columns: minmax(0, 1fr); }
.pgform--inline .pgform__intro { justify-content: flex-start; }
.pgform--inline .pgform__intro > .pgform__lede { margin-bottom: 20px; }

/* At the 760px prose measure the card is already one column (pageform.css
   collapses it at 1024px), so the two halves stack: copy and call button above,
   form below. Slightly tighter padding than the full-width band, which is sized
   for a 1180px container. */
.pgform--inline .pgform__intro { padding: 34px 32px 32px; }
.pgform--inline .pgform__panel { padding: 32px 32px 30px; }

/* the strategy-call button: the site's pill, on the card's dark half */
.pgform--inline .pgform__cta { margin: 4px 0 0; }
.bw-prose .pgform--inline a.pgform__callbtn {
  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(--pf-r-pill, 999px);
  background: var(--pf-accent, #3E8E4F); color: #FFFFFF;
  border-bottom: 0;
  transition: background .18s ease, color .18s ease;
}
/* journal.css sets .bw-prose a{color;border-bottom} at (0,1,1) and a:hover at
   (0,1,1); both are restated here at (0,2,1) so the pill keeps its own colours */
.bw-prose .pgform--inline a.pgform__callbtn:hover,
.bw-prose .pgform--inline a.pgform__callbtn:focus-visible {
  background: #FFFFFF; color: var(--pf-ink, #0C2A1C); border-bottom-color: transparent;
}
.bw-prose .pgform--inline a.pgform__callbtn:focus-visible {
  outline: 3px solid var(--pf-accent-soft, #9FDCA9); outline-offset: 3px;
}

/* The form's own inputs must not inherit the article's prose typography. */
.bw-prose .pgform--inline input,
.bw-prose .pgform--inline textarea,
.bw-prose .pgform--inline label,
.bw-prose .pgform--inline button { font-family: 'Karla', sans-serif; }
.bw-prose .pgform--inline ul,
.bw-prose .pgform--inline ol { margin: 0; padding: 0; }

@media (max-width: 560px) {
  .pgform--inline { margin-top: 32px; }
  .pgform--inline .pgform__intro { padding: 26px 20px 24px; }
  .pgform--inline .pgform__panel { padding: 24px 20px 24px; }
  /* full-width, wrapping, 48px minimum target — never a clipped pill */
  .bw-prose .pgform--inline a.pgform__callbtn {
    display: flex; width: 100%; max-width: 100%;
    padding-left: 18px; padding-right: 18px; font-size: 15px;
  }
}
@media (max-width: 360px) {
  .pgform--inline .pgform__intro { padding: 22px 16px 20px; }
  .pgform--inline .pgform__panel { padding: 20px 16px 20px; }
  .bw-prose .pgform--inline a.pgform__callbtn { padding-left: 14px; padding-right: 14px; font-size: 14px; }
}


/* ---- crawl figures ---------------------------------------------------------
   The 606-site findings as a compact grid, on the Journal's own tokens. Numbers