/* ==========================================================================
   MIRDXB PRO — Knowledge Hub index + category archives
   ========================================================================== */

.mdx-h{--ind:#080047;--mag:#E40D75;--mag-dk:#B70B6A;--teal:#06D7BB;--ink:#353B45;--grey:#63727F;--grey6:#869CAF;--canvas:#F2F6FB;--cool:#ECF3F7;--line:#CDDBE6;--sep:#A7BBCE}
.mdx-h *{box-sizing:border-box}
.mdx-h .mdx-wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- hub hero ---------- */
.mdx-hhero{background:#fff;padding:64px 0 40px;border-bottom:1px solid var(--line)}
.mdx-hhero .lbl{font:700 11px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mag);margin:0 0 18px}
.mdx-hhero h1{font:700 clamp(32px,5vw,54px)/1.1 Inter,sans-serif;letter-spacing:-.04em;color:var(--ind);margin:0 0 20px;max-width:16em}
.mdx-hhero .dek{font:400 clamp(17px,2.1vw,20px)/1.6 Inter,sans-serif;color:var(--grey);margin:0;max-width:60ch}

/* ---------- category pills ---------- */
.mdx-pills{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.mdx-pills .mdx-wrap{padding-top:0;padding-bottom:0}
.mdx-pills .scroller{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mdx-pills .scroller::-webkit-scrollbar{display:none}
.mdx-pills a{flex:0 0 auto;font:600 13px/1 Inter,sans-serif;color:var(--grey);text-decoration:none;padding:19px 16px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .18s,border-color .18s}
.mdx-pills a:hover{color:var(--ind)}
.mdx-pills a.on{color:var(--mag);border-bottom-color:var(--mag)}

/* ---------- featured ---------- */
.mdx-feat{background:#fff;padding:52px 0 0}
.mdx-feat a.fc{display:grid;grid-template-columns:1.15fr 1fr;gap:0;border:1px solid var(--line);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.mdx-feat a.fc:hover{border-color:var(--sep);box-shadow:0 16px 44px rgba(8,0,71,.10)}
.mdx-feat .th{background:var(--cool);overflow:hidden;min-height:320px;position:relative}
.mdx-feat .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.mdx-feat a.fc:hover .th img{transform:scale(1.03)}
.mdx-feat .cb{padding:44px 46px;display:flex;flex-direction:column;justify-content:center}
.mdx-feat .tag{display:inline-block;font:700 10px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--mag);padding:7px 10px;margin-bottom:18px;align-self:flex-start}
.mdx-feat .cat{font:700 10px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mag);margin:0 0 12px}
.mdx-feat h2{font:700 clamp(22px,2.9vw,30px)/1.25 Inter,sans-serif;letter-spacing:-.03em;color:var(--ind);margin:0 0 14px}
.mdx-feat p{font:400 16px/1.65 Inter,sans-serif;color:var(--grey);margin:0 0 22px}
.mdx-feat .mt{font:700 11px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--grey6)}

/* ---------- grid ---------- */
.mdx-list{background:#fff;padding:52px 0 80px}
.mdx-list .hd{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.mdx-list h2{font:700 clamp(20px,2.4vw,26px)/1.25 Inter,sans-serif;letter-spacing:-.03em;color:var(--ind);margin:0}
.mdx-list .ct{font:500 13px/1 Inter,sans-serif;color:var(--grey6)}
.mdx-g{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.mdx-g .mdx-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.mdx-g .mdx-card:hover{border-color:var(--sep);box-shadow:0 12px 34px rgba(8,0,71,.09);transform:translateY(-2px)}
.mdx-g .th{aspect-ratio:16/9;background:var(--cool);overflow:hidden}
.mdx-g .th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.mdx-g .mdx-card:hover .th img{transform:scale(1.03)}
.mdx-g .cb{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.mdx-g .cat{font:700 10px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mag);margin:0 0 11px}
.mdx-g h3{font:700 17px/1.4 Inter,sans-serif;letter-spacing:-.02em;color:var(--ind);margin:0 0 10px}
.mdx-g p{font:400 14px/1.6 Inter,sans-serif;color:var(--grey);margin:0 0 16px;flex:1}
.mdx-g .rd{font:700 11px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--grey6)}

/* empty state */
.mdx-empty{border:1px dashed var(--line);background:var(--canvas);padding:56px 32px;text-align:center}
.mdx-empty h3{font:700 20px/1.3 Inter,sans-serif;letter-spacing:-.02em;color:var(--ind);margin:0 0 10px}
.mdx-empty p{font:400 15px/1.6 Inter,sans-serif;color:var(--grey);margin:0 auto;max-width:44ch}

/* ---------- pagination ---------- */
.mdx-pag{display:flex;gap:6px;margin-top:44px;flex-wrap:wrap}
.mdx-pag a,.mdx-pag span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);font:600 14px/1 Inter,sans-serif;color:var(--ink);text-decoration:none;transition:all .18s}
.mdx-pag a:hover{border-color:var(--ind);color:var(--ind)}
.mdx-pag .current{background:var(--ind);border-color:var(--ind);color:#fff}

/* ---------- topic tiles (hub only) ---------- */
.mdx-topics{background:var(--canvas);padding:64px 0;border-top:1px solid var(--line)}
.mdx-topics h2{font:700 clamp(22px,2.8vw,28px)/1.25 Inter,sans-serif;letter-spacing:-.03em;color:var(--ind);margin:0 0 8px}
.mdx-topics .sub{font:400 16px/1.6 Inter,sans-serif;color:var(--grey);margin:0 0 32px;max-width:60ch}
.mdx-tg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mdx-tile{background:#fff;border:1px solid var(--line);padding:24px 22px;text-decoration:none;display:flex;flex-direction:column;transition:border-color .2s,box-shadow .2s,transform .2s}
.mdx-tile:hover{border-color:var(--mag);box-shadow:0 10px 28px rgba(8,0,71,.08);transform:translateY(-2px)}
.mdx-tile h3{font:700 15px/1.35 Inter,sans-serif;letter-spacing:-.02em;color:var(--ind);margin:0 0 8px}
.mdx-tile p{font:400 13px/1.6 Inter,sans-serif;color:var(--grey);margin:0 0 14px;flex:1}
.mdx-tile .n{font:700 10px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mag)}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .mdx-g{grid-template-columns:repeat(2,1fr);gap:22px}
  .mdx-tg{grid-template-columns:repeat(2,1fr)}
  .mdx-feat .cb{padding:32px 30px}
  .mdx-feat .th{min-height:260px}
}
@media(max-width:768px){
  .mdx-feat a.fc{grid-template-columns:minmax(0,1fr)}
  .mdx-feat .th{min-height:0;aspect-ratio:16/9}
}
@media(max-width:640px){
  .mdx-h .mdx-wrap{padding:0 18px}
  .mdx-hhero{padding:38px 0 26px}
  .mdx-hhero h1{letter-spacing:-.03em}
  .mdx-pills a{padding:15px 12px;font-size:12.5px}
  .mdx-feat{padding-top:32px}
  .mdx-feat .cb{padding:26px 22px}
  .mdx-list{padding:34px 0 56px}
  .mdx-g{grid-template-columns:minmax(0,1fr)}
  .mdx-tg{grid-template-columns:minmax(0,1fr)}
  .mdx-topics{padding:44px 0}
}

/* The featured thumb column was stretching to the text column's height, so
   object-fit:cover cropped the sides off the card art. Lock it to the cover's
   own 16:9 and centre it instead - featured cover must not crop. */
.mdx-feat a.fc{align-items:center}
.mdx-feat .th{min-height:0;aspect-ratio:16/9;align-self:center}
@media(max-width:900px){.mdx-feat .th{aspect-ratio:16/9;min-height:0}}