/* /guides/hiring-guide hub — frame-parity card grid (frame 1:49294, 2026-07-23).
   migration.css lays the .rp-hiring-guide cards out as a 3-col grid whose card is a
   Webflow grid container that shrink-wraps its w-inline-block anchor to max-content
   (~265px). The frame is TWO 588-wide cards (image 588×290, 24px gap) in a 1200
   container. These page-gated overrides (enqueued only on the hub in functions.php)
   hit the frame geometry. !important pins the values over Webflow's grid defaults. */
.rp-hiring-guide .blogs-index.collection-list {
  grid-template-columns: 1fr 1fr !important;
  grid-column-gap: 24px !important;
  grid-row-gap: 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}
.rp-hiring-guide .collection-item-5.hiring-guide-ltr.hiring-guide-ltr-2grids {
  display: block !important; /* was grid → shrink-wrapped the anchor to max-content */
  /* 2026-07-25: the cell carries 16px side padding, so the anchor's width:100% resolved to
     554 inside the correct 588 cell — the VISIBLE card was 34px narrower than the frame
     (1:49302 = 588 wide, image 1:49303 = 588×290, i.e. the card fills its cell edge-to-edge).
     Measured, not eyeballed. Same failure family as the /guides row-padding case: the grid
     track was right and the padding INSIDE it was wrong. */
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.rp-hiring-guide .rp-blog-item.rp-hirigin-guide-item {
  display: block !important;
  width: 100% !important;
}
.rp-hiring-guide .thumb-wrap {
  width: 100% !important;
  height: 290px !important;
}
.rp-hiring-guide .rp-h3.blog-new-rp-h3.hiring-guide-new-rp-h3 {
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 700 !important;
  margin-top: 24px !important;
}
.rp-hiring-guide .rp-p.blog-new-rp-p.hiring-guide-new-rp-p {
  font-size: 15px !important;
  line-height: 24px !important;
  color: #5a6079 !important;
}

/* Intro heading + sub: migration.css gives the sub a full-bleed width + negative
   margin-right that overflows right on wide viewports. Constrain both to a centered
   ~856/820 block below the heading, per the frame's 856-wide intro block. */
.rp-hiring-guide .heading-75.hiring_guide-section-h1 {
  max-width: 900px !important;
  margin: 56px auto 16px !important;
}
.rp-hiring-guide .category-ebook-section-h2.hiring_guide-section-h2 {
  width: auto !important;
  max-width: 820px !important;
  margin: 0 auto 8px !important;
}

/* Hero copy block: the frame (text frame 1:50853) puts it at x=200 / width 808, LEFT-aligned
   near the band's left edge. Live centred it inside the 1300 container (x=306, ~106px right of
   the frame). Left-align it and scale the inset with the viewport (200/1440 = 13.89vw) so it
   holds down to mobile. The band itself needs NO change: frame node 1:50852 has no radius (it's
   a photo under a FULLY OPAQUE #0F1035 overlay, so flat navy is correct), and its 487 height
   includes the frame's 120px nav overlay — below-nav that is 367 vs live's 360.7, i.e. already
   right. 2026-07-25. */
.rp-hiring-guide .rp-container.hero-container {
  max-width: none !important;
  padding-left: clamp(20px, 13.89vw, 200px) !important;
  padding-right: clamp(20px, 13.89vw, 200px) !important;
}
.rp-hiring-guide .guides-hero-container {
  max-width: 808px !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Mobile: single column (consistent with the site; no mobile frame was provided) */
@media (max-width: 767px) {
  .rp-hiring-guide .blogs-index.collection-list {
    grid-template-columns: 1fr !important;
  }
}