/* Native 2026 article template — blog / news / webinar / ebook / guide / legal.
   Replaces the vendored legacy article classes (.rich-text-block, .module,
   .hero-banner-*, .resource-card, …) so those pages can drop the 260 KB shared
   sheet. Loaded alongside redesign.css (tokens) + base-chrome.css (nav/
   footer) + site.css. Scoped under .rd-article / .rd-prose / .rd-related. */

.rd-article {
  font-family: var(--rd-font);
  color: var(--rd-ink);
  -webkit-font-smoothing: antialiased;
}

/* ── Hero: two-column, text-left + square-image-right (mirrors the case-study
   hero). Compact vertically, and the ~half-width square keeps report covers /
   photos small enough to stay sharp on retina (vs. a blurry full-width banner). */
.rd-article__hero {
  max-width: var(--rd-maxw);
  margin: 0 auto;
  /* Top padding clears the FIXED toast+nav header (~124px from viewport top):
     the hero starts at y=44 under the toast, so the nav overlaps its first ~80px. */
  padding: clamp(112px, 10vw, 144px) clamp(20px, 4vw, 40px) 0;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.rd-article__hero-text { min-width: 0; }
.rd-article__eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rd-blue);
  margin: 0 0 14px;
}
.rd-article__title {
  font-family: var(--rd-display);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--rd-navy);
  margin: 0;
}
.rd-article__date {
  font-size: 0.9375rem;
  color: var(--rd-grey);
  margin: 18px 0 0;
}
.rd-article__share {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  font-size: 0.875rem;
  color: var(--rd-grey);
}
.rd-article__share .u-embed { display: inline-flex; }
.rd-article__share a {
  display: inline-flex;
  color: var(--rd-grey-2);
  transition: color 0.15s ease;
}
.rd-article__share a:hover { color: var(--rd-blue); }
.rd-article__share svg { width: 20px; height: 20px; display: block; }

/* Hero download CTA (ebooks that gate the PDF/form behind a hero button). */
.rd-article__cta {
  display: inline-block;
  margin: 26px 0 0;
  background: var(--rd-blue);
  color: #fff;
  font-weight: 600;
  padding: 14px 30px;
  border-radius: 6px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9375rem;
  transition: background 0.15s ease;
}
.rd-article__cta:hover { background: var(--rd-blue-hover); }

/* Square media on the right. */
.rd-article__hero-media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--rd-bg-soft);
  line-height: 0;
}
.rd-article__hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
/* Webinar video poster fills the square (keeps the centered play button). */
.rd-article__hero-media .rd-video,
.rd-article__hero-media .rd-video img {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.rd-article__hero-media .rd-video img { object-fit: cover; }

/* No hero image (news, legal, empty-binding pages): single-column, left text. */
.rd-article__hero--noimg {
  grid-template-columns: 1fr;
  max-width: 820px;
}

/* Legal pages: lone-H1 hero, so tighten the top padding — the full article
   padding left a big empty gap above the heading on shorter windows (QA rows
   61,63-65). Still clears the fixed nav. */
.rd-article--legal .rd-article__hero { padding-top: clamp(84px, 7vw, 104px); padding-bottom: clamp(4px, 1.5vw, 16px); }

/* Blog: cover is a DESIGNED graphic (award badge, etc.) — float it at its native
   ratio, never crop. No background box; height-capped so tall art stays compact. */
.rd-article__hero--fit .rd-article__hero-media {
  aspect-ratio: auto;
  background: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rd-article__hero--fit .rd-article__hero-img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 460px;
  object-fit: contain;
  border-radius: 16px;
}

/* Webinar keeps the original centered hero + a 16:9 video thumbnail below. */
.rd-article__hero--center {
  display: block;
  max-width: 820px;
  text-align: center;
}
.rd-article__hero--center .rd-article__share { justify-content: center; }
.rd-article__hero--center .rd-article__wsub { max-width: 640px; margin-left: auto; margin-right: auto; }
.rd-article__hero-media--wide {
  max-width: 860px;
  margin: clamp(24px, 3vw, 40px) auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background: var(--rd-navy);
}

/* Calculator (Outgrow) guides: keep the interactive embed wide (the prose holds
   only the embed, no body copy). */
.rd-article--calc .rd-prose { max-width: 1040px; }

@media (max-width: 860px) {
  .rd-article__hero {
    grid-template-columns: 1fr;
    gap: clamp(22px, 6vw, 36px);
    max-width: 560px;
  }
  .rd-article__hero-media { max-width: 440px; }
}

/* ── Tables in article/legal prose ───────────────────────────────────────
   Scraped legal pages (Privacy, Terms, MSA) ship wide multi-column tables with
   no styling, so they render cramped/overflowing (QA rows 61,63,64,65). Give
   cells real padding + borders, and let a too-wide table scroll horizontally
   inside the prose column instead of squishing every column. */
.rd-prose table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}
.rd-prose th,
.rd-prose td {
  border: 1px solid var(--rd-line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  min-width: 8em;
}
.rd-prose th { background: var(--rd-bg-soft); font-weight: 600; color: var(--rd-ink); }

/* ── HubSpot lead forms embedded in article prose (ebook/guide gates) ─────
   HubSpot injects a RAW (non-iframe) form with .hs-* classes and NO styling of
   its own; the old vendored sheet used to style it, so after the legacy-exit
   these rendered as default browser inputs. Restore brand styling (scoped to
   .rd-prose so the dark-footer newsletter form is unaffected). */
.rd-prose .hs-form { margin: 1.6em 0; }
.rd-prose .hs-form fieldset { max-width: none !important; }
.rd-prose .hs-form-field { margin-bottom: 18px; }
.rd-prose .hs-form-field > label {
  display: block; font-size: 0.9rem; font-weight: 600; color: var(--rd-navy); margin: 0 0 6px;
}
.rd-prose .hs-form-field > label .hs-form-required { color: var(--rd-blue); margin-left: 2px; }
.rd-prose .hs-field-desc { font-size: 0.85rem; color: var(--rd-grey); margin: 0 0 6px; }
.rd-prose .hs-input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%; box-sizing: border-box; padding: 11px 14px; font: inherit; font-size: 1rem;
  line-height: 1.4; color: var(--rd-ink); background: #fff;
  border: 1px solid var(--rd-line); border-radius: 6px;
}
.rd-prose select.hs-input { height: 46px; }
.rd-prose textarea.hs-input { min-height: 120px; }
.rd-prose .hs-input:focus {
  outline: none; border-color: var(--rd-blue); box-shadow: 0 0 0 3px rgba(43, 92, 255, 0.12);
}
.rd-prose .hs-error-msg, .rd-prose .hs-error-msgs label { color: #c0392b; font-size: 0.8rem; margin-top: 4px; }
.rd-prose .hs-form .inputs-list { list-style: none; margin: 0; padding: 0; }
.rd-prose .hs-form .legal-consent-container { font-size: 0.8rem; color: var(--rd-grey); margin-top: 4px; }
.rd-prose .hs-button.primary {
  display: inline-block; margin-top: 10px; background: var(--rd-blue); color: #fff; font-weight: 600;
  padding: 14px 32px; border: 0; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.9375rem; cursor: pointer; transition: background 0.15s ease;
}
.rd-prose .hs-button.primary:hover { background: var(--rd-blue-hover); }
/* HubSpot 2-column rows → single column on narrow viewports */
@media (max-width: 640px) {
  .rd-prose .hs-form .hs-form-field { width: 100% !important; margin-right: 0 !important; float: none !important; }
}

/* ── Prose body ───────────────────────────────────────────────────── */
.rd-prose {
  max-width: 720px;
  margin: clamp(40px, 5vw, 72px) auto;
  padding: 0 24px;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--rd-ink);
}
.rd-prose > :first-child { margin-top: 0; }
.rd-prose p { margin: 0 0 1.25em; }
.rd-prose h2 {
  font-family: var(--rd-display);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--rd-navy);
  margin: 1.8em 0 0.6em;
}
.rd-prose h3 {
  font-family: var(--rd-display);
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.25;
  font-weight: 500;
  color: var(--rd-navy);
  margin: 1.6em 0 0.5em;
}
.rd-prose h4 { font-size: 1.125rem; font-weight: 600; color: var(--rd-navy); margin: 1.4em 0 0.4em; }
.rd-prose ul, .rd-prose ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.rd-prose li { margin: 0 0 0.5em; }
.rd-prose li::marker { color: var(--rd-blue); }
.rd-prose a { color: var(--rd-blue); text-decoration: underline; text-underline-offset: 2px; }
.rd-prose a:hover { color: var(--rd-blue-hover); }
.rd-prose strong { font-weight: 600; color: var(--rd-navy); }
.rd-prose blockquote {
  margin: 1.6em 0;
  padding: 0.4em 0 0.4em 1.4em;
  border-left: 3px solid var(--rd-blue);
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--rd-navy);
}
.rd-prose img,
.rd-prose figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1.6em auto;
}
.rd-prose figure { margin: 1.6em 0; }
.rd-prose figcaption { font-size: 0.875rem; color: var(--rd-grey); text-align: center; margin-top: 0.6em; }
.rd-prose iframe { max-width: 100%; margin: 1.6em 0; border: 0; }
.rd-prose hr { border: 0; border-top: 1px solid var(--rd-line); margin: 2em 0; }

/* ── Related cards (replaces .resource-card) ──────────────────────── */
.rd-related { border-top: 1px solid var(--rd-line); margin-top: clamp(48px, 6vw, 88px); }
.rd-related__inner { max-width: var(--rd-maxw); margin: 0 auto; padding: clamp(48px, 6vw, 88px) 24px; }
.rd-related__h2 {
  font-family: var(--rd-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--rd-navy);
  margin: 0 0 40px;
}
.rd-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.rd-related__card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rd-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.rd-related__card:hover { box-shadow: 0 12px 32px rgba(9, 22, 40, 0.1); transform: translateY(-2px); }
.rd-related__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--rd-bg-soft); }
.rd-related__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-related__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; flex: 1; }
.rd-related__cat {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rd-blue); margin: 0;
}
.rd-related__title {
  font-family: var(--rd-display);
  font-size: 1.1875rem; line-height: 1.3; font-weight: 500; color: var(--rd-navy); margin: 0;
}
.rd-related__link { margin-top: auto; font-size: 0.9375rem; font-weight: 600; color: var(--rd-blue); }

@media (max-width: 860px) {
  .rd-related__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ── Webinar hero: video poster + play overlay, larger summary ─────── */
.rd-article__wsub {
  margin: 16px 0 0;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--rd-grey);
}
.rd-video {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
}
.rd-video img { width: 100%; height: auto; display: block; }
.rd-video::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 22, 40, 0.18);
  transition: background 0.18s ease;
}
.rd-video:hover::after { background: rgba(9, 22, 40, 0.32); }
.rd-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: transform 0.18s ease;
}
.rd-video:hover .rd-video__play { transform: translate(-50%, -50%) scale(1.06); }
.rd-video__play svg { width: 30px; height: 30px; fill: var(--rd-blue); margin-left: 4px; }

/* ── Native demo CTA (webinars) ──────────────────────────────────── */
.rd-cta { margin-top: clamp(48px, 6vw, 88px); }
.rd-cta__inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) 32px;
  background: var(--rd-grad-electric);
  border-radius: 24px;
  text-align: center;
  color: #fff;
}
.rd-cta__inner h2 {
  font-family: var(--rd-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(26px, 3.2vw, 40px);
  max-width: 640px;
  margin: 0 auto 28px;
  color: #fff;
}
.rd-cta__btn {
  display: inline-block;
  background: var(--rd-lime);
  color: var(--rd-navy);
  font-weight: 600;
  padding: 15px 32px;
  border-radius: 6px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9375rem;
}
.rd-cta__btn:hover { background: #cef07f; }