/* ==========================================================================
   Components — filter tabs, course cards, category cards, carousel
   ========================================================================== */

/* filter tabs */
.tabs{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-bottom:2.6rem}
.tab{font-family:"Raleway",sans-serif;font-weight:500;font-size:1rem;padding:.68rem 1.35rem;border-radius:8px;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;transition:all .2s ease}
.tab:hover{border-color:var(--brand);color:var(--brand)}
.tab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.tab:focus-visible{outline:3px solid var(--brand-2);outline-offset:2px}

/* course cards */
.courses{display:flex;flex-wrap:wrap;justify-content:center;gap:2.4rem 1.7rem}
.ccard{flex:1 1 250px;max-width:300px;min-width:0}
.ccard{background:#fff;border-radius:12px;box-shadow:var(--sh);display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s ease}
.ccard.hide{display:none}
.ccard:hover{transform:translateY(-7px);box-shadow:var(--sh-2)}
.ccard.hide{display:none}
.chead{position:relative;height:174px;border-radius:12px 12px 0 0;display:grid;place-items:center;padding:1.1rem}
.chead img{max-height:128px;width:auto;height:auto}
.chead .lvl{position:absolute;top:12px;right:12px;background:#fff;border-radius:8px;padding:.22rem .6rem;
  font-family:"Raleway",sans-serif;font-weight:700;font-size:.78rem;color:var(--brand);box-shadow:0 4px 14px rgba(67,56,202,.12)}
.chead.k1{background:#E3DFFC}.chead.k2{background:#FFE3CE}.chead.k3{background:#DCE9FF}
.chead.k4{background:#D3F3EA}.chead.k5{background:#FFE0E6}.chead.k6{background:#FFF3CF}
.cpill{position:absolute;left:14px;bottom:-16px;background:#fff;border-radius:999px;padding:.4rem .95rem;box-shadow:var(--sh);
  font-family:"Raleway",sans-serif;font-weight:600;font-size:.8rem;color:var(--brand);white-space:nowrap;z-index:2}
.cbody{padding:2rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.cbody .dt{font-size:.82rem;color:var(--gray)}
.cbody h4{font-family:"Raleway",sans-serif;font-weight:700;font-size:1.06rem;color:var(--brand);line-height:1.35}
.cbody .ds{font-size:.87rem;color:var(--gray);line-height:1.55}
.cfoot{margin-top:auto;padding-top:1.1rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.cfoot .fee{font-family:"Raleway",sans-serif;font-weight:700;font-size:1rem;color:var(--brand-2)}

/* categories */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.6rem}
.cat{text-align:center;padding:2.4rem 1.5rem;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:.6rem;
  background:transparent;transition:background .25s ease,box-shadow .25s ease,transform .25s ease}
.cat:hover,.cat.lift{background:#fff;box-shadow:var(--sh);transform:translateY(-4px)}
.cat .ic{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;margin-bottom:.5rem}
.cat .ic svg,.cat .ic img{width:32px;height:32px}
.cat.a .ic{background:#D9EAFB;color:#2B7FC4}
.cat.b .ic{background:#FFE3CC;color:#D4681A}
.cat.c .ic{background:#FFF0C7;color:#C9930C}
.cat.d .ic{background:#E3DEFB;color:#4338CA}
.cat p{font-size:1rem;color:var(--gray);max-width:24ch}
.cat .btn{margin-top:.9rem}
.viewall{display:flex;justify-content:center;margin-top:2.4rem}

/* bundles carousel */
.rail{display:flex;gap:1.6rem;overflow-x:auto;overscroll-behavior-x:contain;padding:.6rem .4rem 1.6rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:var(--mint);border-radius:8px}
.bcard{flex:0 0 min(660px,86%);scroll-snap-align:center;display:grid;grid-template-columns:280px minmax(0,1fr);background:#fff;border-radius:14px;box-shadow:var(--sh)}
@media (max-width:640px){.bcard{grid-template-columns:minmax(0,1fr)}.bimg{border-radius:14px 14px 0 0;min-height:170px}}
.bimg{position:relative;display:grid;place-items:center;min-height:240px;border-radius:14px 0 0 14px;padding:1.4rem}
.bimg img{max-height:180px;width:auto;height:auto}
.bimg .tagp{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:999px;padding:.5rem 1.1rem;box-shadow:var(--sh);
  font-family:"Raleway",sans-serif;font-weight:700;color:var(--brand-2);font-size:.95rem;white-space:nowrap}

.bbody{padding:1.6rem 1.7rem;display:flex;flex-direction:column;gap:.6rem}
.bbody .dt{font-size:.85rem;color:var(--gray)}
.bbody h4{font-family:"Raleway",sans-serif;font-weight:700;font-size:1.3rem;color:var(--brand);line-height:1.32}
.bbody .ds{font-size:.93rem;color:var(--gray)}
.bbody .who{margin-top:auto;padding-top:1rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.bbody .who .p{background:var(--mint-2);color:var(--brand);border-radius:999px;padding:.35rem .85rem;font-size:.8rem;font-weight:600}