/* Open courses (templates/landing/_open_courses.html), on the home page and the Courses page: bigger cards, logo on top,
   a button at the bottom. Pointing at one floats out what it solves; on touch screens the list sits in the card. */
.open-courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 2.6rem 1.4rem; padding: 1.4rem 0; }
.oc { position: relative; }
.oc-card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; height: 100%; box-sizing: border-box; padding: 1.6rem 1.4rem 1.4rem;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 20px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.oc:hover .oc-card, .oc:focus-within .oc-card { border-color: var(--fg); box-shadow: 6px 6px 0 var(--fg); transform: translateY(-4px); }
.oc-logo { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 22px; background: var(--accent-soft); }
.oc-logo img { width: 64px; height: 64px; }
.oc h3 { margin: .3rem 0 0; font: 800 1.45rem/1.15 var(--display); }
.oc p { margin: 0 0 .5rem; color: var(--muted); font-size: .98rem; line-height: 1.55; flex: 1; }
.oc-solves { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.oc-solves li { position: absolute; padding: .35rem .75rem; border-radius: 999px; background: #fff; border: 2px solid var(--fg); font-size: .8rem; font-weight: 700; white-space: nowrap;
  box-shadow: 3px 3px 0 var(--fg); opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1); transition-delay: calc(var(--k) * 50ms); }
.oc-solves li:nth-child(1) { top: -16px; left: 10%; background: #fde68a; }
.oc-solves li:nth-child(2) { top: 20%; right: -56px; background: #bbf7d0; }
.oc-solves li:nth-child(3) { bottom: 30%; left: -56px; background: #ddd6fe; }
.oc-solves li:nth-child(4) { bottom: -16px; right: 8%; background: #fecdd3; }
.oc:hover .oc-solves li, .oc:focus-within .oc-solves li { opacity: 1; transform: scale(1) rotate(-2deg); }
@media (hover: none), (max-width: 640px) {   /* no hover, or no room around the card for the tags to float into */
  .oc:hover .oc-card, .oc:focus-within .oc-card { border-color: var(--line); box-shadow: none; transform: none; }
  .oc p { flex: 0 0 auto; }
  .oc-solves { position: static; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
  .oc-solves li { position: static; opacity: 1; transform: none; box-shadow: none; border-width: 1.5px; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) { .oc-card, .oc-solves li { transition: none; } }