/* qma-archive: blog index, topic hubs, search (and certificates in Phase 2).
   Ported from archive-redesign-2026-10/mockups/mockup.css (mockup scaffolding removed), every rule scoped to main.qma-arc
   so it cannot touch the Elementor header/footer. Breakpoints 1024 px and 640 px as in the mockup. */
.qma-arc{--navy:#1F266C;--navy-2:#0B1953;--red:#B6246E;--red-soft:#FBF4F7;--sky:#47C2F9;--gold:#FFBF36;--ink:#1E1E1E;--text:#5C6576;--line:#E6E8EF;--bg:#fff;--tint:#F6F7FB}
.qma-arc,.qma-arc *,.qma-arc *::before,.qma-arc *::after{box-sizing:border-box}
.qma-arc{display:block;margin:0;font-family:Figtree,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
.qma-arc a{color:inherit}
.qma-arc .wrap{max-width:1200px;margin:0 auto;padding:24px 24px 64px}
.qma-arc .crumbs{font-size:14px;color:var(--text);margin:0 0 20px}
.qma-arc .crumbs a{color:var(--navy);text-decoration:none}
.qma-arc .hero{max-width:760px;margin-bottom:24px}
.qma-arc .hero h1{font-size:clamp(30px,4.2vw,46px);line-height:1.1;letter-spacing:-.02em;color:var(--navy);margin:0 0 12px;font-weight:800}
.qma-arc .lede{font-size:18px;color:var(--text);margin:0;text-wrap:pretty}
.qma-arc .chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 36px}
.qma-arc .chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;color:var(--navy);background:#fff}
.qma-arc .chip span{font-weight:500;color:var(--text);font-size:13px}
@media (hover:hover){.qma-arc .chip:hover{border-color:var(--navy)}}
.qma-arc .chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff}.qma-arc .chip.is-on span{color:#c9cdf0}
.qma-arc .sec{font-size:24px;color:var(--navy);margin:48px 0 20px;letter-spacing:-.01em}
.qma-arc .sec .n{font-size:15px;color:var(--text);font-weight:500;margin-left:6px}
/* lead area */
.qma-arc .lead{display:grid;grid-template-columns:1.7fr 1fr;gap:32px;align-items:start}
.qma-arc .lead__main{list-style:none;margin:0;padding:0}
.qma-arc .lead__side{background:var(--tint);border-radius:16px;padding:24px}
.qma-arc .side__h{font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin:0 0 12px}
.qma-arc .picks{margin:0;padding:0;list-style:none;counter-reset:p}
.qma-arc .picks li{counter-increment:p;padding:14px 0 14px 40px;position:relative;border-top:1px solid var(--line)}
.qma-arc .picks li:first-child{border-top:0}
.qma-arc .picks li::before{content:counter(p);position:absolute;left:0;top:14px;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--navy);font-weight:800;display:grid;place-items:center;font-size:14px}
.qma-arc .picks a{font-weight:700;color:var(--navy);text-decoration:none;line-height:1.35;display:block}
@media (hover:hover){.qma-arc .picks a:hover{text-decoration:underline}}
.qma-arc .picks span{font-size:13px;color:var(--text)}
/* cards */
.qma-arc .grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.qma-arc .grid--2{grid-template-columns:repeat(2,1fr)}
.qma-arc .card{position:relative;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);transition:box-shadow .2s,transform .2s}
@media (hover:hover){.qma-arc .card:hover{box-shadow:0 10px 30px rgba(31,38,108,.12);transform:translateY(-2px)}}
.qma-arc .card:focus-within{outline:3px solid var(--navy);outline-offset:2px}
.qma-arc .card__img{order:-1;width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--tint)}
.qma-arc .card__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.qma-arc .card__cat{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-bottom:6px}
.qma-arc .card__title{font-size:19px;line-height:1.3;margin:0 0 8px;color:var(--navy);text-wrap:balance}
.qma-arc .card__title a{text-decoration:none}
.qma-arc .card__title a::after{content:"";position:absolute;inset:0}
.qma-arc .card__title a:focus{outline:none}
.qma-arc .card__ex{margin:0 0 14px;color:var(--text);font-size:15px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qma-arc .card__meta{margin:auto 0 0;font-size:13px;color:var(--text)}
.qma-arc .card--big .card__title{font-size:28px;letter-spacing:-.01em}
.qma-arc .card--big .card__ex{-webkit-line-clamp:3;font-size:16px}
/* topic tiles */
.qma-arc .tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.qma-arc .tile{position:relative;padding:20px;border-radius:14px;background:var(--tint);border-top:4px solid var(--navy)}
.qma-arc .tile:nth-child(2n){border-top-color:var(--red)}
.qma-arc .tile h3{margin:0 0 6px;font-size:18px;color:var(--navy)}
.qma-arc .tile h3 a{text-decoration:none}.qma-arc .tile h3 a::after{content:"";position:absolute;inset:0}
@media (hover:hover){.qma-arc .tile:hover{background:#eef0f8}}
.qma-arc .tile p{margin:0 0 10px;font-size:14px;color:var(--text)}
.qma-arc .tile span{font-size:13px;font-weight:600;color:var(--red)}
/* CTA */
.qma-arc .cta,.qma-arc .course{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:36px 0;padding:28px 32px;border-radius:16px;background:var(--red-soft);border:1px solid #f1d9e6}
.qma-arc .course{background:var(--navy);color:#fff;border:0;margin-top:56px}
.qma-arc .cta__k{margin:0 0 4px;font-weight:800;font-size:20px;color:var(--navy)}
.qma-arc .course .cta__k{color:#fff}
.qma-arc .cta__t{margin:0;color:var(--text);max-width:560px}
.qma-arc .course .cta__t{color:#c9cdf0}
.qma-arc .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:50px;background:var(--red);color:#fff;font-weight:700;text-decoration:none;white-space:nowrap}
.qma-arc .btn:hover{background:#9c1d5d}
.qma-arc .btn--ghost{background:transparent;border:2px solid #fff}
.qma-arc .btn--ghost:hover{background:rgba(255,255,255,.1)}
.qma-arc .course__btns{display:flex;gap:12px;flex-wrap:wrap}
/* pager */
.qma-arc .pager{display:flex;gap:8px;justify-content:center;margin-top:40px}
.qma-arc .pager a,.qma-arc .pager span{min-width:44px;height:44px;display:grid;place-items:center;padding:0 14px;border-radius:10px;border:1px solid var(--line);text-decoration:none;font-weight:700;color:var(--navy)}
.qma-arc .pager .is-on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* certificates */
.qma-arc .stats{list-style:none;margin:0 0 28px;padding:0;display:flex;gap:32px;flex-wrap:wrap;color:var(--text)}
.qma-arc .stats b{display:block;font-size:30px;color:var(--navy)}
.qma-arc .certs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.qma-arc .fine{font-size:13px;color:var(--text);text-align:center}
/* responsive */
@media (max-width:1024px){.qma-arc .grid,.qma-arc .certs{grid-template-columns:repeat(2,1fr)}.qma-arc .tiles{grid-template-columns:repeat(2,1fr)}.qma-arc .lead{grid-template-columns:1fr}}
@media (max-width:640px){
 .qma-arc .wrap{padding:16px 16px 48px}
 .qma-arc .grid,.qma-arc .grid--2,.qma-arc .certs{grid-template-columns:1fr;gap:20px}
 .qma-arc .tiles{grid-template-columns:1fr 1fr;gap:10px}.qma-arc .tile{padding:14px}.qma-arc .tile p{display:none}
 .qma-arc .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 28px;padding:0 16px 4px;scrollbar-width:none}
 .qma-arc .chip{flex:none}
 .qma-arc .grid .card{flex-direction:row;align-items:flex-start;border-radius:12px}
 .qma-arc .grid .card__img{width:104px;height:104px;flex:none;aspect-ratio:1;margin:14px 0 14px 14px;border-radius:10px}
 .qma-arc .grid .card__body{padding:14px 14px 14px 12px}
 .qma-arc .grid .card__title{font-size:16px;margin-bottom:6px}
 .qma-arc .grid .card__ex{display:none}
 .qma-arc .grid .card__cat{font-size:11px;margin-bottom:4px}
 .qma-arc .grid .card__meta{font-size:12px}
 .qma-arc .grid{gap:12px}
 .qma-arc .card--big .card__title{font-size:22px}
 .qma-arc .cta,.qma-arc .course{flex-direction:column;align-items:flex-start;padding:22px}
 .qma-arc .lede{font-size:16px}
 .qma-arc .sec{font-size:21px;margin-top:36px}
}

/* WordPress additions (not in the mockup) */
.qma-arc .card__img{height:auto}
.qma-arc .card picture{display:block;order:-1;flex:none} /* ShortPixel wraps the img in <picture>: the picture is the flex item (a real box, so WP Rocket's LCP beacon can measure it) */
.qma-arc .crumbs{display:block}
.qma-arc .crumbs a{display:inline-block;padding:12px 8px;margin:-12px -8px}
.qma-arc .chip,.qma-arc .tile h3 a,.qma-arc .picks a,.qma-arc .card__title a,.qma-arc .pager a,.qma-arc .btn{text-decoration:none}
.qma-arc .btn,.qma-arc .btn:hover,.qma-arc .btn:focus{color:#fff}
.qma-arc .chip.is-on,.qma-arc .chip.is-on:hover{color:#fff}
.qma-arc :focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.qma-arc .course :focus-visible{outline-color:#fff}
.qma-arc .tile:focus-within{outline:3px solid var(--navy);outline-offset:2px}
.qma-arc .tile h3 a:focus-visible{outline:none}
.qma-arc .card__title a:focus-visible{outline:none}
.qma-arc .search{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:20px;max-width:560px}
.qma-arc .search__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qma-arc .search__i{flex:1 1 220px;min-height:48px;padding:0 14px;border:1px solid #9aa1b4;border-radius:10px;font:inherit;font-size:16px;color:var(--ink);background:#fff}
.qma-arc .search .btn{border:0;cursor:pointer;font:inherit;font-weight:700}
.qma-arc .empty{margin-bottom:8px}
/* Site review round 1 polish */
.qma-arc .cta__t{text-wrap:pretty}
.qma-arc .cta__k{text-wrap:balance}
.qma-arc .nw{white-space:nowrap}
.qma-arc .search .btn{background:var(--navy);border-radius:10px}
.qma-arc .search .btn:hover{background:#0B1953}
@media (max-width:1024px){.qma-arc .course{flex-direction:column;align-items:flex-start}}
.qma-arc .picks a{min-height:44px}
@media (min-width:641px) and (max-width:1024px){.qma-arc .card--big .card__img{max-height:360px}}
@media (max-width:640px){.qma-arc .course__btns{flex-direction:column;align-self:stretch}.qma-arc .course .btn{white-space:normal;text-align:center;padding:12px 22px;line-height:1.3}}
/* Phase 2: Student Achievements */
.qma-arc .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qma-arc .pager{flex-wrap:wrap}
.qma-arc .fine{margin:28px auto 0;max-width:640px;text-wrap:pretty}
.qma-arc .fine a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
/* phones: two stats side by side */
@media (max-width:640px){
 .qma-arc .stats{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.qma-arc .stats b{font-size:26px}
}
/* Certificate cards v2 (2026-10-26): the certificate image as a preview, linked to its single page */
.qma-arc .cert{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;transition:box-shadow .2s,transform .2s}
@media (hover:hover){.qma-arc .cert:hover{box-shadow:0 10px 28px rgba(22,35,107,.12);transform:translateY(-2px)}}
.qma-arc .cert:has(a:focus-visible){outline:3px solid var(--navy);outline-offset:2px}
.qma-arc .cert__img{aspect-ratio:1697/1200;background:#f4f5fa;border-bottom:1px solid var(--line)}
.qma-arc .cert__img picture{display:block;height:100%}
.qma-arc .cert__img img{display:block;width:100%;height:100%;object-fit:cover}
.qma-arc .cert__body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.qma-arc .cert__course{align-self:flex-start;margin:0 0 10px;padding:4px 10px;border-radius:50px;background:#fff3d6;color:var(--navy);font-size:12px;font-weight:700;line-height:1.4}
.qma-arc .cert__t{margin:0 0 8px;font-size:17px;line-height:1.35;color:var(--navy);text-wrap:balance}
.qma-arc .cert__t a{color:inherit;text-decoration:none}
.qma-arc .cert__t a::after{content:"";position:absolute;inset:0}
.qma-arc .cert__t a:focus-visible{outline:none}
.qma-arc .cert__who{margin:0 0 14px;color:var(--text);font-size:14px}
.qma-arc .cert__more{margin-top:auto;color:var(--red);font-size:14px;font-weight:700}
.qma-arc .cert__more::after{content:" \2192"}
@media (hover:hover){.qma-arc .cert:hover .cert__more{text-decoration:underline;text-underline-offset:3px}}
@media (max-width:640px){.qma-arc .certs{gap:16px}.qma-arc .cert__body{padding:14px 16px 16px}.qma-arc .cert__t{font-size:16px}}
@media (prefers-reduced-motion:reduce){.qma-arc .cert{transition:none}.qma-arc .cert:hover{transform:none}}
/* Student-name search on /certificate/ (2026-10-26) */
.qma-arc .search--cert{margin:0 0 24px}
.qma-arc .cert-found{margin:-8px 0 24px;color:var(--text)}
.qma-arc .cert-found a{margin-left:8px;color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:10px 0}
.qma-arc .certs:empty{display:none}