/* ==========================================================================
   White Paper (gated download) template
   Figma: node 2316:6905 — "3.1 Article Page - White Paper"
   Mirrors webinar.css's breadcrumb/hero/callout system, minus the
   topics/hosted-by sections (not needed for a whitepaper download).
   Reuses: .ox-yardos-eyebrow, .ox-yardos-hero__h1/divider (yardos.css),
   .ox-osrs-stroke, .ox-osrs-form-success/error (osrs.css),
   .ox-yardos-form (dark contact form, osrs.css/yardos.css),
   .ox-articles/.ox-article-card (homepage.css).
   ========================================================================== */

/* ─── Breadcrumb ─────────────────────────────────────────────── */
.ox-whitepaper-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ox-text-muted);
  margin-bottom: 24px;
}
.ox-whitepaper-breadcrumb__sep { opacity: 0.6; }

/* ─── Hero ───────────────────────────────────────────────────── */
.ox-whitepaper-hero {
  background: var(--ox-cream);
  padding-top: 64px;
}
.ox-whitepaper-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 760px;
}
.ox-whitepaper-hero__h1 {
  font-family: 'Tenez', serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.05;
  color: var(--ox-text);
  margin: 0;
}
.ox-whitepaper-hero__date {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  color: var(--ox-text);
  margin: 0;
}
.ox-whitepaper-hero__tags {
  display: flex;
  gap: 1px;
  flex-wrap: wrap;
}
.ox-whitepaper-tag {
  background: var(--ox-cream-btn);
  padding: 8px 16px;
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: var(--ox-text);
  white-space: nowrap;
}

/* ─── Callout card — raw post-editor content (intro paragraphs) ─ */
.ox-whitepaper-callout {
  background: var(--ox-cream-accent);
  padding: 24px;
  max-width: 760px;
}
/* This must win over the per-element rules below (which don't set their
   own margin, so there's no specificity fight) — that's what actually
   creates the visible gap between paragraphs on the front end. */
.ox-whitepaper-callout > * + * { margin-top: 24px; }
.ox-whitepaper-callout p {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ox-text);
}
.ox-whitepaper-callout h2,
.ox-whitepaper-callout h3 {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ox-text);
}
.ox-whitepaper-callout ul,
.ox-whitepaper-callout ol {
  list-style: disc;
  padding-left: 27px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ox-whitepaper-callout li {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ox-text);
}
.ox-whitepaper-callout img,
.ox-whitepaper-callout figure {
  max-width: 100%;
  height: auto;
  margin: 0;
}

/* ─── Gated download (real HubSpot embed) ───────────────────────
   No manual input fields here — HubSpot's script replaces
   [data-hubspot-form] with its own form markup at runtime. ───── */
.ox-whitepaper-download {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 40px;
}
.ox-whitepaper-download__row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.ox-whitepaper-download__thumb {
  width: 160px;
  height: 213px;
  object-fit: cover;
  flex-shrink: 0;
}
.ox-whitepaper-download__title {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 32px;
  line-height: 1.2;
  color: var(--ox-text);
  margin: 0 0 12px;
}
.ox-whitepaper-download__body {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ox-text);
  margin: 0;
}
.ox-whitepaper-download__form {
  max-width: 500px;
}

/* ─── Further Reading light-bg override (same fix as webinar.css) ── */
.ox-whitepaper-articles--light .ox-articles__heading {
  color: var(--ox-teal-deep);
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ox-whitepaper-hero__inner,
  .ox-whitepaper-callout,
  .ox-whitepaper-download { max-width: 100%; }
}
@media (max-width: 768px) {
  .ox-whitepaper-hero__h1 { font-size: 36px; }
  .ox-whitepaper-download__row { flex-direction: column; }
  .ox-whitepaper-download__thumb { width: 100%; max-width: 400px; height: auto; }
  .ox-whitepaper-download__title { font-size: 30px; }
}

/* ─── LIGHT HEADER OVERRIDE (matching webinar.css pattern) ──────── */
.page-template-page-whitepaper-php body { background: #FAF4E5; }
.page-template-page-whitepaper-php .ox-header {
  background: #FAF4E5;
  border-top-color: #FAF4E5;
}
.page-template-page-whitepaper-php .ox-nav__link {
  background: #FAEDDA;
  color: #13252A;
}
.page-template-page-whitepaper-php .ox-nav__link:hover { background: #F5E0C0; }
.page-template-page-whitepaper-php .ox-header__divider { background: #D4C9B8; }
.page-template-page-whitepaper-php .ox-header__logo { background: #FAF4E5; }
.page-template-page-whitepaper-php .ox-logo__text { color: #13252A; }
.page-template-page-whitepaper-php .ox-nav__list { background: #FAF4E5; }
.page-template-page-whitepaper-php .ox-nav__dropdown { background: #FAF4E5; }
.page-template-page-whitepaper-php .ox-nav__dropdown a { color: #13252A; }
.page-template-page-whitepaper-php .ox-nav__dropdown a:hover { background: #F0E8D5; }
.page-template-page-whitepaper-php .ox-logo .ox-logo__svg path,
.page-template-page-whitepaper-php .ox-logo .ox-logo__svg circle { fill: #13252A; }
.page-template-page-whitepaper-php .ox-nav__chevron path { stroke: #FF6600; }