/* ============================================================
   Mutual Funds page — supplementary styles
   Extends the existing EVA Finance design system (style.css).
   Only adds components that don't already exist on the homepage:
   persona cards, comparison tables, and the FAQ accordion.
   Reuses the same tokens, radii, shadows and easing as style.css.
   ============================================================ */

/* ---------- Utility classes (replace inline styles) ---------- */
.eyebrow-center{justify-content:center;}
.heading-tight{font-size:36px;margin-bottom:34px;}
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---------- Risk badge (shared by comparison tables) ---------- */
.risk-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Manrope', sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.04em;
  padding:5px 12px;
  border-radius:100px;
  white-space:nowrap;
}
.risk-badge.risk-low{background:rgba(11,93,75,0.08);color:var(--primary);}
.risk-badge.risk-moderate{background:rgba(173,138,84,0.14);color:var(--gold);}
.risk-badge.risk-high{background:rgba(22,58,95,0.09);color:var(--navy);}

/* ---------- Persona cards (Who Should Invest) ---------- */
.persona-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.persona-card{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px 32px;
  transition:all .35s var(--ease);
}
.persona-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:transparent;
}
.persona-icon{
  width:50px;height:50px;
  border-radius:13px;
  background:rgba(11,93,75,0.08);
  color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
  flex-shrink:0;
}
.persona-card h4{
  font-size:19px;
  margin-bottom:10px;
}
.persona-desc{
  font-size:14.5px;
  color:var(--muted);
  margin-bottom:24px;
  line-height:1.65;
}
.persona-meta{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom:26px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.persona-meta-row dt{
  font-family:'Manrope', sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:5px;
}
.persona-meta-row dd{
  font-size:13.5px;
  color:var(--text);
  line-height:1.55;
}
.persona-cta{
  margin-top:auto;
  font-family:'Manrope', sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:var(--navy);
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color .25s;
}
.persona-card:hover .persona-cta{color:var(--primary);}

/* ---------- Comparison tables (Fund Types + Direct vs EVA) ---------- */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}
.compare-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  background:var(--card);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.compare-table caption{caption-side:top;}
.compare-table thead th{
  background:var(--navy);
  color:#fff;
  font-family:'Manrope', sans-serif;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  text-align:left;
  padding:18px 22px;
}
.compare-table tbody th,
.compare-table tbody td{
  padding:20px 22px;
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--text);
  text-align:left;
  vertical-align:top;
}
.compare-table tbody th{
  font-family:'Manrope', sans-serif;
  font-weight:700;
  color:var(--navy);
  white-space:nowrap;
}
.compare-table tbody td{color:var(--muted);}
.compare-table tbody tr{transition:background .25s;}
.compare-table tbody tr:hover{background:#FBFBF9;}

/* Direct vs EVA specific styling */
.direct-vs-eva-table .highlight-col{
  background:rgba(11,93,75,0.045);
}
.direct-vs-eva-table thead th.highlight-col{
  background:var(--primary);
}
.cmp{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;height:20px;
  border-radius:50%;
  font-size:12px;
  font-weight:700;
  margin-right:10px;
  flex-shrink:0;
}
.cmp-yes{background:rgba(11,93,75,0.12);color:var(--primary);}
.cmp-no{background:rgba(22,58,95,0.07);color:var(--muted);}

/* ---------- FAQ accordion ---------- */
.faq-list{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.faq-item{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 26px;
  text-align:left;
  font-family:'Manrope', sans-serif;
  font-size:16px;
  font-weight:600;
  color:var(--navy);
  background:transparent;
}
.faq-question .plus{
  flex-shrink:0;
  width:26px;height:26px;
  border-radius:50%;
  border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  transition:all .3s var(--ease);
}
.faq-question .plus::before,
.faq-question .plus::after{
  content:"";
  position:absolute;
  background:var(--navy);
  transition:transform .3s var(--ease);
}
.faq-question .plus::before{width:10px;height:1.5px;}
.faq-question .plus::after{width:1.5px;height:10px;}
.faq-item[data-open="true"] .plus{border-color:var(--primary);background:var(--primary);}
.faq-item[data-open="true"] .plus::before,
.faq-item[data-open="true"] .plus::after{background:#fff;}
.faq-item[data-open="true"] .plus::after{transform:rotate(90deg) scaleY(0);}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s var(--ease);
}
.faq-answer-inner{
  padding:0 26px 24px;
  font-size:14.5px;
  color:var(--muted);
  line-height:1.7;
}

/* ============================================================
   Visual placeholder system (Phase 4)
   Reusable classes for future imagery/illustrations. Every area
   is a real, sized box today (never a broken-image state) that
   can later be swapped for a real <img> without touching layout.
   ============================================================ */

/* Base frame — shared shape language: radius, border, shadow */
.mf-visual{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.mf-visual img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}

/* Aspect ratio modifiers */
.mf-visual--16x9{aspect-ratio:16/9;}
.mf-visual--wide{aspect-ratio:21/9;}
.mf-visual--square{aspect-ratio:1/1;}
.mf-visual--portrait{aspect-ratio:3/4;}

/* Personas visual holds a real 3:2 photograph — override the shared
   21:9 wide-banner ratio so the couple isn't cropped. Scoped to this
   instance only; the placeholder infographic sections keep 21:9. */
.mf-visual--wide.mf-personas-visual{aspect-ratio:3/2;}

/* .mf-image-frame — same shape language, used once a real image is dropped in */
.mf-image-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
}
.mf-image-frame img{width:100%;height:100%;object-fit:cover;display:block;}

/* .visual-placeholder — the "not yet an image" state.
   Soft brand-tinted gradient + centered icon + label so it reads
   as intentional design, not a missing asset. */
.visual-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  padding:28px;
  background:linear-gradient(135deg, rgba(11,93,75,0.07), rgba(22,58,95,0.05));
}
.visual-placeholder::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(to right, var(--gold), var(--primary));
}
.visual-placeholder-icon{
  width:46px;height:46px;
  border-radius:50%;
  background:rgba(255,255,255,0.75);
  border:1px solid rgba(22,58,95,0.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--navy);
  flex-shrink:0;
}
.visual-placeholder-label{
  font-family:'Manrope',sans-serif;
  font-size:12.5px;
  font-weight:600;
  color:var(--navy);
  max-width:280px;
  line-height:1.55;
}
.visual-placeholder-tag{
  position:absolute;
  top:14px;right:14px;
  font-family:'Manrope',sans-serif;
  font-size:9.5px;
  font-weight:700;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:var(--navy);
  background:rgba(255,255,255,0.85);
  padding:5px 10px;
  border-radius:100px;
  border:1px solid rgba(22,58,95,0.1);
}

/* .mf-illustration-placeholder — lighter-weight variant for smaller,
   icon-scale illustration areas (e.g. resource cards) */
.mf-illustration-placeholder{
  background:rgba(11,93,75,0.045);
  border:1px dashed rgba(22,58,95,0.18);
}
.mf-illustration-placeholder .visual-placeholder-icon{
  width:38px;height:38px;
}

/* Dark variant — used inside the navy hero frame */
.mf-visual--dark.visual-placeholder{
  background:linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)), var(--navy);
  color:#fff;
}
.mf-visual--dark .visual-placeholder-icon{
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.25);
  color:#fff;
}
.mf-visual--dark .visual-placeholder-label{color:rgba(255,255,255,0.88);}
.mf-visual--dark .visual-placeholder-tag{
  background:rgba(255,255,255,0.16);
  color:#fff;
  border-color:rgba(255,255,255,0.28);
}

/* Section-level placement helpers */
.mf-section-visual{margin-top:40px;}
.mf-section-visual--top{margin-top:0;margin-bottom:40px;}

/* Hero visual fills the existing .frame exactly like the image did */
.hero-visual .frame .mf-visual{
  width:100%;height:100%;
  border-radius:0;
  border:none;
  box-shadow:none;
}

/* Direct-vs-EVA: table + small supporting visual side by side */
.mf-advisory-row{
  display:grid;
  grid-template-columns:1fr 260px;
  gap:28px;
  align-items:start;
}
.mf-advisory-table{min-width:0;}
.mf-advisory-row .table-scroll{margin:0;}
.mf-advisory-visual{min-height:220px;max-width:100%;}

/* Persona meta — compact chip row instead of stacked full-width rows */
.persona-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:24px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.persona-meta-row{
  flex:1 1 128px;
  background:rgba(11,93,75,0.045);
  border-radius:10px;
  padding:10px 12px;
}
.persona-meta-row dt{margin-bottom:3px;}
.persona-meta-row dd{font-size:12.5px;line-height:1.4;}

/* Resource cards (Related Resources) — small visual above the copy */
.mf-resource-visual{margin-bottom:22px;}

/* Why Choose EVA — badge the existing numbers for clearer hierarchy
   (scoped to this page only; homepage's #why is untouched) */
#why-choose-eva .why-item .num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  border-radius:50%;
  border:1.5px solid rgba(173,138,84,0.35);
  background:rgba(173,138,84,0.08);
  font-size:12px;
  padding-top:0;
}

/* CTA — small decorative accent, deliberately restrained */
.mf-cta-visual{
  position:absolute;
  top:24px;right:28px;
  width:104px;height:104px;
  border-radius:50%;
  padding:0;
}
.mf-cta-visual .visual-placeholder-icon{width:36px;height:36px;}
.mf-cta-visual .visual-placeholder-label{display:none;}
.mf-cta-visual::before{display:none;}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .persona-grid{grid-template-columns:repeat(2,1fr);}
  .mf-advisory-row{grid-template-columns:1fr;}
  .mf-advisory-visual{aspect-ratio:3/2;min-height:0;}
}
@media (max-width:720px){
  .persona-grid{grid-template-columns:1fr;}
  .persona-card{padding:30px 26px;}
  .faq-question{padding:18px 20px;font-size:14.5px;}
  .faq-answer-inner{padding:0 20px 20px;}
  .compare-table thead th,
  .compare-table tbody th,
  .compare-table tbody td{padding:14px 16px;font-size:13px;}
  .mf-section-visual{margin-top:28px;}
  .mf-section-visual--top{margin-bottom:28px;}
  .visual-placeholder{padding:20px;}
  .mf-cta-visual{display:none;}
}

/* ---------- Table scroll affordance (Phase 6) ---------- */
.table-scroll{
  position:relative;
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.table-scroll.scrolled-end{
  -webkit-mask-image:none;
  mask-image:none;
}
.table-scroll-hint{
  display:none;
  align-items:center;
  gap:6px;
  font-family:'Manrope',sans-serif;
  font-size:11.5px;
  font-weight:600;
  color:var(--muted);
  margin-top:10px;
}
@media (max-width:900px){
  .table-scroll-hint{display:inline-flex;}
}