/* =====================================================================
   ScholarHat home - master classes (Views/Home/_MasterClasses.cshtml)
   Page-background band (no fill of its own). Copy + trust stats on the left; the next master class
   (live countdown) and the two after it on the right, or a calm "being scheduled" card when none are listed.
   Same accent and surfaces as the other redesigned sections: the ScholarHat logo's cyan to blue.
   ===================================================================== */
.mc {
    --mc-ink: #0f1b2d;
    --mc-body: #46566b;
    --mc-muted: #6b7c91;
    --mc-line: rgba(20, 90, 140, .16);
    --mc-card: rgba(255, 255, 255, .72);
    --mc-a: #0891b2;
    --mc-b: #2563eb;
    --mc-a-ink: #0b6f8c;
    --mc-soft: rgba(8, 145, 178, .10);
    --mc-on-a: #ffffff;
    --mc-hi: rgba(255, 255, 255, .95);
    --mc-glow: 8, 145, 178;
    --mc-lift: 0 1px 0 var(--mc-hi) inset, 0 2px 4px rgba(15, 60, 100, .08), 0 22px 36px -26px rgba(15, 80, 130, .45);
    --mc-lift-hover: 0 1px 0 var(--mc-hi) inset, 0 4px 8px rgba(15, 60, 100, .08), 0 34px 48px -26px rgba(var(--mc-glow), .6);
    --mc-cta-bg: #0f1b2d; --mc-cta-fg: #ffffff;
    --mc-sk: rgba(20, 90, 140, .10); --mc-sk-hi: rgba(20, 90, 140, .20);
    position: relative;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--mc-body);
    padding: clamp(44px, 6vw, 80px) 0;
}
[data-bs-theme="dark"] .mc {
    --mc-ink: #eef7ff;
    --mc-body: #b4c6d9;
    --mc-muted: #7f95ab;
    --mc-line: rgba(110, 190, 230, .16);
    --mc-card: rgba(7, 24, 44, .62);
    --mc-a: #2fb8d6;
    --mc-b: #3b82f6;
    --mc-a-ink: #7fd6ec;
    --mc-soft: rgba(47, 184, 214, .12);
    --mc-on-a: #04233a;
    --mc-hi: rgba(255, 255, 255, .07);
    --mc-glow: 47, 184, 214;
    --mc-lift: 0 1px 0 var(--mc-hi) inset, 0 2px 4px rgba(0, 0, 0, .4), 0 22px 36px -26px rgba(0, 0, 0, .85);
    --mc-lift-hover: 0 1px 0 var(--mc-hi) inset, 0 4px 8px rgba(0, 0, 0, .4), 0 34px 48px -26px rgba(var(--mc-glow), .45);
    --mc-cta-bg: #eef7ff; --mc-cta-fg: #06223a;
    --mc-sk: rgba(130, 190, 235, .10); --mc-sk-hi: rgba(130, 190, 235, .22);
}
.mc *, .mc *::before, .mc *::after { box-sizing: border-box; }
.mc-shell { position: relative; width: min(1240px, 100% - 32px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 992px) { .mc-shell { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; } }
.mc i.bi { line-height: 1; }
.mc a:focus-visible { outline: 2px solid var(--mc-a); outline-offset: 3px; }

/* ---------- copy ---------- */
.mc-copy h2 { margin: 0 0 14px; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; color: var(--mc-ink); text-wrap: balance; }
.mc-copy h2 em { font-style: normal; background: linear-gradient(100deg, var(--mc-a), var(--mc-b) 80%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.mc-copy > p { margin: 0 0 26px; max-width: 30em; font-size: 1.0625rem; line-height: 1.6; color: var(--mc-body); }
.mc-trust { list-style: none; margin: 0 0 28px; padding: 20px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--mc-line); }
.mc-trust li { display: grid; align-content: start; gap: 3px; padding-right: 8px; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.mc-trust li:hover { transform: translateY(-3px); }
.mc-trust b { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.1; letter-spacing: -.02em; color: var(--mc-ink); }
.mc-trust li:first-child b { background: linear-gradient(100deg, var(--mc-a), var(--mc-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mc-trust small { font-size: .8125rem; line-height: 1.4; color: var(--mc-muted); }
.mc-btn { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 24px 0 7px; border-radius: 999px; background: var(--mc-cta-bg); color: var(--mc-cta-fg); font-size: 1rem; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 0 var(--mc-hi) inset, 0 12px 26px -14px rgba(15, 27, 45, .6); transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.mc-btn:hover { transform: translateY(-2px); color: var(--mc-cta-fg); box-shadow: 0 1px 0 var(--mc-hi) inset, 0 18px 32px -14px rgba(var(--mc-glow), .65); }
.mc-btn:active { transform: translateY(0) scale(.985); }
.mc-btn__ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--mc-a), var(--mc-b)); color: var(--mc-on-a); font-size: 1.05rem; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.mc-btn:hover .mc-btn__ic { transform: rotate(45deg); }

/* ---------- stage ---------- */
.mc-stage { display: grid; gap: 14px; min-width: 0; width: 100%; }
.mc-slides { display: grid; }
.mc-slides .mc-feature { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.992); transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .2, 1), visibility 0s .5s, box-shadow .3s, border-color .3s; }
.mc-slides .mc-feature.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mc-slides .mc-feature.on:hover { transform: translateY(-5px); }

/* date chips double as the progress indicator; arrows on the right */
.mc-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mc-dots { display: flex; gap: 8px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.mc-dots::-webkit-scrollbar { display: none; }
.mc-dot { position: relative; flex: none; height: 36px; padding: 0 14px; border: 1px solid var(--mc-line); border-radius: 999px; background: var(--mc-card); color: var(--mc-muted); font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; overflow: hidden; font-variant-numeric: tabular-nums; transition: color .2s, border-color .2s, background .2s, transform .15s; }
.mc-dot:hover { color: var(--mc-ink); border-color: color-mix(in srgb, var(--mc-a) 45%, var(--mc-line)); }
.mc-dot:active { transform: scale(.96); }
.mc-dot.on { color: var(--mc-ink); background: var(--mc-soft); border-color: color-mix(in srgb, var(--mc-a) 55%, var(--mc-line)); }
.mc-dot::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--mc-a), var(--mc-b)); transform: scaleX(0); transform-origin: left; }
.mc-dot.run::after { animation: mc-fill 5.5s linear forwards; }
.mc-stage.hold .mc-dot.run::after { animation-play-state: paused; }
@keyframes mc-fill { to { transform: scaleX(1); } }
.mc-arrows { display: flex; gap: 8px; flex: none; }
.mc-arrow { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--mc-line); border-radius: 50%; background: var(--mc-card); color: var(--mc-ink); cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.mc-arrow:hover { border-color: var(--mc-a); background: var(--mc-soft); }
.mc-arrow:active { transform: scale(.93); }
.mc-dot:focus-visible, .mc-arrow:focus-visible { outline: 2px solid var(--mc-a); outline-offset: 3px; }
.mc-feature {
    --mx: -200px; --my: -200px;
    display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 12px; text-decoration: none; color: inherit;
    border: 1px solid var(--mc-line); border-radius: 22px;
    background: radial-gradient(260px circle at var(--mx) var(--my), rgba(var(--mc-glow), .14), transparent 65%), var(--mc-card);
    box-shadow: var(--mc-lift); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s;
}
.mc-feature:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--mc-a) 50%, var(--mc-line)); box-shadow: var(--mc-lift-hover); color: inherit; }
.mc-feature:active { transform: translateY(-1px) scale(.995); }
/* Event banners are 1188x543 (396:181). Keep the frame fluid and preserve that ratio at every breakpoint. */
.mc-poster { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 396 / 181; border-radius: 16px; overflow: hidden; background: linear-gradient(150deg, rgba(var(--mc-glow), .22), rgba(37, 99, 235, .16)); }
.mc-poster img { display: block; width: 100%; height: 100%; min-width: 0; object-fit: cover; object-position: center; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.mc-feature:hover .mc-poster img { transform: scale(1.03); }
.mc-poster__ic { font-size: 3rem; color: var(--mc-a); opacity: .9; animation: mc-float 4s ease-in-out infinite; }
@keyframes mc-float { 50% { transform: translateY(-6px); } }
.mc-date { position: absolute; left: 12px; top: 12px; display: grid; justify-items: center; min-width: 48px; padding: 6px 8px; border-radius: 12px; background: var(--mc-cta-bg); color: var(--mc-cta-fg); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .6); }
.mc-date b { font-size: 1.1rem; letter-spacing: 0; }
.mc-info { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 0 8px 6px; }
.mc-next { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mc-a-ink); }
.mc-next i { width: 7px; height: 7px; border-radius: 50%; background: #ef5b6e; animation: mc-pulse 1.8s ease-out infinite; }
@keyframes mc-pulse { 0% { box-shadow: 0 0 0 0 rgba(239, 91, 110, .55); } 100% { box-shadow: 0 0 0 8px rgba(239, 91, 110, 0); } }
.mc-info h3 { margin: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 800; letter-spacing: -.02em; color: var(--mc-ink); }
.mc-by { display: inline-flex; align-items: center; gap: 7px; font-size: .875rem; color: var(--mc-muted); }
.mc-count { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border: 1px solid var(--mc-line); border-radius: 999px; background: var(--mc-soft); font-size: .8125rem; font-weight: 700; color: var(--mc-a-ink); font-variant-numeric: tabular-nums; }
.mc-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: .9375rem; font-weight: 700; color: var(--mc-a-ink); text-decoration: none; }
.mc-go i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mc-soft); transition: transform .3s cubic-bezier(.2, .7, .2, 1), background .2s; }
.mc-feature:hover .mc-go i, a.mc-go:hover i { transform: translateX(4px); background: linear-gradient(135deg, var(--mc-a), var(--mc-b)); color: var(--mc-on-a); }

/* ---------- nothing scheduled yet ---------- */
.mc-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 26px; border: 1px solid var(--mc-line); border-radius: 22px; background: var(--mc-card); box-shadow: var(--mc-lift); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mc-empty__ic { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: linear-gradient(135deg, var(--mc-a), var(--mc-b)); color: var(--mc-on-a); font-size: 1.4rem; box-shadow: 0 14px 24px -12px rgba(var(--mc-glow), .8); }
.mc-empty__ic::after { content: ""; position: absolute; inset: -6px; border-radius: 22px; border: 1.5px solid rgba(var(--mc-glow), .5); animation: mc-ping 2s ease-out infinite; }
@keyframes mc-ping { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.mc-empty h3 { margin: 6px 0 0; font-size: 1.25rem; line-height: 1.3; font-weight: 800; letter-spacing: -.02em; color: var(--mc-ink); }
.mc-empty p { margin: 0; max-width: 32em; font-size: .9375rem; line-height: 1.55; color: var(--mc-body); }
.mc-skel { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.mc-skel li { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--mc-line); border-radius: 14px; }
.mc-skel .sk { display: block; height: 9px; width: 70%; border-radius: 9px; background: linear-gradient(100deg, var(--mc-sk) 30%, var(--mc-sk-hi) 50%, var(--mc-sk) 70%) 0 0 / 220% 100%; animation: mc-shimmer 1.8s ease-in-out infinite; }
.mc-skel .sk--b { width: 40%; }
@keyframes mc-shimmer { from { background-position: 110% 0; } to { background-position: -110% 0; } }

/* ---------- reveal ---------- */
.js-in:not(.in) .mc-copy > *, .js-in:not(.in) .mc-stage > * { opacity: 0; transform: translateY(18px); }
.js-in.in .mc-copy > *, .js-in.in .mc-stage > * { animation: mc-rise .65s backwards cubic-bezier(.2, .7, .2, 1); }
.js-in.in .mc-copy > :nth-child(2) { animation-delay: .08s; } .js-in.in .mc-copy > :nth-child(3) { animation-delay: .16s; } .js-in.in .mc-copy > :nth-child(4) { animation-delay: .24s; }
.js-in.in .mc-stage > :nth-child(1) { animation-delay: .12s; } .js-in.in .mc-stage > :nth-child(2) { animation-delay: .24s; }
@keyframes mc-rise { from { opacity: 0; transform: translateY(18px); } }

@media (max-width: 575.98px) {
    .mc-trust { gap: 8px; }
    .mc-trust small { font-size: .75rem; }
    .mc-btn { height: 52px; }
    .mc-info h3 { font-size: 1.125rem; }
    .mc-empty { padding: 20px; }
    .mc-feature:hover, .mc-slides .mc-feature.on:hover { transform: none; }
    .mc-dot.on::after { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mc *, .mc *::before, .mc *::after { animation: none !important; transition: none !important; }
    .js-in:not(.in) .mc-copy > *, .js-in:not(.in) .mc-stage > * { opacity: 1; transform: none; }
    .mc-feature:hover, .mc-slides .mc-feature.on:hover { transform: none; }
    .mc-dot.on::after { transform: scaleX(1); }
}