/* What: the card grid and sidebar lists for the blog (/mba/blogs, /mba/category/..., /mba/author/..., blog posts) and the store (/mba/store, its categories, products).
   Why: Justin 11-03, "each card on the whole page should have a standardized image + key info + CTA, just like the mba cards on the homepage".
   The card is copied whole from /mba/marketplace (docs/marketplace/page.tpl.html, itself from forum/assets/css/btg-schools.css); the sidebar list from btg-tokens.css's UCP menu.
   When: linked by mba/assets/templates/blog-summary-list.tpl, blog-detail.tpl and store-*.tpl, with ?v= set to this file's mtime, so a deploy changes the URL. */
#btg-cards{padding:20px;border-radius:24px;background:linear-gradient(135deg,#e9edfd 0%,#f4eef8 55%,#fdf1e4 100%);container-type:inline-size;font-family:var(--btg-font)}
#btg-cards *{box-sizing:border-box}
#btg-cards .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#btg-cards .c3{grid-template-columns:repeat(3,minmax(0,1fr))}
#btg-cards article{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--btg-line);border-radius:18px;background:#fff;box-shadow:0 10px 26px rgba(32,48,91,.1);transition:transform 190ms ease,box-shadow 190ms ease}
#btg-cards article:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(36,55,107,.17)}
#btg-cards .ph{position:relative;display:block;aspect-ratio:8/5;overflow:hidden;background:#1a2036;text-decoration:none}
#btg-cards .ph img{display:block;width:100%;height:100%;max-width:none;margin:0;border:0;object-fit:cover;transition:transform 400ms ease}
#btg-cards article:hover .ph img{transform:scale(1.04)}
#btg-cards .lg{background:#fff}
#btg-cards .lg img{position:absolute;inset:0 0 80px;width:auto;height:auto;max-width:60%;max-height:40%;margin:auto;object-fit:contain;mix-blend-mode:multiply}
#btg-cards .dk{background:#1a2036}
#btg-cards .dk img{mix-blend-mode:normal}
#btg-cards .cap{position:absolute;inset:auto 0 0;padding:30px 14px 11px;background:linear-gradient(0deg,rgba(12,16,38,.94) 0%,rgba(12,16,38,.78) 58%,transparent 100%)}
#btg-cards :is(h1,h3){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0;font-size:18px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#fff}
#btg-cards .cap p{margin:2px 0 0;font-size:13px;font-weight:600;line-height:1.3;color:#fff}
#btg-cards .bd{flex:1;display:flex;flex-direction:column;padding:12px 14px}
#btg-cards .st{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px 10px;margin:0}
#btg-cards dd{margin:0;font-size:17px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#1e2640;font-variant-numeric:tabular-nums;white-space:nowrap}
#btg-cards dt{min-height:2.5em;margin:2px 0 0;font-size:12px;font-weight:500;line-height:1.25;color:#5f677d}
#btg-cards .dl{margin:8px 0 0;padding-top:9px;border-top:1px solid #e6e9f2;font-size:13px;line-height:1.45;color:#5f677d}
#btg-cards .dl b,#btg-cards .dl a{font-weight:800;color:#1e2640;white-space:nowrap}
#btg-cards .btns{display:grid;margin-top:auto;padding-top:11px}
#btg-cards .go{display:flex;align-items:center;justify-content:center;min-height:42px;padding:0 6px;border-radius:11px;background:linear-gradient(135deg,#5068c8,#3e56c0 58%,#3349a9);font-size:14px;font-weight:800;text-align:center;white-space:nowrap;color:#fff!important;text-decoration:none;transition:transform 180ms ease}
#btg-cards .go:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){#btg-cards article{animation:mk-rise linear backwards;animation-timeline:view();animation-range:entry 0% entry 70%}}}
@keyframes mk-rise{from{opacity:0;transform:translateY(26px)}}
@container (max-width:900px){#btg-cards .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container (max-width:480px){#btg-cards .grid{grid-template-columns:minmax(0,1fr)}}
/* blog: the token gradient panel with the post's topic sits under the post's own picture; a post with no usable picture shows the panel, and the strip drops the repeated topic */
#btg-cards .ph:is(.g1,.g2,.g3,.g4,.g5,.g6) img{position:absolute;inset:0}
#btg-cards .g1{background:var(--btg-g1)}#btg-cards .g2{background:var(--btg-g2)}#btg-cards .g3{background:var(--btg-g3)}#btg-cards .g4{background:var(--btg-g4)}#btg-cards .g5{background:var(--btg-g5)}#btg-cards .g6{background:var(--btg-g6)}
#btg-cards .tp{position:absolute;inset:0 0 80px;display:grid;place-items:center;padding:0 24px;font-size:25.6px;font-weight:800;line-height:1.12;letter-spacing:-.01em;text-align:center;color:#fff}
#btg-cards .ph:not(:has(img)) .cap p{display:none}
#btg-cards .desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:8px 0 0;font-size:13px;line-height:1.45;color:#5f677d}
/* store: company buttons are radios; store-summary.tpl writes one rule per company that hides the other companies' cards */
#btg-cards .filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
#btg-cards .filter input{position:absolute;opacity:0;pointer-events:none}
#btg-cards .filter label{margin:0;background:#fff}
#btg-cards .filter input:checked+label{border-color:transparent;background:var(--btg-btn-grad);color:#fff}
#btg-cards .filter input:focus-visible+label{outline:2px solid var(--btg-blue);outline-offset:2px}
#btg-cards .none{margin:0;font-size:16px;color:#39435a}
/* product page: one wide card, picture left */
#btg-cards.wide .grid{grid-template-columns:minmax(0,1fr)}
#btg-cards.wide article{flex-direction:row}
#btg-cards.wide .ph{flex:0 0 46%;aspect-ratio:auto;min-height:280px}
#btg-cards.wide .desc{display:block;font-size:14.72px}
#btg-cards.wide .desc :is(ul,p){margin:0 0 8px;padding-left:20px}
#btg-cards .mk-link{margin:11px 0 0;font-size:14.72px;font-weight:800;text-align:center;color:var(--btg-blue)!important;text-decoration:none!important}
#btg-cards .mk-link:hover{text-decoration:underline!important}
@container (max-width:600px){#btg-cards.wide article{flex-direction:column}#btg-cards.wide .ph{flex:none;aspect-ratio:8/5;min-height:0}}
.btg-pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:24px 0;font-size:14px;color:var(--btg-muted)}
.btg-more{margin:32px 0 12px;font-size:25.6px}
#btg-cards .btg-more{margin:0 0 12px}#btg-cards .grid+.btg-more{margin-top:24px}
/* sidebar lists, copied from the UCP side menu (.col-sm-3 .link-list.mb48) */
.sidebar .btg-side{margin:0;padding:0;list-style:none}
.sidebar .btg-side li{margin:0;padding:0;background:none;text-indent:0}
.sidebar .btg-side li::before,.sidebar .btg-side a::before{display:none}
.sidebar .btg-side a{display:flex;justify-content:space-between;gap:8px;padding:12px 18px;border-top:1px solid var(--btg-line);color:#3e4658;font-size:14px;font-weight:600;font-style:normal;background:none}
.sidebar .btg-side li:first-child a{border-top:0}
.sidebar .btg-side a:hover{background:#fafbfe;color:var(--btg-ink)}
.sidebar .btg-side a.on{background:#fafbfe;color:var(--btg-ink);font-weight:750;box-shadow:inset 3px 0 0 var(--btg-blue)}
.sidebar .btg-side .d2{padding-left:32px}
.sidebar .btg-side .d3{padding-left:48px;font-weight:500}
.sidebar .btg-side span{color:var(--btg-muted);font-weight:500}
.sidebar .btg-side li>:not(a){margin:0;padding:0 18px 12px}
/* a long text-only list (the blog Archive) folds into its dark gradient header: CLAUDE.md bans text-only blocks on a pale background (11-03) */
.sidebar .btg-fold>summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}
.sidebar .btg-fold>summary::-webkit-details-marker{display:none}
.sidebar .btg-fold>summary::after{content:"+";color:#fff;font-size:18px;font-weight:800;line-height:1}
.sidebar .btg-fold[open]>summary::after{content:"\2212"}
/* partner pages (mba/modules/BTG/templates/store_Partner_Exclusive.tpl): the dark hero copied from /mba/marketplace .mk-hero and .mk-btn,
   the company's own text as the questions accordion copied from btg-free.css #faq.ask (CLAUDE.md: text-only blocks go in a dark details/summary accordion) */
.btg-hero{margin:24px 0 32px;padding:56px;border-radius:22px;background:var(--btg-g2);color:#fff;font-family:var(--btg-font)}
.btg-hero .eye{margin:0 0 16px;font-size:11.52px;font-weight:800;line-height:1.65;letter-spacing:.14em;text-transform:uppercase;color:#b9c3f5}
.btg-hero h1{max-width:640px;margin:0;font-size:41.6px;font-weight:800;line-height:1.04;letter-spacing:-.015em;color:#fff}
.btg-hero .lead{max-width:580px;margin:24px 0 0;font-size:19.2px;line-height:1.6;color:#d7ddf6}
.btg-hero .chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
.btg-hero .chips li{margin:0;padding:5.12px 12px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.08);font-size:13.28px;color:#cdd5f5}
.btg-hero .chips li::before{display:none}
.btg-hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin:32px 0 0}
.btg-hero :is(.mk-btn,.mk-btn2){display:inline-flex;align-items:center;padding:13.6px 24px;border-radius:10px;font-size:14.72px;font-weight:800;line-height:1.65;text-decoration:none!important}
.btg-hero .mk-btn{background:#fff;color:#2f4296!important;box-shadow:0 6px 20px rgba(0,0,0,.22)}
.btg-hero .mk-btn2{border:1px solid rgba(255,255,255,.4);color:#fff!important}
.btg-ask{margin:32px 0 64px;padding:56px;border-radius:22px;background:var(--btg-g1);color:#fff;font-family:var(--btg-font)}
.btg-ask h2{margin:0 0 24px;font-size:36px;font-weight:800;line-height:1.1;letter-spacing:-.035em;color:#fff;text-transform:none}
.btg-ask .qa{border-top:1px solid rgba(255,255,255,.18)}.btg-ask details{border-bottom:1px solid rgba(255,255,255,.18)}
.btg-ask summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;list-style:none;cursor:pointer}.btg-ask summary::-webkit-details-marker{display:none}.btg-ask summary:focus-visible{outline:3px solid #fff;outline-offset:3px;border-radius:6px}
.btg-ask summary::after{content:"";flex:none;width:9px;height:9px;margin-right:4px;border-right:2.5px solid #b9c3f5;border-bottom:2.5px solid #b9c3f5;transform:rotate(45deg);transition:transform .2s ease}.btg-ask details[open] summary::after{transform:rotate(-135deg)}
.btg-ask h3{margin:0;font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.01em;color:#fff;text-transform:none}
.btg-ask details>div{max-width:72ch;padding:0 2px 20px;font-size:16px;line-height:1.6}.btg-ask details>div :is(p,li,span,h2,h5,div,strong,a){color:#d7ddf6}
@media (max-width:640px){.btg-hero,.btg-ask{padding:32px 24px}.btg-hero h1{font-size:36.8px}.btg-ask h3{font-size:17px}}