/* =========================================================================
   rp-practical-guides — component styles ("Some tips from our blog")
   Scope: .rp-kpguides. Section bg via Kadence attribute; blog cards keep
   their global migration.css styling (.rp-blog-item etc.).
   ========================================================================= */
.rp-kpguides .new-rp-section.rp-home-practical-guides { background: transparent; }

/* ===== QA vs Builder export "Frame 61" — boxed Figma cards (was bare blog teasers) ===== */
/* Card box: border 2px #E4EBFE, radius 8, white bg, pad-bottom 24 (was r0/bd0/transparent) */
.rp-kpguides .rp-blog-item.rp-blog-item-border {
  border: 2px solid #E4EBFE !important;
  border-radius: 8px !important;
  background: #FFFFFF !important;
  padding-bottom: 24px !important;
  overflow: hidden;
}
/* Title: Mulish 20/28/600 #14151A (was 18/26/700 #0A1F5C) */
.rp-kpguides .rp-blog-item .rp-h3 {
  font-family: Mulish, -apple-system, sans-serif !important;
  font-size: 20px !important;
  line-height: 28px !important;
  font-weight: 600 !important;
  color: #14151A !important;
}
/* Excerpt: Inter 14/22/400 #939393 (was 15/22.5 #5A6883) */
.rp-kpguides .rp-blog-item .rp-p {
  font-family: Inter, -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 22px !important;
  font-weight: 400 !important;
  color: #939393 !important;
}
/* Category pill: bg #F0F4FE, pad 10/16, text Inter 14/500 #114EF7 (was #EAF0FF/6-12/12-600-#0A1F5C) */
.rp-kpguides .rp-blog-item .catagory-tag {
  background: #F0F4FE !important;
  border-radius: 100px !important;
  padding: 10px 16px !important;
  line-height: 1 !important;
}
.rp-kpguides .rp-blog-item .catagory-tag,
.rp-kpguides .rp-blog-item .catagory-tag * {
  font-family: Inter, -apple-system, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #114EF7 !important;
}
/* Heading dark part #000 (was #2A2A2A); blue "our blog" span keeps #114EF7 */
.rp-kpguides h2 { color: #000000 !important; }

/* heading dark -> #000 (beat Kadence generated specificity); blue span unaffected */
body.home .rp-kpguides h2.wp-block-kadence-advancedheading,
body.home .rp-kpguides .kt-adv-heading-text { color: #000000 !important; }
/* content inset 24px (Figma "padding 0 24"); image stays full-width/flush */
.rp-kpguides .rp-blog-item .rp-h3,
.rp-kpguides .rp-blog-item .rp-p { padding-left: 24px !important; padding-right: 24px !important; }
.rp-kpguides .rp-blog-item .catagory-tag { margin-left: 24px !important; }

/* heading dark part is a Webflow .new_landing_page_payroll_header held at #2A2A2A by a
   body.home !important rule — beat it (Figma "Some tips from " = #000). Blue span unaffected. */
body.home .rp-kpguides h2.new_landing_page_payroll_header { color: #000000 !important; }

/* ---- responsive ------------------------------------------------------- */
/* Mobile: center the section title [M11/M12] (was left-aligned on narrow screens). */
@media (max-width: 767px) {
  .rp-kpguides h2 { text-align: center !important; }
  /* B-H4: a Webflow 154px width cap + 40px size squashed the title to one word
     per line. Release the width and drop to 28/34 so it wraps to ~3 lines. */
  body.home .rp-kpguides h2.new_landing_page_payroll_header {
    width: 100% !important; max-width: 100% !important;
    font-size: 28px !important; line-height: 34px !important;
  }
}