@charset "UTF-8";
/*!
 * Blog posts index — /blog/ and /pl/blog/, rendered by home.php.
 * Compiles to css/blog.min.css. Only the hero band lives here: the list, its
 * title + search row and the pagination are shared with search and the category/tag
 * archives (pages/post-list.scss); the card is style.css's; the art's own sizing and
 * hover motion are css/blog-hero.css (inc/blog-hero.php).
 *
 * Spacing and type are the old Elementor page's on staging (section e8baa69 and its
 * per-page CSS), which wins over Figma 2943:4392 / 4044:5711 on pixels: hero 60/60,
 * H1 -> intro 60 (32 on phones), intro capped at 493, paragraphs 14 apart, H1
 * 48/40/32 with -1 / -0.5 tracking.
 */
.rs-blog-hero-band {
  padding: 60px 0;
  background: var(--rs-grey-light-50, #f9f9f9);
}
.rs-blog-hero-band .container {
  display: flex;
  align-items: center;
  gap: 30px;
}
.rs-blog-hero-band__text, .rs-blog-hero-band__art {
  flex: 1 1 0;
  min-width: 0;
}
.rs-blog-hero-band__text p {
  max-width: 493px;
  margin: 0;
  font-family: "Hind Madurai", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--rs-black-second, #5d636a);
}
.rs-blog-hero-band__text p + p {
  margin-top: 14px;
}
.rs-blog-hero-band__text p strong {
  font-weight: 700;
}

@media (min-width: 992px) {
  .rs-blog-hero-band .container {
    --bs-gutter-x: 0;
  }
}
.rs-blog-title {
  margin: 0 0 60px;
  font-family: Montserrat, sans-serif;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -1px;
  color: var(--rs-black-prime, #34383c);
  hyphens: auto;
  overflow-wrap: break-word;
}
.rs-blog-title__brand {
  font-weight: 700;
}
.rs-blog-title__word {
  font-weight: 400;
  font-style: italic;
}

@media (max-width: 1024px) {
  .rs-blog-title {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .rs-blog-hero-band {
    padding: 40px 0;
  }
  .rs-blog-hero-band .container {
    --bs-gutter-x: 40px; /* 20px sides, as the list below (post-list.scss) */
    flex-direction: column;
    align-items: stretch;
    gap: 20px; /* staging: intro -> art */
  }
  .rs-blog-hero-band__text p {
    font-size: 14px;
  }
  .rs-blog-title {
    margin-bottom: 32px;
    font-size: 32px;
    letter-spacing: -0.5px;
  }
}