/* ============================================================================
   module-actions.css — the action row at the foot of every module card
   ----------------------------------------------------------------------------
   Replaces the old treatment, which gave a full-width primary button to
   "Visualize this module" and demoted Foundations and the Student Edition to
   small text links underneath. That inverted the emphasis: the Student Edition
   is the actual content of the module, and Foundations is where a scholar goes
   when they are not ready for it yet. The visualization is a way in, not the
   thing being learned.

   Core destinations share one explicit row:

       [ Foundations ] [ Student Edition ] [ Lesson Slides ]
       [                    Module Hub & Visuals                    ]

   Resource-rich Algebra I and Geometry cards expose both student slide PDFs and
   student resources directly. Teacher-only files remain in Admin. Courses
   without those catalogs show only destinations that actually exist.

   Token-driven only. Course accent arrives via the .course-* wrapper, so this
   file never names a colour.
   ============================================================================ */

.module-actions {
  margin-top: auto;              /* pin to the bottom of the card */
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;    /* stacked by default — narrow screens first */
}

/* Course hubs place each .module-card inside a CSS grid. KaTeX and long TEKS
   strings otherwise contribute a wide min-content size, so the grid item can
   silently extend beyond a phone viewport while global overflow clips it. */
.module-card { min-width: 0; }
.module-card .katex-display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.module-card .module-action { min-width: 0; }

/* Two- and three-up only once there is room. Below this the buttons stack, so
   a 320px screen never gets three 90px targets side by side. */
@media (min-width: 520px) {
  .module-actions { grid-template-columns: repeat(2, 1fr); }
  .module-actions--three { grid-template-columns: repeat(3, 1fr); }
  .module-actions--resource-rich .module-action--hub { grid-column: 1 / -1; }
}
@media (min-width: 760px) {
  .module-actions--resource-rich { grid-template-columns: repeat(3, 1fr); }
}

.module-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-height: 44px;              /* touch target floor */
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  transition: border-color .15s, background .15s, transform .15s;
}
.module-action:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  transform: translateY(-1px);
}
.module-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.module-action .ma-icon { font-size: 1.05rem; line-height: 1; }
.module-action .ma-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.module-action .ma-sub {
  font-size: 0.66rem;
  color: var(--muted);
  line-height: 1.2;
}

/* THREE VISIBLY DIFFERENT ACTIONS.

   The first version made all three the same outlined button with only the
   Student Edition tinted, and that was not enough separation — a reader
   scanning quickly still could not tell the three apart, which is exactly the
   failure the redesign was meant to fix. People do not read; they pattern-match.

   So each role now gets its own weight AND its own colour treatment:

     Foundations     ghost   — neutral border, muted label. Reads as "before".
     Student Edition SOLID   — filled accent, white label. Impossible to miss.
     Visualize       tinted  — accent wash, accent border and label.

   Hue is derived from the course accent rather than fixed, so Algebra I stays
   blue, Geometry green, Earth Systems Science amber. No new colour literals. */

.module-action--prep {
  background: var(--surface);
  border-color: var(--line-strong);
}
.module-action--prep .ma-label { color: var(--ink); }
.module-action--prep .ma-icon  { opacity: .85; }
.module-action--prep:hover {
  border-color: var(--ink);
  background: var(--recessed, var(--surface));
}

/* The module's actual content. Solid fill, because this is the one that was
   being missed entirely when it was a small text link. */
.module-action--primary {
  background: var(--accent);
  border-color: var(--accent);
}
.module-action--primary .ma-label { color: #fff; }
.module-action--primary .ma-sub   { color: rgba(255,255,255,.82); }
.module-action--primary:hover {
  background: var(--accent-bright, var(--accent));
  border-color: var(--accent-bright, var(--accent));
}

.module-action--explore {
  background: var(--accent-tint);
  border-color: var(--accent);
}

.module-action--slides {
  background: var(--surface);
  border-color: var(--accent);
}
.module-action--slides .ma-label { color: var(--accent); }

.module-action--hub {
  background: var(--accent-tint);
  border-color: var(--accent);
}
.module-action--hub .ma-label { color: var(--accent); }
.module-action--explore .ma-label { color: var(--accent); }
.module-action--explore:hover {
  background: var(--accent-tint);
  border-color: var(--accent-bright, var(--accent));
}

@media (prefers-reduced-motion: reduce) {
  .module-action { transition: none; }
  .module-action:hover { transform: none; }
}