/* Article/case-study detail pages only (see the `article-carousel-900`
   wrapper in article-detail-template.hubl.html / case-study-detail-
   template.hubl.html): ResponsiveGallery's carousel (mobile) sits in the
   900px article column instead of the site's usual 1340px width — override
   its embla edge padding/nav margins to match, without touching the
   1340px default used everywhere else (blog listing, other pages). */
.article-carousel-900 .embla__viewport {
  padding-left: max(calc((100% - 700px) / 2), 20px) !important;
  padding-right: max(calc((100% - 700px) / 2), 20px) !important;
}

.article-carousel-900 .nav-carousel {
  margin-left: max(calc((100% - 700px) / 2), 20px) !important;
}

.article-carousel-900 .arrow-buttons-carousel {
  margin-right: max(calc((100% - 700px) / 2), 20px) !important;
}

.article-carousel-900{
  padding-top: 48px !important;
}

.responsive-gallery-mobile {
  padding-bottom: 0 !important;
}

/* "Carousel" variant (9) only: keep each card at its original width as if
   the viewport were still 1340px (calc(1340px/3 - 16px), matching the
   unscoped `md:basis-[calc(33.333%-16px)]` in ResponsiveGalleryMobile.tsx)
   instead of shrinking to a third of the narrower 900px viewport. Fewer
   cards show at once (a peek of the next one) instead of 3 squeezed-in
   cards — scoped via the `data-variant="9"` set in ResponsiveGalleryMobile.tsx. */
.article-carousel-900 .responsive-gallery-mobile[data-variant="9"] .embla__container > div {
  flex-basis: calc(1340px / 3 - 16px) !important;
  max-width: none !important;
}

/* Case study product row only — overrides the rule above (extra `.case-study`
   class wins on specificity) to match the design repo's ProductCard exactly:
   full-width cards up to lg (no 3-up split below that), fixed 360px cards
   from lg instead of a viewport-relative width (see the `@media (min-width:
   1024px)` block below for the lg part). The image frame goes to a fixed
   22/31 aspect with a 12px radius instead of the variant's pixel height (that
   fixed height was cropping the product screenshots' left/right edges), the
   description reserves 2 lines even with one so title/description/link land
   at the same height card to card, and its line breaks always show — the
   module only shows them from `fhd` up, but this line break is editorial. */
.case-study .article-carousel-900 .responsive-gallery-mobile[data-variant="9"] .embla__container > div {
  flex-basis: 100% !important;
  max-width: none !important;
}
.case-study .article-carousel-900 .responsive-gallery-mobile[data-variant="9"] article > div > .relative {
  height: auto !important;
  max-height: none !important;
  /* The module also sets `md:aspect-[1/1.28]` on this same div (part of its
     padding classes) — left alone, it keeps forcing the frame's own height
     from width×1.28 from md up, independent of the image inside, so the
     frame ends up taller than the image (the "container" looking bigger).
     Canceling it lets the frame's height come purely from its content:
     padding-top + the image's own height (set via aspect-ratio below). */
  aspect-ratio: auto !important;
  border-radius: 12px !important;
}
/* aspect-ratio goes on the <img>, not the padded frame div above: the frame
   has top-only padding (pt-5/lg:pt-8, no bottom), so with border-box sizing
   a ratio set on the frame itself is computed against the padded box, not
   the image's own content — the image would render at the wrong size/ratio.
   The <img> has no padding of its own, so its content box IS its border box. */
.case-study .article-carousel-900 .responsive-gallery-mobile[data-variant="9"] article > div > .relative > img {
  height: auto !important;
  aspect-ratio: 22 / 31 !important;
  object-fit: cover !important;
}
.case-study .article-carousel-900 .responsive-gallery-mobile[data-variant="9"] article .gap-2 > div:last-child {
  min-height: 36px;
}
/* Title↔description gap: the module's `gap-2` (8px) down to the design
   repo's own product card, `gap-1` (4px). */
.case-study .article-carousel-900 .responsive-gallery-mobile[data-variant="9"] article .gap-2 {
  gap: 4px !important;
}
.case-study .article-carousel-900 .responsive-gallery-mobile[data-variant="9"] article br {
  display: inline !important;
}

/* ── Article body typography ──────────────────────────────────────────── */
.web-page .article-body p,
.web-page .article-body li {
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  color: #001d3d;
}
.web-page .article-body p {
  margin-bottom: 20px;
}
.web-page .article-body h1 {
  /* Article title at H2 visual size (keeps <h1> for SEO/a11y) */
  font-size: 26px !important;
  line-height: 25px !important;
}
.web-page .article-body h5 {
  /* Same size as body paragraphs, gray-500 instead of the body text color */
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 500 !important;
  color: #64748b;
}
.web-page .article-body h4 {
  margin-top: 40px;
  margin-bottom: 16px;
}

/* ── Case study body typography ──────────────────────────────────────────
   Scoped to `.case-study` (the class on case-study-detail-template.hubl.html's
   <main>) — the regular blog article keeps the rules above untouched.
   Tighter hierarchy than the blog: section header (h4) barely bigger than
   the body copy, air does the work instead of size. */
.case-study .article-body h4 {
  font-size: 19px !important;
  line-height: 25px !important;
  font-weight: 500 !important;
}

.case-study .article-body {
  padding-top: 72px !important;
}

/* Product row (ResponsiveGallery + FeaturesScroller) — case study only:
   72px/128px instead of the blog's flat 48px (`.article-carousel-900`
   above), matching the same top-spacing rhythm as PullQuote/ArticleBody.
   The gallery's own per-variant `py-6`/`pt-6` (ResponsiveGalleryMobile.tsx)
   isn't `!important`, so zeroing it here is enough regardless of variant —
   the section wrapper's padding-top carries all the spacing instead. */
.case-study .article-carousel-900 {
  padding-top: 72px !important;
}
.case-study .responsive-gallery-mobile {
  padding-top: 0 !important;
}
/* 3 classes (.web-page .case-study .article-body) beats the 2-class rule
   above on specificity alone, no !important needed for the margin.
   margin-top is the section break (Background → Challenges → Solution),
   since all three now live in ONE rich text instead of separate module
   drops — it's what marks "a new named section starts here". Not on the
   first h4 in the body: right after the colored band there's nothing to
   separate from yet. */
.web-page .case-study .article-body h4 {
  margin-top: 72px;
  margin-bottom: 12px;
}
.web-page .case-study .article-body > h4:first-child {
  margin-top: 0;
}
.web-page .case-study .article-body strong {
  font-weight: 500 !important;
}
.web-page .case-study .article-body p,
.web-page .case-study .article-body li {
  font-size: 17px !important;
  line-height: 26px !important;
}
.web-page .case-study .article-body p {
  margin-bottom: 20px;
}
/* A paragraph that OPENS with bold text is a new block's lead-in (the
   editor bolds the block's label at the start of its first paragraph,
   e.g. "**Outdated member experience:** Members expressed…") — give it
   the block-to-block gap. A plain paragraph keeps the small p-to-p gap
   above (margin-bottom only). Lets one rich text hold several blocks
   without a separate module instance per block.
   Not when it's the first paragraph right after an h4: the heading's own
   margin-top is already the section break — stacking the block gap on top
   of it would double the spacing there. */
.web-page .case-study .article-body p:has(> strong:first-child):not(h4 + p) {
  margin-top: 48px;
}
/* The last element of each block doesn't carry its own margin — so the air
   between blocks/sections is exactly the container's own padding-top. */
.web-page .case-study .article-body > *:last-child:not(h4),
.web-page .case-study .article-body > figure:last-child > *:last-child {
  margin-bottom: 0 !important;
}

/* Case study lead (the HeroHeader description) — same size/weight/color as
   the module's own default lead treatment. Wrap the HeroHeader module call
   in a `case-lead` class in the template for this to take effect. */
.case-study .case-lead p {
  font-size: 15px !important;
  line-height: 20px !important;
  font-weight: 500 !important;
  color: #64748b !important;
  margin-bottom: 0;
}

/* Case study entry padding — pt-[90px]/lg:pt-28 already matches the
   HeroHeader "heroHeader" variant's own spacing, only pb-16 at lg differs
   from its default pb-20. `[data-animate]` anchors on the module's own root
   element (only one inside `.case-lead`) instead of DOM position, since
   HubSpot's Island wrapper can add its own container in between. */
@media (min-width: 1024px) {
  .case-study .case-lead [data-animate] {
    padding-bottom: 64px !important;
  }
}

/* PullQuote text — needs `.web-page .pull-quote p` (class + class + element)
   to beat the global `.web-page p { font-size: 15px !important }` in
   web-pages.css on specificity; `Text`'s `prose-p:` utility classes alone
   don't (the typography plugin compiles its modifiers with `:where()`,
   which adds no specificity). Not scoped to `.case-study`: the module isn't
   case-study-specific even though that's its only use today. */
.web-page .pull-quote p {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 26px !important;
  font-weight: 400 !important;
}
@media (min-width: 1024px) {
  .web-page .pull-quote p {
    line-height: 28px !important;
  }
}

/* Case study numbers — no entry animation: it's the hard data of the case,
   appearing with a delay reads as a promotional block. */
.case-numbers [data-animate] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.web-page .article-body ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.web-page .article-body li {
  margin-bottom: 0;
}
.web-page .article-body a {
  color: #dc634b;
  text-decoration: underline;
}
.web-page .article-body img {
  border-radius: 0.5rem;
}
.web-page .article-body :last-child {
  margin-bottom: 0;
}

/* Comparison table inside article body */
.web-page .article-body .article-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
  border: 1px solid #e0dfdd;
  border-radius: 8px;
}
.web-page .article-body table {
  border-radius: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
}
.web-page .article-body th,
.web-page .article-body td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #001d3d;
  border-bottom: 1px solid #e0dfdd;
}
.web-page .article-body th + th,
.web-page .article-body td + td {
  border-left: 1px solid #e0dfdd;
}
.web-page .article-body tbody tr:last-child td {
  border-bottom: none;
}
.web-page .article-body th {
  font-weight: 600;
  background: #efeeed;
}
.web-page .article-body tr:first-child th:first-child {
  border-top-left-radius: 8px;
}
.web-page .article-body tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

/* ── FAQ inside article (.article-faq) ───────────────────────────────── */
.web-page .article-faq .faq-static-title {
  font-size: 22px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  text-wrap: balance;
}
.web-page .article-faq .article-faq-answer,
.web-page .article-faq .article-faq-answer p {
  font-size: 18px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  color: #001d3d;
}
.web-page .article-faq .faqs-section div:has(> .faq-static-title) {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  gap: 20px !important;
}

/* Article 900px container */
.article-container {
  max-width: 900px;
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  margin-left: auto;
  margin-right: auto;
}

/* Case study reading column: narrower than the blog's 900px. The hero
   title/lead and everything else outside `.article-container` (video,
   numbers, product row, PullQuote) keep their own wider widths — this
   only narrows the ArticleBody wrappers. Scoped to `.case-study` so the
   blog article's own `.article-container` (900px) is untouched. */
.case-study .article-container {
  max-width: 700px;
}

/* FAQ section inside article — collapse bottom padding */
.article-faq .faqs-section {
  padding-bottom: 6px !important;
}

/* Newsletter banner spacing */
.blog-newsletter-wrap {
  padding-top: 64px;
  padding-bottom: 64px;
}

.main-article-grid {
  padding-top: 64px;
}

@media (min-width: 1024px) {
  .main-article-grid {
    padding-top: 176px;
  }

  .article-container {
    padding-left: 0;
    padding-right: 0;
  }

  .web-page .article-body p,
  .web-page .article-body li {
    font-size: 20px !important;
    line-height: 30px !important;
  }
  .web-page .article-body h1 {
    font-size: 40px !important;
    line-height: 42px !important;
  }
  .web-page .article-body h5 {
    font-size: 20px !important;
    line-height: 30px !important;
  }
  .web-page .article-body h4 {
    margin-top: 64px;
    margin-bottom: 20px;
  }

  .case-study .article-body h4 {
    font-size: 20px !important;
    line-height: 26px !important;
  }
  .web-page .case-study .article-body h4 {
    margin-top: 128px;
    margin-bottom: 16px;
  }
  .web-page .case-study .article-body > h4:first-child {
    margin-top: 0;
  }
  .web-page .case-study .article-body p,
  .web-page .case-study .article-body li {
    font-size: 18px !important;
    line-height: 29px !important;
  }
  .web-page .case-study .article-body p {
    margin-bottom: 24px;
  }
  .web-page .case-study .article-body p:has(> strong:first-child):not(h4 + p) {
    margin-top: 72px;
  }
  .case-study .case-lead p {
    font-size: 16px !important;
    line-height: 20px !important;
  }

  .web-page .article-faq .faq-static-title {
    font-size: 28px !important;
    line-height: 34px !important;
  }
  .web-page .article-faq .article-faq-answer,
  .web-page .article-faq .article-faq-answer p {
    font-size: 20px !important;
    line-height: 30px !important;
    font-weight: 400 !important;
  }
  .blog-newsletter-wrap {
    padding-top: 176px;
    padding-bottom: 176px;
  }

  .case-study .article-body {
    padding-top: 128px !important;
  }
  .case-study .article-carousel-900 {
    padding-top: 128px !important;
  }
  .case-study .article-carousel-900 .responsive-gallery-mobile[data-variant="9"] .embla__container {
    gap: 24px;
  }
  .case-study .article-carousel-900 .responsive-gallery-mobile[data-variant="9"] .embla__container > div {
    flex-basis: 360px !important;
    max-width: 360px !important;
  }
  /* Gap between the card's image frame and its text block — the module's
     own `lg:gap-8` (32px) on the <article>, down to Tailwind's gap-6 (24px). */
  .case-study .article-carousel-900 .responsive-gallery-mobile[data-variant="9"] article {
    gap: 24px !important;
  }
  /* Gap between the title/description group and the link button — the
     module's `gap-4` (16px, no lg override) up to the design repo's own
     `lg:gap-6` (24px). */
  .case-study .article-carousel-900 .responsive-gallery-mobile[data-variant="9"] article .gap-4.flex-1 {
    gap: 24px !important;
  }
}

.web-page p {
  text-wrap: pretty;
}
.web-page h1,
.web-page h2,
.web-page h3,
.web-page h4 {
  text-wrap: balance;
}

.web-page .article-body p.article-updated {
  font-size: 14px !important;
  line-height: 18px !important;
  font-weight: 500 !important;
  color: #64748b;
}
@media (min-width: 1024px) {
  .web-page .article-body p.article-updated {
    font-size: 16px !important;
  }
}
:where(.dark) .web-page .article-body p.article-updated {
  color: rgba(148, 163, 184, 1);
}