/* ══════════════════════════════════════════════════════════════════════════
   COST CALCULATOR BANNER — reusable component
   Figma 448:11007 (desktop/tablet) · 452:3657 (mobile)
   Built 2026-09-14 (Mo); lifted out of home-v2.css into a component on the
   same day so it can be dropped into any page.

   USE IT
     <!-- wp:template-part {"slug":"cost-calc-banner"} /-->
   The AR twin (parts/ar-cost-calc-banner.html) is swapped in automatically by
   inc/ar-template-part-swap.php on Arabic pages — do NOT reference `ar-` by
   hand. CSS + assets load themselves via inc/cost-calc-banner-assets.php, so
   nothing else needs wiring.

   NOT SCOPED to a page class on purpose: that is what makes it reusable. Every
   selector is prefixed .rp-ccb and nothing else in the theme uses that prefix.

   HOW THE LAYOUT HOLDS TOGETHER
   The blue wedge belongs to the VISUAL COLUMN (.rp-ccb__viz), not to the
   banner, and bleeds out of it with negative offsets. That way its diagonal is
   always measured from the card and can never drift under the message text as
   the banner narrows — which is exactly what went wrong when it was parented
   to the banner. The one value that has to come down with the viewport is the
   left bleed; the steps below are the largest that still leave positive text
   clearance at the tightest width in each range (verified in-page at 768 /
   834 / 900 / 1024 / 1100 / 1199 / 1280 / 1440).
   ══════════════════════════════════════════════════════════════════════════ */

.rp-ccb {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 48px;
  padding: 20px 49px;
  background: #F0F4FE; border: 1px solid #D6E0FD; border-radius: 16px;
}
/* Vertical rhythm is the host section's business, not the component's, so the
   only margin shipped is a sensible default the host can override. */
.rp-ccb { margin-top: 48px; }

.rp-ccb__msg { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

/* The supplied SVG already contains its own white tile, so no padding or
   background here — the asset IS the 48x48 tile. */
.rp-ccb__icon { display: block; }
.rp-ccb__icon img { display: block; width: 48px; height: 48px; }

.rp-ccb__h {
  margin: 0; max-width: 442px;
  font-family: Mulish, -apple-system, sans-serif; font-weight: 700;
  font-size: 28px; line-height: 33.6px; letter-spacing: -0.56px; color: #121212;
}

.rp-ccb__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 12px; border-radius: 8px;
  background: #114EF7; color: #fff; text-decoration: none;
  font-family: Mulish, -apple-system, sans-serif; font-weight: 700; font-size: 14px; line-height: 22px;
  transition: background .15s ease;
}
.rp-ccb__cta:hover { background: #0D3FD0; color: #fff; }
.rp-ccb__cta svg { flex: none; }

/* Visual column: wedge + card. */
.rp-ccb__viz { position: relative; flex: none; width: 477px; }

.rp-ccb__shape {
  position: absolute; z-index: 0; pointer-events: none;
  /* Bleeds to the banner's own edges (20px padding top/bottom, 49px right).
     -52% of the 477 card = the 248px offset Figma uses. */
  top: -20px; bottom: -20px; right: -49px; left: -52%;
  /* Sized to the box — not `cover`, not `auto` — so the diagonal lands where
     Figma puts it: it crosses the banner's top at 41.6% of the width and its
     bottom at 49.4%, against 41.5% / 49.5% in the reference render. `cover`
     cropped it to 53% / 60%, which hid the blue behind the card. */
  background: url("../../images/home-v2/costbanner-shape.svg") right center / 100% 100% no-repeat;
}

/* The card is a supplied export; the component only sizes it. */
.rp-ccb__card { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

/* ── Tablet keeps the desktop two-column composition down to 768; everything
   shrinks fluidly rather than stacking early. */
@media (max-width: 1199px) {
  .rp-ccb { gap: clamp(16px, 2.5vw, 32px); padding: 20px clamp(20px, 2.6vw, 32px); }
  .rp-ccb__viz { width: clamp(300px, 40vw, 440px); }
  .rp-ccb__shape { right: -32px; left: -16%; }
  .rp-ccb__h { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.2; max-width: none; }
}
@media (max-width: 991px) {
  .rp-ccb { gap: 16px; padding: 20px; }
  .rp-ccb__viz { width: clamp(300px, 44vw, 360px); }
  .rp-ccb__shape { right: -20px; left: -12%; }
  .rp-ccb__icon img { width: 40px; height: 40px; }
}

/* ── Stack only when the two columns genuinely run out of room (<768), which is
   where the mobile Figma frame starts. */
@media (max-width: 767px) {
  .rp-ccb { flex-direction: column; align-items: stretch; gap: 24px; padding: 24px; }
  .rp-ccb__msg { gap: 12px; }
  .rp-ccb__icon img { width: 38px; height: 38px; }
  .rp-ccb__h { font-size: 20px; line-height: 24px; letter-spacing: -0.4px; max-width: none; }
  .rp-ccb__cta { margin-top: 8px; width: 195px; max-width: 100%; }
  .rp-ccb__viz { width: auto; }
  /* costbanner-shape.svg is the DESKTOP crop (628x281): its diagonal is so
     steep that in a tall mobile box it floods the whole box and no edge shows.
     The Figma mobile instance has a 526.7x511.0 bounding box — the same artwork
     turned — so mobile uses a quarter-turn copy of the same path. The wedge
     then sits behind the card only, leaving the heading and button on the light
     background, which is what the mobile frame shows. */
  .rp-ccb__shape {
    top: -10px; bottom: -24px; left: -24px; right: -24px;
    background-image: url("../../images/home-v2/costbanner-shape-mobile.svg");
    background-position: center center; background-size: 100% 100%;
  }
}

/* ── RTL (/ar). Flex mirrors the two columns by itself — card left, message
   right — but three things are physical and don't:
     1. the wedge's bleed offsets, so they swap;
     2. the artwork, mirrored with scaleX(-1) rather than a second file;
     3. the CTA arrow, which should point left. */
html[dir="rtl"] .rp-ccb__shape { right: -52%; left: -49px; transform: scaleX(-1); }
html[dir="rtl"] .rp-ccb__cta svg { transform: scaleX(-1); }

@media (max-width: 1199px) {
  html[dir="rtl"] .rp-ccb__shape { right: -16%; left: -32px; }
}
@media (max-width: 991px) {
  html[dir="rtl"] .rp-ccb__shape { right: -12%; left: -20px; }
}
@media (max-width: 767px) {
  /* Stacked: the wedge spans the full width, so only the artwork mirrors. */
  html[dir="rtl"] .rp-ccb__shape { right: -24px; left: -24px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   COST CALCULATOR BANNER — SLIM VARIANT (.rp-ccb2)
   A shorter "reminder" strip: icon, heading and CTA on ONE row, with the
   tilted single-country example card on the right. Built 2026-09-14 (Mo) for
   the EOR page, above the FAQs.

   USE IT
     <!-- wp:template-part {"slug":"cost-calc-banner-slim"} /-->
   AR twin: parts/ar-cost-calc-banner-slim.html, swapped in automatically.

   Separate class tree from .rp-ccb rather than a modifier: the two share only
   their palette, and every layout value differs (one row vs stacked message,
   a lobed shape instead of the wedge, a pre-tilted card that bleeds out of the
   box). A modifier would have had to override nearly every rule.

   The card's tilt and its soft shadow are baked into the webp, so nothing here
   rotates it. Its transparent margin is why it is sized generously and allowed
   to overflow — overflow:hidden on the banner does the cropping.
   ══════════════════════════════════════════════════════════════════════════ */

.rp-ccb2 {
  position: relative; overflow: hidden;
  margin-top: 48px;
  display: flex; align-items: center; gap: 24px;
  /* No bottom padding: the card sits IN FLOW at the bottom of its column, so
     zero here is what makes it flush with the banner's bottom edge. The card
     also defines the banner's height, which is why there is no min-height —
     that was what left dead space above and below it. */
  padding: 20px 48px 0;
  background: #F0F4FE; border-radius: 16px;
  box-sizing: border-box;
}

.rp-ccb2__msg { flex: 1 1 0; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 48px; }
.rp-ccb2__lead { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; }

.rp-ccb2__icon { display: block; }
.rp-ccb2__icon img { display: block; width: 48px; height: 48px; }

.rp-ccb2__h {
  margin: 0; max-width: 400px;
  font-family: Mulish, -apple-system, sans-serif; font-weight: 700;
  font-size: 28px; line-height: 33.6px; letter-spacing: -0.56px; color: #121212;
}

.rp-ccb2__cta {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 20px; border-radius: 8px;
  background: #114EF7; color: #fff; text-decoration: none;
  font-family: Mulish, -apple-system, sans-serif; font-weight: 700; font-size: 14px; line-height: 22px;
  white-space: nowrap; transition: background .15s ease;
}
.rp-ccb2__cta:hover { background: #0D3FD0; color: #fff; }
.rp-ccb2__cta svg { flex: none; }

/* Visual column. The shape and the card both bleed past the banner's padding
   to its edges, which is what makes the strip read as one graphic. */
/* align-self:flex-end pins the column — and therefore the card — to the bottom. */
/* 352 + the 48 bleed = a 400px card, which is 263 tall — with the 20px top
   padding that puts the banner at ~283. At 420 the card was 468x308 and the
   banner 332, which is where the dead space above and below the text came
   from: the message was being centred in a box far taller than it needed. */
.rp-ccb2__viz { position: relative; flex: none; width: 352px; align-self: flex-end; }
.rp-ccb2__shape {
  position: absolute; z-index: 0; pointer-events: none;
  top: -24px; bottom: 0; right: -48px; left: 0;
  background: url("../../images/home-v2/costbanner2-shape.svg") right bottom / 100% 100% no-repeat;
}
/* In flow (not absolute) so it sets the banner's height instead of floating
   inside a fixed one. margin-right bleeds it to the banner's edge; display:block
   removes the inline-baseline gap that would otherwise sit under it. */
.rp-ccb2__card {
  position: relative; z-index: 1; display: block;
  width: calc(100% + 48px); margin-right: -48px; height: auto; max-width: none;
}

@media (max-width: 1199px) {
  .rp-ccb2 { padding: 20px 32px 0; gap: 16px; }
  .rp-ccb2__msg { gap: 24px; }
  .rp-ccb2__h { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.2; max-width: 320px; }
  .rp-ccb2__viz { width: clamp(260px, 30vw, 380px); }
  .rp-ccb2__card { width: calc(100% + 32px); margin-right: -32px; }
  .rp-ccb2__shape { top: -20px; right: -32px; }
}

/* Stacked: message block, then the card on its own lobed background. */
@media (max-width: 767px) {
  .rp-ccb2 { flex-direction: column; align-items: stretch; gap: 20px; padding: 24px 24px 0; }
  .rp-ccb2__msg { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rp-ccb2__lead { gap: 12px; }
  .rp-ccb2__icon img { width: 38px; height: 38px; }
  .rp-ccb2__h { font-size: 20px; line-height: 24px; letter-spacing: -0.4px; max-width: none; }
  .rp-ccb2__cta { width: 100%; max-width: 260px; }
  .rp-ccb2__viz { width: auto; align-self: stretch; }
  /* Stacked: the shape spans the full width behind the card and runs to the
     banner's bottom, so the card still reads as sitting on it. */
  .rp-ccb2__shape { top: -8px; right: -24px; left: -24px; bottom: 0; }
  .rp-ccb2__card { width: calc(100% + 48px); margin-right: -24px; margin-left: -24px; }
}

/* RTL: mirror the shape and the card's bleed side; the card artwork itself is
   a pre-rendered mock, so it is NOT mirrored — flipping it would reverse the
   numbers and the flag. */
html[dir="rtl"] .rp-ccb2__shape { right: 0; left: -48px; transform: scaleX(-1); }
html[dir="rtl"] .rp-ccb2__card { margin-right: 0; margin-left: -48px; }
html[dir="rtl"] .rp-ccb2__cta svg { transform: scaleX(-1); }

@media (max-width: 1199px) {
  html[dir="rtl"] .rp-ccb2__shape { right: 0; left: -32px; }
  html[dir="rtl"] .rp-ccb2__card { margin-right: 0; margin-left: -32px; }
}
@media (max-width: 767px) {
  html[dir="rtl"] .rp-ccb2__shape { right: -24px; left: -24px; }
  html[dir="rtl"] .rp-ccb2__card { margin-right: -24px; margin-left: -24px; }
}