/* Article-scoped styles for /journal/digital-marketing-for-travel-social-media/.
   Everything else on the page is the Journal's own components.

   Two things this article needs that journal.css doesn't carry, both already
   proven on /journal/mobile-site-speed-independent-accommodation/ (they live
   in article-speed.css, which is that article's own file — copied rather than
   shared so neither article can quietly restyle the other):

     1. the dark stat pull-quote used for the two headline figures;
     2. the two-button closing CTA (solid + ghost) in the in-prose form card.  */

/* ---- stat pull-quote ------------------------------------------------------ */
.bw-prose blockquote.soc-pull {
  background: var(--bw-ink, #0C2A1C);
  border-left: 4px solid var(--bw-accent-mid, #7FC98B);
  border-radius: var(--bw-r-md, 18px);
  padding: 30px 32px; margin: 30px 0 28px;
}
.bw-prose blockquote.soc-pull p {
  font-family: 'Schibsted Grotesk', system-ui, sans-serif;
  font-size: clamp(19px, 1.9vw, 24px); line-height: 1.4; letter-spacing: -0.015em;
  font-weight: 600; color: var(--bw-cream, #F2F6EE); margin: 0;
}
.bw-prose blockquote.soc-pull strong { color: var(--bw-accent-soft, #9FDCA9); font-weight: 800; }
.bw-prose blockquote.soc-pull .soc-pull__src {
  display: block; margin-top: 12px;
  font-family: 'Karla', system-ui, sans-serif; font-size: 15px; font-weight: 500;
  letter-spacing: 0; color: rgba(242, 246, 238, 0.7);
}
/* .bw-prose a (0,1,1) would paint a link dark green on this dark ground */
.bw-prose blockquote.soc-pull a {
  color: var(--bw-white, #FFFFFF); font-weight: 700;
  border-bottom: 1.5px solid rgba(159, 220, 169, 0.6);
}
.bw-prose blockquote.soc-pull a:hover,
.bw-prose blockquote.soc-pull a:focus-visible {
  color: var(--bw-accent-soft, #9FDCA9); border-bottom-color: var(--bw-accent-soft, #9FDCA9);
}

/* ---- two CTAs side by side in the conversion card ------------------------- */
.pgform--inline .pgform__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.bw-prose .pgform--inline a.pgform__callbtn--ghost {
  background: transparent; color: var(--pf-cream, #F2F6EE);
  border: 1.5px solid rgba(242, 246, 238, 0.42);
}
.bw-prose .pgform--inline a.pgform__callbtn--ghost:hover,
.bw-prose .pgform--inline a.pgform__callbtn--ghost:focus-visible {
  background: rgba(242, 246, 238, 0.12); color: #FFFFFF; border-color: var(--pf-accent-soft, #9FDCA9);
}

@media (max-width: 560px) {
  .bw-prose blockquote.soc-pull { padding: 24px 20px; border-radius: var(--bw-r-sm, 12px); }
  .bw-prose blockquote.soc-pull p { font-size: 18px; }
  /* both buttons go full width so neither can be clipped */
  .pgform--inline .pgform__cta { flex-direction: column; }
  .bw-prose .pgform--inline a.pgform__callbtn--ghost { display: flex; width: 100%; }
}

/* Closing CTA measure — the same approved treatment as the previous article
   (/journal/how-to-break-third-party-booking-dependency/): in a stacked,
   in-article card the component's 46ch leaves a third of the dark panel empty,
   so the copy gets a wider measure. Scoped by id, so the component's own
   default is untouched everywhere else. */
#social-leads-form .pgform__lede { max-width: 64ch; }