/* =========================================================================
   rp-country-slider — component styles ("Your guide to global employment")
   Scope: .rp-country-slider. Navy band bg via Kadence attribute. The country swiper
   + cards keep their global migration.css / qa-fixes styling.
   ========================================================================= */
.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; }

/* FIX 3 (QA round 1): white intro card (now frozen outside swiper — see below) */
.rp-country-slider .rp-cy-intro {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  align-self: stretch;
}
.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 16px;
}
.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: flex-start;
  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; }

/* ---- FREEZE: intro card fixed at left, only the country cards slide ------
   (per Figma "Organisms/Country Guide": row gap 32, intro 364 frozen,
   country swiper fills the rest). Intro moved OUTSIDE the swiper in the part. */
.rp-country-slider .rp-cy-row {
  display: flex;
  align-items: stretch;
  gap: 32px;
}
.rp-country-slider .rp-cy-intro {
  width: 364px;
  flex: 0 0 364px;
  padding: 20px;            /* Figma content inset (was 32) */
}
.rp-country-slider .rp-cy-intro-h { margin: 0 0 12px; }   /* Figma gap 12 within text block */
.rp-country-slider .rp-cy-swiper-wrap {
  flex: 1 1 auto;
  min-width: 0;             /* let the swiper shrink + clip overflow */
  overflow: hidden;
}
@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; }
}

/* ===== EOR §1.7 country slider — swiper card sizing + EOR variant. RTL mirror of the LTR
   country-slider.css (lines 76–137), which was MISSING here — so on AR the global RTL card
   styling collapsed the cards to 230×144 instead of the EOR 316×396. This file loads last on
   AR, so these (with !important) reassert the component + EOR sizing. `.rp-country-slider` is
   EOR-only (homepage carousel uses .rp-home-countries), so the homepage is untouched. 2026-07-02. */
.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 !important; width: 230px !important; height: 396px !important;
  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% !important; height: 100% !important; }
.rp-country-slider .rp-cy-swiper-wrap .thumb-wrap.countries-wrapper.thumb-wrap-relative {
  position: relative; width: 100% !important; 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% !important; height: 100% !important; 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: right; }

@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-intro-d { font-size: 16px !important; line-height: 24px !important; }
  body.page-template-page-eor .rp-country-slider .rp-cy-row { gap: 32px !important; }
  body.page-template-page-eor .rp-country-slider .rp-cy-swiper-wrap .swiper-slide,
  body.page-template-page-eor .rp-country-slider .swiper-countries-slider .swiper-slide { flex: 0 0 316px !important; width: 316px !important; height: 396px !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; }
}
body.page-template-page-eor .rp-country-slider { margin-top: 64px; }