/* =============================================================
   MYA777 — route component layer
   Extends assets/css/mya777-design-system.css with the components the
   published route bodies use on top of the core system:
     .mk-hero__copy .mk-figure .mk-figure-note .mk-media-inline
     .mk-accordion .mk-faq__item  (+ a 3-or-4-up .mk-poster)
   Loaded after the design system so these rules win on ties.
   ============================================================= */

/* ---- hero text column ---- */
.mk-hero__copy{ min-width:0; }
.mk-hero__copy > :last-child{ margin-bottom:0; }

/* ---- figure with caption (used on the money guides) ---- */
.mk-route figure.mk-figure{
  margin:0 0 22px; padding:0;
  border:1px solid var(--mk-border); border-radius:var(--mk-radius-card);
  background:var(--mk-surface); box-shadow:var(--mk-shadow-sm); overflow:hidden;
}
.mk-figure img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover; border-radius:0; box-shadow:none; border:none;
}
.mk-figure figcaption{
  font-size:14px; line-height:1.7; color:var(--mk-muted);
  padding:14px 18px; border-top:1px solid var(--mk-border); background:var(--mk-bg-alt);
}

/* ---- trust / source mark with an honesty note beside it ---- */
.mk-figure-note{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--mk-surface); border:1px solid var(--mk-border);
  border-radius:var(--mk-radius-card); padding:20px; box-shadow:var(--mk-shadow-sm);
}
.mk-figure-note img{ height:44px; width:auto; object-fit:contain; flex:0 0 auto; opacity:0.9; }
.mk-figure-note > p{ flex:1 1 260px; margin:0; font-size:14px; }
.mk-figure-note .mk-illustrative-note{ margin-bottom:0; background:transparent; padding:0; }

/* ---- inline supporting image inside prose ---- */
.mk-media-inline{ margin:26px 0; }
.mk-media-inline img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--mk-radius-card); box-shadow:var(--mk-shadow-md);
  border:1px solid var(--mk-border);
}

/* ---- native details/summary accordion (troubleshooting blocks) ---- */
.mk-accordion{
  border:1px solid var(--mk-border); border-radius:var(--mk-radius-card);
  background:var(--mk-surface); box-shadow:var(--mk-shadow-sm);
  overflow:hidden; margin-bottom:16px;
}
.mk-accordion details{ border-bottom:1px solid var(--mk-border); }
.mk-accordion details:last-child{ border-bottom:none; }
.mk-accordion summary{
  list-style:none; cursor:pointer; padding:18px 20px;
  font-weight:700; font-size:16px; color:var(--mk-ink);
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.mk-accordion summary::-webkit-details-marker{ display:none; }
.mk-accordion summary::after{ content:"+"; font-size:22px; color:var(--mk-coral-deep); flex:0 0 auto; }
.mk-accordion details[open] > summary::after{ content:"\2212"; }
.mk-accordion summary:hover{ background:var(--mk-bg-alt); }
.mk-accordion details > p{ padding:0 20px 18px; margin:0; font-size:15px; }

/* ---- FAQ item wrapper: some route bodies wrap each Q/A in .mk-faq__item ---- */
.mk-faq__item{ margin-bottom:12px; }
.mk-faq__item:last-child{ margin-bottom:0; }

/* ---- data poster: behave at 3 stats as well as 4 ---- */
.mk-poster{ grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); }
.mk-poster__stat{ border-right:1px solid rgba(255,255,255,0.14); }
.mk-poster__stat:last-child{ border-right:none; }
@media (max-width:520px){
  .mk-poster{ grid-template-columns:1fr; }
  .mk-poster__stat{ border-right:none; border-bottom:1px solid rgba(255,255,255,0.14); padding-bottom:14px; }
  .mk-poster__stat:last-child{ border-bottom:none; padding-bottom:0; }
}

/* ---- long tables scroll instead of breaking the layout on mobile ---- */
@media (max-width:700px){
  .mk-route .mk-table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .mk-route .mk-table th, .mk-route .mk-table td{ white-space:nowrap; }
}