/* ==========================================================================
   Africa CPTA Theme — Front Page
   Only enqueued on is_front_page()
   Depends on: layout.css (section shells), Bootstrap 5
   ========================================================================== */

/* ------------------------------
   1) Hero (animated)
------------------------------- */
.fintech-hero {
  position: relative;
  padding: clamp(48px, 6vw, 96px) 0;
  color: #fff;
}
.fintech-hero .btn { font-weight: 700; }

/* Effect layer: blends admin images + translucent color wash + animated blobs.
   JS may place a <canvas> inside for waves; that canvas sits ABOVE these layers. */
.fintech-animated-bg{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* TOP ➝ BOTTOM (first = topmost) *
  background:


    /* admin images provided via CSS variables (set in PHP) */
    var(--hero-bg-after, none) center/cover no-repeat,
    var(--hero-bg, none) center/cover no-repeat;

  /* individual layer positions to enable subtle motion */
  background-position:
    0% 0%,         /* blob 1 */
    100% 0%,       /* blob 2 */
    50% 0%,        /* wash */
    center center, /* image after */
    center center; /* image base */

  background-size:
    auto, auto, auto, cover, cover;

  /* gentle parallax motion across the gradient layers */
  animation: heroParallax 40s linear infinite;
}

@keyframes heroParallax{
  0% {
    background-position: 0% 0%, 100% 0%, 50% 0%, center center, center center;
  }
  50%{
    background-position: 8% 4%, 92% 8%, 50% 12%, center center, center center;
  }
  100%{
    background-position: 0% 0%, 100% 0%, 50% 0%, center center, center center;
  }
}

/* Keep the canvas waves visible and above the backgrounds */
.fintech-animated-bg canvas.fintech-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;           /* above gradients & photos */
  pointer-events: none;
}

/* Foreground content is above the animated layer */
.fintech-bg-anim > *:not(.fintech-animated-bg) { position: relative; z-index: 2; }
.fintech-hero .container { position: relative; z-index: 2; }

/* Illustration */
.fintech-hero-image {
  display: block;
  max-width: 560px;
  width: 100%;
  margin-left: auto;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.25));
}

/* Floating icons */
.fintech-hero-float { position: absolute; color: #fff; opacity: .9; }
.fintech-float-1 { top: 12%; right: 28%; }
.fintech-float-2 { bottom: 18%; right: 8%; }
.fintech-float-3 { top: 22%; right: 4%; }

@media (prefers-reduced-motion: no-preference) {
  .fintech-hero-float { animation: bob 4.5s ease-in-out infinite; }
  .fintech-float-2 { animation-duration: 5.5s; }
  .fintech-float-3 { animation-duration: 6s; }
}
@keyframes bob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* ------------------------------
   2) Featured Articles
------------------------------- */
.featured-articles-section { --card-radius: 14px; }
.featured-articles-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 576px) { .featured-articles-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .featured-articles-grid { grid-template-columns: repeat(4, 1fr); } }

.fintech-featured-card {
  background: #fff;
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: var(--shadow-1, 0 2px 4px rgba(0,0,0,.05));
  transition: transform .2s ease, box-shadow .2s ease;
}
.fintech-featured-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2, 0 6px 18px rgba(0,0,0,.08)); }
.fintech-featured-card img { width: 100%; height: auto; display: block; }
.fintech-featured-card .card-body { padding: 14px 16px 16px; }
.fintech-featured-card .badge { background: var(--color-muted,#f5f7f9); color: var(--color-text,#222); }

/* Clamp title to 2 lines */
.fintech-featured-card .card-title {
  font-size: 1.05rem; line-height: 1.25; margin: .25rem 0 .35rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ------------------------------
   3) Profiles (Countries + Actors)
------------------------------- */
.profiles-section { padding: 64px 0; }
.profiles-section .section-title { color: var(--color-text, #eaeff4); margin-bottom: 10px; }
.profiles-section .section-intro {
  color: var(--color-text-dim, #aab9c8);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Stack one on top of the other on all breakpoints */
.profiles-row {
  display: grid;
  grid-template-columns: 1fr !important; /* force vertical stack */
  gap: 32px;
}

.profiles-col { display: flex; flex-direction: column; gap: 16px; }
.profiles-col h3 {
  display: flex; align-items: center; gap: .6rem; margin: 0;
  color: var(--color-text, #eef3f7);
}
.profiles-col h3 .bi { color: var(--color-primary, #1e40af); }

.profiles-actions { margin-top: 12px; }
.profiles-actions .section-cta { min-width: 220px; }

/* Countries: uniform, centered chips */
.countries-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* equal width */
  gap: 16px;
  align-items: stretch;
  justify-items: stretch;
  margin-top: 6px;
}
.countries-grid-container a,
.countries-grid-container button,
.countries-grid-container .country-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  font-weight: 700;
  color: #111;
  text-align: center;
  height: 56px;                /* fixed height for uniform rows */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.countries-grid-container img { width: 22px; height: 16px; object-fit: cover; }

/* Actors: equal-height cards + larger logos */
.actor-profiles-carousel-container .swiper-slide { height: auto; }
.actor-profiles-carousel-container .fp-carousel-card,
.actor-profiles-carousel-container .card,
.actor-profiles-carousel-container .card-plain {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.actor-profiles-carousel-container .fp-carousel-card .thumb,
.actor-profiles-carousel-container .card .thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 12px;
}
.actor-profiles-carousel-container img {
  max-width: 80%;
  max-height: 60px;
  object-fit: contain;
}
.actor-profiles-carousel-container .body { flex: 1; display: flex; flex-direction: column; }

/* ------------------------------
   4) Shared card + swiper tweaks
------------------------------- */
.fp-carousel-card {
  background: #fff;
  border: 1px solid var(--color-border, rgba(0,0,0,.08));
  border-radius: 12px;
  overflow: hidden;
}
.fp-carousel-card .thumb { aspect-ratio: 3 / 2; background: #e9eef2; }
.fp-carousel-card .body { padding: 14px 16px; }
.fp-carousel-card .meta { font-size: .85rem; color: var(--color-text-dim,#5b6b79); }

/* Swiper pagination (dots) */
.swiper-pagination-bullet { opacity: .5; }
.swiper-pagination-bullet-active { opacity: 1; background: var(--color-primary,#1e40af); }

/* Swiper nav buttons */
.swiper-button-prev, .swiper-button-next {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow-1, 0 2px 4px rgba(0,0,0,.05));
}
.swiper-button-prev:after, .swiper-button-next:after { font-size: 18px; color: var(--color-text,#222); }

/* ------------------------------
   5) CTA buttons in sections
------------------------------- */
.section-cta { font-weight: 700; padding-inline: 1.25rem; }

/* ------------------------------
   6) Dark section adjustments
------------------------------- */
.dark-section .fintech-featured-card,
.dark-section .fp-carousel-card {
  background: var(--color-surface,#12171e);
  border-color: var(--color-border, rgba(255,255,255,.12));
}
.dark-section .fp-carousel-card .meta { color: var(--color-text-dim,#aab9c8); }

.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badges .badge { margin: 0; }
/* === Center the Countries grid and keep equal sizes === */
/* Switch to flex so the last row can center */
.countries-grid-container {
  display: flex !important;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;   /* <-- centers the last row */
  margin-top: 6px;
}

/* Uniform chip size; truncates very long names with … */
.countries-grid-container a,
.countries-grid-container button,
.countries-grid-container .country-chip {
  flex: 0 1 200px;           /* ~200px wide chip; all equal */
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  font-weight: 600;          /* slightly lighter than 700 for legibility */
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1400px) {
  .countries-grid-container a,
  .countries-grid-container button,
  .countries-grid-container .country-chip { flex-basis: 220px; } /* roomier on xl+ */
}
.countries-grid-container img { width: 22px; height: 16px; object-fit: cover; }

/* === Center the section CTAs === */
.profiles-section .profiles-actions {
  margin-top: 12px;
  display: flex;
  justify-content: center;   /* <-- centers buttons */
}

/* === Carousel clean-up: hide off-screen clones; center dots === */
.actor-profiles-carousel-container .swiper { overflow: hidden; } /* hide ghost slide */
.actor-profiles-carousel-container .swiper-pagination {
  position: static;          /* move below */
  margin-top: 12px;
  text-align: center;
}