/* =========================================================================
   rp-country-slider — SELF-CONTAINED component sheet.
   Scope: .rp-country-slider (a dedicated block class on wp_block #7285/#7286,
   so the styling travels WITH the block). Carries the homepage's exact working
   values, so the slider renders identical wherever the block is dropped — no
   page forks (.rp-eor / .rp-home-…). Componentization standard, see
   component-registry.md (2026-06-27).

   Card-photo rules are scoped under `.rp-country-slider .rp-cy-swiper-wrap`
   (0,5,0) so they out-rank the frozen `.rp-eor …thumb-wrap…` (0,4,0) navy rule
   in migration.min.css without editing that frozen file.
   ========================================================================= */

/* ---- section band (navy comes from the Kadence rowlayout bg attribute) --- */
.rp-country-slider .new-rp-section.rp-home-countries,
.rp-country-slider .rp-home-countries.new-rp-section.new-rp-section-blue-bg { background: transparent; }
.rp-country-slider .new-rp-section-header.new-rp-section-header-white { color: #ffffff; }
.rp-country-slider .highlight-it-gold { color: #FFDE6F; }

/* ---- section wrapper outer padding: match the homepage exactly (top 0, sides
        32, bottom 56) so the section sits identically on every page. The homepage
        keeps these via its own body.home rule (left untouched, higher specificity);
        this gives every other page the same, overriding the frozen `.rp-eor`
        migration padding (56px 32px) + its mobile variant. ---------------- */
.rp-country-slider .new-rp-section.rp-home-countries {
  padding: 0 32px 56px !important;
}
.rp-country-slider .new-rp-section-vertical-scroll-container { padding-left: 12px; padding-right: 12px; }
/* Dead Webflow `.w-embed.w-script` embed holding the original swiper-init JS as
   RAW TEXT (no <script> tag) — the live init is assets/js/home-countries.js, so
   this block is inert. It renders its JS as visible text once the section has
   height; hide it (content stays in the DOM for any runtime that reads it). */
.rp-country-slider .new-rp-section-horizental-slider-container-script { display: none; }

/* ---- slider container width (lifted from the old .rp-eor §A fork) -------- */
.rp-country-slider .new-rp-section-vertical-scroll-container {
  max-width: 1300px; margin: 0 auto;
  padding-left: 24px; padding-right: 24px;
  overflow: hidden; box-sizing: border-box;
}
.rp-country-slider .swiper.swiper-countries-slider {
  opacity: 1; padding: 8px 0 32px;
  overflow: hidden; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}

/* ---- intro card (frozen at left, OUTSIDE the swiper) -------------------- */
.rp-country-slider .rp-cy-row { display: flex; align-items: stretch; gap: 32px; }
.rp-country-slider .rp-cy-intro {
  display: flex; flex-direction: column;
  background: #ffffff; border-radius: 16px;
  /* 2026-06-27: width is the homepage value (274). It was content-driven there
     — flex-basis 230 floored up to ~274 by the heading's longest word — so on a
     page with shorter words it collapsed to 230. Pin the basis to 274 so the
     intro card is the same width on every page. */
  flex: 0 0 274px;
  padding: 20px; min-height: 396px; overflow: visible; box-sizing: border-box;
}
.rp-country-slider .rp-cy-intro-h {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 40px; line-height: 48px; font-weight: 700; color: #000000; margin: 0 0 12px;
}
.rp-country-slider .rp-cy-intro-d {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 20px; line-height: 28px; font-weight: 400; color: #2A2A2A; margin: 0 0 24px;
}
.rp-country-slider .rp-cy-intro-btn {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: stretch; width: 100%; margin-top: auto;   /* pin button to card bottom */
  background: #114EF7; color: #ffffff;
  font-family: Mulish, -apple-system, sans-serif; font-size: 14px; line-height: 22px; font-weight: 700;
  padding: 16px 24px; border-radius: 4px; text-decoration: none;
  border: 1px solid #114EF7; transition: background-color 0.15s ease;
}
.rp-country-slider .rp-cy-intro-btn:hover { background: #0d3fd0; border-color: #0d3fd0; color: #ffffff; }

/* ---- swiper layout: fixed 230x396 slides, one nowrap row ---------------- */
.rp-country-slider .rp-cy-swiper-wrap { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.rp-country-slider .rp-cy-swiper-wrap .swiper-wrapper { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; }
.rp-country-slider .rp-cy-swiper-wrap .swiper-slide {
  float: none !important; flex: 0 0 230px; width: 230px !important; height: 396px;
  padding: 0 !important; box-sizing: border-box;
}
.rp-country-slider .rp-cy-swiper-wrap .swiper-slide > .rp-country-item,
.rp-country-slider .rp-cy-swiper-wrap .swiper-slide > .rp-blog-item { width: 100%; height: 100%; }

/* ---- photo card: full-bleed photo, radius 8, bottom gradient ::after,
        flag+name over the photo (homepage values; replaces the .rp-eor
        290/336 navy fork). (0,5,0) via .rp-cy-swiper-wrap beats the frozen
        .rp-eor navy rule. ----------------------------------------------- */
.rp-country-slider .rp-cy-swiper-wrap .thumb-wrap.countries-wrapper.thumb-wrap-relative {
  position: relative; width: 100%; height: 100% !important;
  aspect-ratio: 16 / 10; min-height: 0; border-radius: 8px; overflow: hidden;
  display: flex; align-items: flex-end; padding: 0; margin: 0; background: transparent;
}
.rp-country-slider .rp-cy-swiper-wrap .thumb-wrap-absolute-img,
.rp-country-slider .rp-cy-swiper-wrap .thumb-wrap-absolute-img.thumb-wrap-absolute-img-v3 {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; border-radius: 8px;
}
.rp-country-slider .rp-cy-swiper-wrap .thumb-wrap.countries-wrapper.thumb-wrap-relative::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background: linear-gradient(to top, rgba(10, 31, 92, 0.75) 0%, rgba(10, 31, 92, 0) 100%);
  z-index: 2; pointer-events: none;
}
.rp-country-slider .country-tag-container.country-tag-container-v3 {
  position: relative; z-index: 3; display: flex; flex-direction: row; align-items: center; gap: 8px;
  margin: 0 16px 16px; padding: 0; background-color: transparent; border: none; width: auto; height: auto; border-radius: 0;
}
.rp-country-slider .thumb-wrap-img.thumb-wrap-img-v3 {
  width: 32px; height: 20px; object-fit: cover; border-radius: 2px; margin: 0; flex-shrink: 0;
}
.rp-country-slider .thumb-wrap-p.thumb-wrap-p-v3 {
  color: #ffffff; font-family: "Mulish", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.2;
  padding: 0; margin: 0; text-align: left;
}

@media (max-width: 991px) {
  .rp-country-slider .rp-cy-row { flex-direction: column; gap: 24px; }
  .rp-country-slider .rp-cy-intro { width: 100%; flex: 0 0 auto; }
  .rp-country-slider .rp-cy-intro-h { font-size: 32px; line-height: 40px; }
  .rp-country-slider .rp-cy-intro-d { font-size: 17px; line-height: 26px; }
}

/* ── EOR §1.7 variant — Figma 17759:27877. The base component (homepage) renders the intro heading at
   40/48, intro card ~274w and cards ~230w (4-up). Figma's EOR section is 32/40 heading, 364 intro card,
   316 cards, 32px gap (3-up at 1440). Scope to EOR desktop; mobile keeps the component defaults. 2026-07-02. */
@media (min-width: 992px) {
  body.page-template-page-eor .rp-country-slider .rp-cy-intro-h { font-size: 32px !important; line-height: 40px !important; }
  body.page-template-page-eor .rp-country-slider .rp-cy-intro { flex: 0 0 364px !important; width: 364px !important; }
  body.page-template-page-eor .rp-country-slider .rp-cy-row { gap: 32px !important; }
  body.page-template-page-eor .rp-country-slider .swiper-countries-slider .swiper-slide { width: 316px !important; }
}

/* EOR §1.7 — full Figma 17759:27877 parity audit (2026-07-02). The base component (homepage) renders
   smaller: desc 20/28, card radius 8, country name 16/600, navy gradient, and the section sits flush
   under the SpendCards banner. Figma's EOR section: desc 16/24, radius 16, name 24/700, black gradient,
   and clear top spacing. Scoped to EOR so the homepage is untouched. */
body.page-template-page-eor .rp-country-slider { margin-top: 64px; }
@media (min-width: 992px) {
  body.page-template-page-eor .rp-country-slider .rp-cy-intro-d { font-size: 16px !important; line-height: 24px !important; }
  body.page-template-page-eor .rp-country-slider .thumb-wrap,
  body.page-template-page-eor .rp-country-slider .thumb-wrap-absolute-img,
  body.page-template-page-eor .rp-country-slider .thumb-wrap-absolute-img-v3 { border-radius: 16px !important; }
  body.page-template-page-eor .rp-country-slider .thumb-wrap-p { font-size: 24px !important; font-weight: 700 !important; line-height: 1.2 !important; }
  body.page-template-page-eor .rp-country-slider .thumb-wrap::after,
  body.page-template-page-eor .rp-country-slider .thumb-wrap-relative::after { background: linear-gradient(180deg, rgba(0,0,0,0) 46%, rgba(0,0,0,0.7)) !important; }
}