/* ==========================================================================
   Africa CPTA Theme — Archives
   Grid, filters, hero banners, cards, pagination
   - Lean CSS with minimal duplication and clear sections
   - Works alongside Bootstrap 5 utilities
   ========================================================================== */

/* ------------------------------
   0) Design Tokens (overridable)
   ------------------------------ */
:root {
  --afc-surface: #fff;
  --afc-text: #222;
  --afc-text-dim: #5b6b79;
  --afc-border: rgba(0,0,0,.08);
  --afc-border-strong: rgba(0,0,0,.12);
  --afc-elev: 0 6px 18px rgba(0,0,0,.08);
  --afc-elev-lg: 0 10px 24px rgba(0,0,0,.09);
  --afc-card-radius: 12px;
  --afc-hero-grad-1: linear-gradient(180deg,#0b5ed7,#0a51bd 60%, #0b5ed7);
  --afc-hero-grad-2: linear-gradient(180deg,#0b1522,#0f1b2b 60%, #0b1522);
  --afc-hero-grad-3: linear-gradient(180deg,#0a3b4a,#0c4d61 60%, #0a3b4a);
  --afc-hero-grad-4: linear-gradient(180deg,#3a2c7a,#4c3aa3 60%, #3a2c7a);
}

/* Dark mode base tokens (optional, keep light touch) */
html.theme-dark {
  --afc-surface: #12171e;
  --afc-text: #e8eef5;
  --afc-text-dim: #aab9c8;
  --afc-border: rgba(255,255,255,.12);
  --afc-border-strong: rgba(255,255,255,.16);
  --afc-elev: 0 6px 18px rgba(0,0,0,.45);
  --afc-elev-lg: 0 10px 24px rgba(0,0,0,.55);
}

/* ------------------------------
   1) Archive header + Filters
   ------------------------------ */
.archive-header {
  padding: clamp(32px, 5vw, 64px) 0;
  background: var(--afc-surface);
  border-bottom: 1px solid var(--afc-border);
}
.archive-header .title { font-weight: 800; letter-spacing: -.01em; margin-bottom: .25rem; }
.archive-header .desc  { color: var(--afc-text-dim); }

.archive-filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 18px 0 8px;
}
.archive-filters .chip { cursor: pointer; }
.archive-filters .chip.active {
  background: var(--bs-primary, #007b5e);
  color: #fff;
}

/* ------------------------------
   2) Generic Grid & Card shell
   ------------------------------ */
.archive-grid {
  display: grid; gap: 24px; grid-template-columns: 1fr;
}
@media (min-width: 576px)  { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px)  { .archive-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .archive-grid { grid-template-columns: repeat(4, 1fr); } }

.archive-card {
  background: #fff;
  border: 1px solid var(--afc-border);
  border-radius: var(--afc-card-radius);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.archive-card:hover { transform: translateY(-2px); box-shadow: var(--afc-elev); }

.archive-card .thumb { aspect-ratio: 3 / 2; background: #e9eef2; }
.archive-card .body  { padding: 14px 16px; }
.archive-card .meta  { font-size: .9rem; color: var(--afc-text-dim); }

/* ------------------------------
   3) Pagination
   ------------------------------ */
.pagination .page-link {
  border-radius: 10px;
  border-color: var(--afc-border-strong);
  color: var(--afc-text);
}
.pagination .page-link:hover { color: var(--bs-primary); }
.pagination .page-item.active .page-link {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
}

/* WP core pagination fallback */
.navigation.pagination { gap: .5rem; }
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .75rem; border-radius: .5rem;
  border: 1px solid var(--afc-border);
}
.page-numbers.current { background: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }

/* ------------------------------
   4) Country Archive
   ------------------------------ */
.country-archive-hero {
  background: #211d69;
  position: relative;
  color: #fff;
}
.country-archive-hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 50% 10%, rgb(36 32 109 / 29%), rgb(26 48 253 / 40%) 60%);
  transparent 60%);
  pointer-events: none;
}
.country-archive-hero-title {
    color: white;
}
.country-archive-hero-desc {
    color: white;
}
.fintech-country-card { transition: transform .16s ease, box-shadow .16s ease; border-radius: var(--afc-card-radius); }
.fintech-country-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.10); }
.country-summary .ratio > img { object-fit: cover; }
.country-summary-excerpt { color: var(--afc-text-dim); }

/* ------------------------------
   5) Actor Archive (cards & media)
   ------------------------------ */
.actor-archive-hero { position: relative; color: #fff;background: #ffb703; }
.actor-archive-hero .fintech-animated-bg { opacity: .22; }

/* one definition only */
.fintech-actor-card {
  border-radius: 14px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  background: #fff;
  border: 1px solid var(--afc-border);
}
.fintech-actor-card:hover { transform: translateY(-2px); box-shadow: var(--afc-elev-lg); }
.fintech-actor-card .card-body { padding: .95rem 1rem 1rem; }

/* Media */
.actor-cover {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover; background: #e9eef2;
}
.actor-logo-box {
  background: linear-gradient(180deg, #f2f6fa, #e9eef5);
  border-bottom: 1px solid var(--afc-border);
  height: 180px; display: flex; align-items: center; justify-content: center;
}
.actor-logo { max-width: 70%; max-height: 70%; object-fit: contain; }
.actor-ph {
  height: 180px;
  background: linear-gradient(135deg, #e8eef5, #dfe7f0);
  border-bottom: 1px solid var(--afc-border);
  display: flex; align-items: center; justify-content: center;
}
.actor-ph-initials { font-weight: 800; font-size: 28px; color: #2a3540; letter-spacing: .02em; }

/* grid helper (if used without Bootstrap columns) */
.actor-archive-grid { display:grid; gap:24px; grid-template-columns: 1fr; }
@media (min-width:576px){ .actor-archive-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:992px){ .actor-archive-grid { grid-template-columns: repeat(3,1fr); } }
@media (min-width:1400px){ .actor-archive-grid { grid-template-columns: repeat(4,1fr); } }

/* "Read more" accent on hover */
.actor-readmore { border-radius: 10px; }
.fintech-actor-card:hover .actor-readmore { border-color: var(--bs-primary); }

/* ------------------------------
   6) Article Archive
   ------------------------------ */
.article-archive-header {
  background: var(--afc-hero-grad-1);
  color: #fff;
}
.article-archive-header .archive-filter-form .form-select { background: rgba(255,255,255,.95); }
.article-archive-header .btn-outline-light { border-color: rgba(255,255,255,.6); }

.fintech-article-card {
  transition: transform .18s ease, box-shadow .18s ease;
  border-radius: var(--afc-card-radius);
  border: 1px solid var(--afc-border);
  background: #fff;
}
.fintech-article-card:hover { transform: translateY(-2px); box-shadow: var(--afc-elev-lg); }
.fintech-article-card .card-img-top { object-fit: cover; aspect-ratio: 16/9; }

.article-report-archive .pagination .nav-links { gap: .25rem; }

/* ------------------------------
   7) News Archive
   ------------------------------ */
.news-archive-header {
  background: linear-gradient(180deg,#0f1b2b,#0b1522 60%, #0f1b2b);
  color: #fff;
}
.news-archive-header .news-archive-filter-form .form-select { background: rgba(255,255,255,.95); }

.news-card { border-radius: var(--afc-card-radius); }
.news-card-thumb { display: block; width: 100%; height: auto; object-fit: cover; aspect-ratio: 16/9; }
.news-card .badge { font-weight: 600; }

/* ------------------------------
   8) Dark Context blocks (scoped)
   ------------------------------ */
.dark-section .archive-card,
html.theme-dark .archive-card,
html.theme-dark .fintech-actor-card,
html.theme-dark .fintech-article-card,
html.theme-dark .news-card {
  background: var(--afc-surface);
  border-color: var(--afc-border);
  color: var(--afc-text);
}
.dark-section .archive-card .meta { color: var(--afc-text-dim); }
html.theme-dark .actor-logo-box,
html.theme-dark .actor-ph {
  background: #0f141a;
  border-color: var(--afc-border);
}
html.theme-dark .actor-ph-initials { color: #cfd8e3; }

/* ------------------------------
   9) A11y / Motion preferences
   ------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .archive-card,
  .fintech-actor-card,
  .fintech-article-card { transition: none; }
}

.actor-archive-hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 50% 10%, rgb(36 32 109 / 29%), rgb(26 48 253 / 40%) 60%);
  transparent 60%);
  pointer-events: none;
}
.article-archive-hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 50% 10%, rgb(36 32 109 / 29%), rgb(26 48 253 / 40%) 60%);
  transparent 60%);
  pointer-events: none;
}
.regulatory-archive-hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 50% 10%, rgb(36 32 109 / 29%), rgb(26 48 253 / 40%) 60%);
  transparent 60%);
  pointer-events: none;
}
.news-archive-hero-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 50% 10%, rgb(36 32 109 / 29%), rgb(26 48 253 / 40%) 60%);
  transparent 60%);
  pointer-events: none;
}
.actor-archive-hero-title {
    color: white;
}
.article-archive-hero-title {
    color: white;
}
.news-archive-hero-title {
    color: white;
}
.actor-archive-hero-desc {
    color: white;
}
.regulatory-archive-hero-title {
    color: white;
}
.regulatory-archive-hero-desc {
    color: white;
}
section.archive-filters-wrap.py-3 {
    background: #f9f9f9;
    /* --bs-btn-bg: var(--color-primary, #007b5e); */
    /* --bs-btn-border-color: var(--color-primary, #007b5e); */
    /* --bs-btn-hover-bg: var(--color-accent, #ffb703); */
    /* --bs-btn-hover-border-color: var(--color-accent, #ffb703); */
    /* color: #1e40af; */
    /* font-weight: 700; */
}