/*
 * overrides.css
 *
 * Aliases new (consistent _ separator) class names introduced in PR1
 * to the existing rules in blockrocket.css.
 *
 * blockrocket.css is treated as vendor / read-only (see CLAUDE.md), so
 * rather than editing it, we duplicate the relevant rules here under the
 * new selector names. Once the vendor stylesheet is unfrozen and the old
 * selectors are renamed in place, this file can be deleted.
 *
 * Mirrored from public/css/blockrocket.css:
 *   .section_blog-grid       → .section_blog_grid
 *   .section-blog-content    → .section_blog_content
 *   .section-read-more       → .section_read_more
 *
 * Breakpoints mirrored: base, 991px, 767px, 479px.
 */

/* ---------- base (≥992px) ---------- */

.section_blog_grid {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  background-color: var(--base--white);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  height: auto;
  padding: 48px 200px 120px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.section_blog_content {
  grid-column-gap: 112px;
  grid-row-gap: 112px;
  background-color: var(--base--white);
  flex-direction: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr .25fr;
  grid-auto-columns: 1fr;
  place-content: start center;
  place-items: center stretch;
  width: 100%;
  max-width: none;
  height: auto;
  padding: 56px 200px 80px;
  text-decoration: none;
  display: flex;
  position: static;
  overflow: hidden;
}

.section_read_more {
  grid-column-gap: 120px;
  grid-row-gap: 120px;
  background-color: var(--base--white);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: none;
  height: auto;
  padding: 48px 200px 120px;
  text-decoration: none;
  display: flex;
  position: relative;
}

/* ---------- ≤991px ---------- */

@media screen and (max-width: 991px) {
  .section_blog_grid {
    padding: 48px 80px 80px;
  }

  .section_blog_content {
    padding: 80px;
  }

  .section_read_more {
    padding: 48px 80px 80px;
  }
}

/* ---------- ≤767px ---------- */

@media screen and (max-width: 767px) {
  .section_blog_grid {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    padding: 40px 40px 80px;
  }

  .section_blog_content {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    flex-flow: wrap;
    padding: 40px 40px 80px;
  }

  .section_read_more {
    grid-column-gap: 80px;
    grid-row-gap: 80px;
    padding: 40px 40px 80px;
  }
}

/* ---------- ≤479px ---------- */

@media screen and (max-width: 479px) {
  .section_blog_grid {
    max-width: 100%;
    padding: 40px 24px 48px;
  }

  .section_blog_content,
  .section_read_more {
    max-width: 100%;
    padding: 40px 24px 48px;
  }
}

.form-field-message {
  color: #f44;
  display: block;
  min-height: 1.25rem;
  margin-top: 8px;
  margin-bottom: 16px;
  font-family: Zalando Sans, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.success-message[data-fs-success],
.error-message[data-fs-error] {
  width: 100%;
}

.success-message[data-fs-success] {
  color: var(--base--white);
  background-color: var(--base--green--black--white--5);
  border: 1px solid var(--base--green--30);
  border-radius: 4px;
  margin-top: 20px;
  padding: 20px 24px;
}

/* ============================================================
   Blog grid: top-align cards so rows flush when titles differ
   ============================================================ */

/* Reduce cover image from 16/9 (~675px) to 21/9 (~514px) */
.featured-image {
  aspect-ratio: 21/9;
}



.card-grid.blog {
  align-items: start;
}

/* ============================================================
   Blog post body typography
   The Webflow class names (.blog-rich-text-h2 etc.) are only
   applied by the Webflow editor — markdown-generated HTML is
   bare elements. All overrides use descendant selectors here.

   THREE OPTIONS — uncomment one block, comment the other two.
   ============================================================ */

/* ------------------------------------------------------------
   OPTION A — "Editorial"
   Matches the reference image: very large bold headings, 18px
   body at 170% line-height, blue links. Highest impact change.

.blog-rich-text p {
  color: var(--base--black);
  font-size: 18px;
  font-weight: 400;
  line-height: 170%;
  margin-top: 0;
  margin-bottom: 1.5em;
}

.blog-rich-text h1 {
  color: var(--base--black);
  font-size: 52px;
  font-weight: 800;
  line-height: 110%;
  margin-top: 1.75em;
  margin-bottom: 0.5em;
}

.blog-rich-text h2 {
  color: var(--base--black);
  font-size: 44px;
  font-weight: 800;
  line-height: 110%;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.blog-rich-text h3 {
  color: var(--base--black);
  font-size: 28px;
  font-weight: 700;
  line-height: 120%;
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}

.blog-rich-text h4 {
  color: var(--base--black);
  font-size: 22px;
  font-weight: 600;
  line-height: 130%;
  margin-top: 1.25em;
  margin-bottom: 0.4em;
}

.blog-rich-text a {
  color: #0052cc;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-rich-text a:hover {
  color: #0041a8;
}

.blog-rich-text strong,
.blog-rich-text b {
  font-weight: 700;
  color: var(--base--black);
}

.blog-rich-text ul,
.blog-rich-text ol {
  color: var(--base--black);
  font-size: 18px;
  font-weight: 400;
  line-height: 170%;
  margin-bottom: 1.5em;
  padding-left: 1.75em;
}

.blog-rich-text li {
  margin-bottom: 0.5em;
}

.blog-rich-text blockquote {
  border-left: 3px solid var(--base--green);
  margin: 1.5em 0;
  padding: 0.5em 0 0.5em 1.25em;
  font-size: 18px;
  font-weight: 500;
  color: var(--base--black);
  line-height: 160%;
}

End Option A */


/* ------------------------------------------------------------
   OPTION B — "Brand-Consistent"
   Bigger headings than today, keeps BlockRocket green links.
   Good middle ground between current and editorial.
   ------------------------------------------------------------ */

.blog-rich-text p {
  color: var(--base--black);
  font-size: 18px;
  font-weight: 400;
  line-height: 165%;
  margin-top: 0;
  margin-bottom: 1.25em;
}

.blog-rich-text h1 {
  color: var(--base--black);
  font-size: 40px;
  font-weight: 700;
  line-height: 115%;
  margin-top: 1.75em;
  margin-bottom: 0.5em;
}

.blog-rich-text h2 {
  color: var(--base--black);
  font-size: 34px;
  font-weight: 700;
  line-height: 115%;
  margin-top: 1.75em;
  margin-bottom: 0.5em;
}

.blog-rich-text h3 {
  color: var(--base--black);
  font-size: 24px;
  font-weight: 600;
  line-height: 125%;
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}

.blog-rich-text h4 {
  color: var(--base--black);
  font-size: 20px;
  font-weight: 600;
  line-height: 130%;
  margin-top: 1.25em;
  margin-bottom: 0.4em;
}

.blog-rich-text a {
  color: var(--base--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-rich-text a:hover {
  color: var(--base--green);
}

.blog-rich-text strong,
.blog-rich-text b {
  font-weight: 700;
  color: var(--base--black);
}

.blog-rich-text ul,
.blog-rich-text ol {
  color: var(--base--black);
  font-size: 18px;
  font-weight: 400;
  line-height: 165%;
  margin-bottom: 1.25em;
  padding-left: 1.75em;
}

.blog-rich-text li {
  margin-bottom: 0.4em;
}

.blog-rich-text blockquote {
  border-left: 3px solid var(--base--green);
  margin: 1.25em 0;
  padding: 0.5em 0 0.5em 1.25em;
  font-size: 18px;
  font-weight: 500;
  color: var(--base--black);
  line-height: 155%;
}

/* End Option B */


/* ------------------------------------------------------------
   OPTION C — "Refined Current"
   Minimal delta — fixes the weak/thin feel without redesigning.
   Safest choice if you want to stay close to existing design.

.blog-rich-text p {
  color: var(--base--black);
  font-size: 17px;
  font-weight: 400;
  line-height: 160%;
  margin-top: 0;
  margin-bottom: 1.1em;
}

.blog-rich-text h1 {
  color: var(--base--black);
  font-size: 36px;
  font-weight: 700;
  line-height: 115%;
  margin-top: 1.75em;
  margin-bottom: 0.5em;
}

.blog-rich-text h2 {
  color: var(--base--black);
  font-size: 30px;
  font-weight: 700;
  line-height: 120%;
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}

.blog-rich-text h3 {
  color: var(--base--black);
  font-size: 22px;
  font-weight: 600;
  line-height: 125%;
  margin-top: 1.25em;
  margin-bottom: 0.35em;
}

.blog-rich-text h4 {
  color: var(--base--black);
  font-size: 18px;
  font-weight: 600;
  line-height: 130%;
  margin-top: 1.1em;
  margin-bottom: 0.35em;
}

.blog-rich-text a {
  color: var(--base--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-rich-text a:hover {
  color: var(--base--green);
}

.blog-rich-text strong,
.blog-rich-text b {
  font-weight: 700;
  color: var(--base--black);
}

.blog-rich-text ul,
.blog-rich-text ol {
  color: var(--base--black);
  font-size: 17px;
  font-weight: 400;
  line-height: 160%;
  margin-bottom: 1.1em;
  padding-left: 1.75em;
}

.blog-rich-text li {
  margin-bottom: 0.35em;
}

.blog-rich-text blockquote {
  border-left: 3px solid var(--base--green);
  margin: 1.1em 0;
  padding: 0.5em 0 0.5em 1.25em;
  font-size: 17px;
  font-weight: 500;
  color: var(--base--black);
  line-height: 150%;
}

End Option C */