/* components/enterprise.css — page-scope tuning of the shared kit components to the
   Enterprise (Who we serve) frame (Figma 17032:161313). Loaded page-gated via
   inc/kadence-enterprise.php on template page-enterprise (EN 8645 / AR 8646). Each section
   below frame-scopes a generic kit component (.rp-intro, .rp-feature-split, .rp-icon-cards)
   so the base components stay untouched for their other consumers.
   Wrapper: .rp-enterprise (from parts/enterprise-body.html). */

/* ── INTRO pain (.rp-ent-intro) — heading 2-line centered, blue span inline. The canonical
   heading runs larger than the kit 32/40 (40/48) and breaks after "harder"; max-width 720
   forces that wrap. */
.rp-ent-intro .rp-intro__heading { font-size: 40px; line-height: 48px; max-width: 720px; }
@media (max-width: 991px) {
  .rp-ent-intro .rp-intro__heading { font-size: 28px; line-height: 36px; }
}
/* Pain-card body copy: bolder + darker navy to match Figma (E4 / K3 — "needs bolder
   text as per the Figma"). Kit-scoped via .rp-ent-intro so the base .rp-intro pages
   (CoR, Contractors, Local Payroll) keep their lighter-by-design body. Base is
   400/#2A2A2A. NB (2026-07-05): live proved the custom_css "rp-intro-standard" override
   ALSO !importants color+weight (not just font-size as first assumed), so it beat this
   (0,2,0) rule — pain body rendered light-grey 400. !important restores Figma medium-navy. */
.rp-ent-intro .rp-intro__text { color: #1B1B3A !important; }

/* ── E2 (2026-07-05): the "Trusted by…" logo cloud sits in the SAME lavender band as the
   hero (Figma 17032:161313 — one continuous hero box). The hero gradient bottoms out at
   #EAF0FE; give the enterprise brands-bar that fill (it renders white/#FAFBFF by default) so
   the logos continue the hero band. Shared component kept — only the enterprise instance is
   recoloured. */
body.page-template-page-enterprise .brands-bar-component,
body.page-template-page-enterprise .new_landing_page_brands.new_landing_page_brands { background: #EAF0FE !important; }

/* ── E6 (2026-07-05): the .rp-ent-cta blue banner's RP mark (rp.svg) is a 2-tone navy/blue
   glyph that blends on the blue band; Figma wants a solid WHITE mark. rp.svg has no white
   variant asset, so render it white via filter (scoped to the enterprise CTA icon). */
body.page-template-page-enterprise .rp-ent-cta__icon { filter: brightness(0) invert(1); }

/* ── FEATURE rows (.rp-ent-feature = expertise / expert / adapts) on .rp-feature-split.
   The canonical feature media (regions / CSM chat / approval workflow) sits on a blue blob
   baked into the webp, so no media frame is needed; the kit __media-img (width:100%) is fine.
   Vertically centre the row and cap the media so it doesn't overrun the 1136 inner. */
.rp-ent-feature .rp-feature-split__split { align-items: center; }
.rp-ent-feature .rp-feature-split__media-img { max-width: 555px; width: 100%; height: auto; margin: 0 auto; }
.rp-ent-feature .rp-feature-split__txt .rp-feature-split__h { font-size: 40px; line-height: 1.2; margin: 0 0 20px; }
.rp-ent-feature .rp-feature-split__leadin { margin: 0 0 16px; }

/* Expertise umbrella header ("How RemotePass supports…") — centred, sized 36/44, generous
   gap before the feature row (canonical ~ section break). */
.rp-ent-expertise .rp-ent-feature__lead { font-size: 36px; line-height: 44px; max-width: 760px; margin: 0 auto 72px; }

@media (max-width: 991px) {
  .rp-ent-feature .rp-feature-split__txt .rp-feature-split__h { font-size: 28px; line-height: 1.25; }
  .rp-ent-expertise .rp-ent-feature__lead { font-size: 28px; line-height: 36px; margin-bottom: 40px; }
}

/* ── FEATURES (.rp-ent-features) — extends .rp-icon-cards into the canonical bordered 3x2 grid
   with rounded-square tile icons. Eyebrow + centred H2, then a single rounded-bordered grid
   whose cells are divided by 1px lines (no double outer border). */
.rp-ent-features__eyebrow { text-align: center; color: #114EF7; font: 600 12px/1 Mulish, sans-serif; letter-spacing: 1.8px; text-transform: uppercase; margin: 0 0 12px; }
.rp-ent-features__h { text-align: center; font: 700 40px/1.2 Mulish, sans-serif; color: #021143; margin: 0 0 48px; }
.rp-ent-features .rp-icon-cards__grid { gap: 0; border: 1px solid #ECEFF3; border-radius: 16px; overflow: hidden; }
.rp-ent-features .rp-icon-cards__card { padding: 40px 32px; border-right: 1px solid #ECEFF3; border-bottom: 1px solid #ECEFF3; }
.rp-ent-features .rp-icon-cards__card:nth-child(3n) { border-right: none; }
.rp-ent-features .rp-icon-cards__card:nth-last-child(-n+3) { border-bottom: none; }
.rp-ent-features__icon { width: 48px; height: 48px; border-radius: 12px; background: #EAF0FE; display: inline-flex; align-items: center; justify-content: center; margin: 0 0 24px; }
.rp-ent-features__icon svg { width: 24px; height: 24px; fill: none; stroke: #0B1133; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rp-ent-features .rp-icon-cards__title { font-size: 20px; line-height: 1.3; font-weight: 700; color: #021143; margin: 0 0 12px; }
.rp-ent-features .rp-icon-cards__body { font-size: 16px; line-height: 1.5; color: #5A6378; }
@media (max-width: 991px) {
  .rp-ent-features__h { font-size: 28px; line-height: 1.25; }
  .rp-ent-features .rp-icon-cards__card:nth-child(3n) { border-right: 1px solid #ECEFF3; }
  .rp-ent-features .rp-icon-cards__card:nth-child(2n) { border-right: none; }
}
@media (max-width: 600px) {
  .rp-ent-features .rp-icon-cards__card { border-right: none !important; }
  .rp-ent-features .rp-icon-cards__card:not(:last-child) { border-bottom: 1px solid #ECEFF3; }
}
/* RTL: workflow arrows in the body text read LTR (Line manager → … chain). */
[dir="rtl"] .rp-ent-features .rp-icon-cards__body { direction: rtl; }
/* RTL: the grid dividers use physical border-right + :nth-child(3n) removal, which lands on the
   wrong edge once the columns mirror. Flip to border-left so the column dividers show correctly. */
[dir="rtl"] .rp-ent-features .rp-icon-cards__card { border-right: none; border-left: 1px solid #ECEFF3; }
[dir="rtl"] .rp-ent-features .rp-icon-cards__card:nth-child(3n) { border-left: none; }
@media (max-width: 991px) {
  [dir="rtl"] .rp-ent-features .rp-icon-cards__card:nth-child(3n) { border-left: 1px solid #ECEFF3; }
  [dir="rtl"] .rp-ent-features .rp-icon-cards__card:nth-child(2n) { border-left: none; }
}
@media (max-width: 600px) {
  [dir="rtl"] .rp-ent-features .rp-icon-cards__card { border-left: none !important; }
}

/* ── QUOTE (.rp-ent-quote) — uses the generic .rp-quote-carousel component as-is (navy band,
   28px white quote, gold .hl, prev/next + dots). No tuning needed; defaults match the frame. */

/* ── CTA (.rp-ent-cta) — extends the shared .rp-cm-cta blue-band family into the canonical
   icon-bar layout: RP pin icon + title/sub LEFT, single white button RIGHT (mirrors the values
   the section shipped with as wp_block 7710; now a scoped reusable variant). */
.rp-ent-cta { padding: 48px 24px; }
.rp-ent-cta .rp-cm-cta__card { max-width: 1200px; margin: 0 auto; background: #114EF7; border-radius: 24px; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px 56px; flex-wrap: wrap; }
.rp-ent-cta__lead { display: flex; align-items: center; gap: 28px; flex: 1 1 480px; min-width: 260px; }
.rp-ent-cta__icon { width: 64px; height: 64px; flex: none; filter: brightness(0) invert(1); }
.rp-ent-cta .rp-cm-cta__title { font-family: Mulish, -apple-system, sans-serif; font-weight: 700; font-size: 32px; line-height: 1.2; color: #fff; margin: 0 0 12px; }
.rp-ent-cta .rp-cm-cta__sub { font-family: Mulish, -apple-system, sans-serif; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.85); margin: 0; max-width: 540px; }
.rp-ent-cta .rp-cm-cta__btn { flex: none; background: #fff; color: #021143; font-family: Mulish, -apple-system, sans-serif; font-weight: 700; font-size: 15px; padding: 18px 32px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.rp-ent-cta .rp-cm-cta__btn:hover { background: #F0F4FE; }
@media (max-width: 991px) {
  .rp-ent-cta .rp-cm-cta__card { flex-direction: column; align-items: stretch; text-align: center; gap: 24px; padding: 28px 24px; }
  .rp-ent-cta__lead { flex-direction: column; text-align: center; gap: 16px; flex: none; }
  .rp-ent-cta .rp-cm-cta__sub { max-width: none; }
  .rp-ent-cta .rp-cm-cta__btn { width: 100%; text-align: center; }
}
[dir="rtl"] .rp-ent-cta__lead { text-align: right; }

/* E5 (2026-07-04): center the integrations heading/sub/link on Enterprise.
   The shared home-integrations part renders left-aligned (double-slide-landing-page-left-*);
   Figma 17034:301091 centers it. Scoped to the enterprise page only so other kit pages
   (smbs/finance/hr/legal) are untouched. Copy + h1->h2 demote already handled by
   inc/integrations-copy-override.php. */
body.page-template-page-enterprise .new-rp-sync-container .mw5 { text-align: center !important; }
body.page-template-page-enterprise .new-rp-sync-container .mw5 .double-slide-landing-page-left-main-header,
body.page-template-page-enterprise .new-rp-sync-container .mw5 .double-slide-landing-page-left-label { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }