/* .rp-countries-cards — net-new "150+ countries" card row (EOR §1.7, Figma 17759:27877).
   A heading card + N full-bleed photo cards in a native horizontal-scroll row (no swiper).
   The scroll is contained inside .rp-countries-cards__row (max-width + overflow-x:auto) so it
   never causes page-level horizontal overflow. Scope: .rp-countries-cards. EOR rebuild 2026-06-29. */
.rp-countries-cards__sec { padding: 80px 24px; font-family: Mulish, -apple-system, sans-serif; }
.rp-countries-cards__row {
  display: flex; gap: 32px; max-width: 1252px; margin: 0 auto;
  overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
/* Heading card (white, rounded 16, padding 20, 364w, CTA pinned to the bottom). */
.rp-countries-cards__heading {
  flex: 0 0 364px; width: 364px; min-height: 400px;
  background: #fff; border: 1px solid #ECEFF3; border-radius: 16px; padding: 20px;
  display: flex; flex-direction: column; scroll-snap-align: start;
}
.rp-countries-cards__h { font-size: 32px; line-height: 40px; font-weight: 700; color: #08080D; margin: 0 0 16px; }
.rp-countries-cards__sub { font-size: 16px; line-height: 24px; color: #2A2A2A; margin: 0; }
.rp-countries-cards__cta {
  margin-top: auto; display: flex; align-items: center; justify-content: center;
  height: 56px; background: #114EF7; color: #fff; font-weight: 700; font-size: 14px; line-height: 22px;
  text-transform: capitalize; border-radius: 4px; text-decoration: none;
}
.rp-countries-cards__cta:hover { background: #0d3fd0; color: #fff; }
/* Photo cards (full-bleed cover image + bottom gradient + flag/name label). */
.rp-countries-cards__card {
  position: relative; flex: 0 0 auto; height: 400px; border-radius: 16px; overflow: hidden;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  text-decoration: none; scroll-snap-align: start; display: block;
}
.rp-countries-cards__card--w316 { width: 316px; }
.rp-countries-cards__card--w266 { width: 266px; }
.rp-countries-cards__card::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(transparent 50%, rgba(0,0,0,.7));
}
.rp-countries-cards__label {
  position: absolute; left: 16px; bottom: 16px; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  color: #fff; font-weight: 700; font-size: 24px; line-height: 1.2;
}
.rp-countries-cards__label .flag { font-size: 24px; line-height: 1; }
@media (max-width: 991px) {
  .rp-countries-cards__sec { padding: 56px 20px; }
  .rp-countries-cards__heading { flex-basis: 300px; width: 300px; min-height: 360px; }
  .rp-countries-cards__h { font-size: 26px; line-height: 34px; }
  .rp-countries-cards__card { height: 360px; }
}
/* RTL: the flex row reverses so the heading card leads from the right; label anchors to the
   start (right). The native scroll direction flips automatically under dir=rtl. */
[dir="rtl"] .rp-countries-cards__row { flex-direction: row-reverse; }
[dir="rtl"] .rp-countries-cards__label { left: auto; right: 16px; }