/* THE COURSE CARD, IN THE SOCIAL-POST DESIGN.
 *
 * Jason, 15 Oct 2026: "i love how we design our social media posts lately" —
 * so the catalogue stops having a look of its own and takes the one the
 * Instagram grid already has. This is `events/poster.py::hero_card` expressed
 * in CSS: the plum sky with a warm glow low and left, the artwork inside a
 * gold ring, a small grey kicker, the title in Orbitron with the orange-to-gold
 * gradient, the body in Space Grotesk, everything centred.
 *
 * ONE FILE, BOTH CATALOGUES. The signed-out page (v2/academy.html) and the
 * member page (academy/home.html) include this, so there is one design and not
 * two. Pillow still renders the shareable card; this is the web twin of it.
 *
 * The colours are poster.py's own: PLUM (13,10,20), ORANGE #f6923e,
 * GOLD #f5d061, INK #f4f2f7, DIM #b5aec4.
 */

.sc {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #f4f2f7;
  background:
    radial-gradient(120% 90% at 12% 108%, rgba(246, 146, 62, .30) 0%, rgba(246, 146, 62, 0) 55%),
    radial-gradient(100% 80% at 88% -8%, rgba(126, 92, 214, .34) 0%, rgba(126, 92, 214, 0) 60%),
    linear-gradient(170deg, #161127 0%, #0d0a14 62%, #0b0811 100%);
  border: 1px solid rgba(245, 208, 97, .14);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* the stars: two tiled layers so they do not form a visible grid */
.sc::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(1.4px 1.4px at 22px 18px, rgba(255, 255, 255, .85) 50%, transparent 51%),
    radial-gradient(1px 1px at 96px 64px, rgba(255, 255, 255, .55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 148px 26px, rgba(255, 255, 255, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 58px 122px, rgba(255, 255, 255, .5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 186px 148px, rgba(255, 255, 255, .8) 50%, transparent 51%);
  background-size: 210px 180px, 170px 150px, 230px 200px, 190px 170px, 250px 210px;
}
.sc > * { position: relative; }
.sc:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 208, 97, .42);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
}

/* ── the artwork, inside the gold ring ─────────────────────────────────── */
.sc-art {
  margin: 18px 18px 0;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
  border: 2px solid rgba(245, 208, 97, .78);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .40);
  position: relative;
}
.sc-art { height: 132px; }
.sc-art svg, .sc-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sc-lvl {
  position: absolute; left: 9px; top: 9px;
  font-family: var(--fd, monospace);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(11, 8, 17, .82); color: #f4f2f7;
  padding: 3px 8px; border-radius: 999px;
}
.sc-note {            /* the one on the right: enrolled, rating, staff only */
  position: absolute; right: 9px; top: 9px;
  font-family: var(--fd, monospace);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(11, 8, 17, .82); color: #f5d061;
  padding: 3px 8px; border-radius: 999px;
}

/* ── the words ─────────────────────────────────────────────────────────── */
.sc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.sc-kicker {
  font-family: var(--fd, monospace);
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #b5aec4; margin: 0 0 7px;
}
.sc-title {
  font-family: var(--fh, sans-serif);
  font-weight: 800; font-size: 19px; line-height: 1.18; margin: 0 0 9px;
  background: linear-gradient(180deg, #f6923e 0%, #f5d061 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.sc-sum {
  font-size: 13.5px; line-height: 1.5; color: #d6d1e0;
  margin: 0 0 12px; flex: 1;
}
.sc-partner { font-size: 12px; color: #b5aec4; margin: 0 0 8px; }
.sc-facts {
  font-family: var(--fd, monospace);
  font-size: 11.5px; letter-spacing: .04em; color: #b5aec4;
  margin: 0 0 14px;
}
.sc-go {
  font-family: var(--fd, monospace);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #f6923e; text-decoration: none; font-weight: 700;
  align-self: center;
}
.sc-go:hover { color: #f5d061; }

/* a whole card that is a link should not look like one */
a.sc, a.sc:hover { text-decoration: none; }

@media (max-width: 600px) {
  .sc-art { height: 158px; }
  .sc-title { font-size: 20px; }
}