/* Series landing page — module cards. Tokens and layout come from main.css. */

.moduulit {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.moduuli {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-rest);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 52px 1fr;
  column-gap: 20px;
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.moduuli:hover { box-shadow: var(--shadow-lift); border-color: var(--petrol); }

/* The number spans all three text rows of the card. */
.moduuli .num {
  grid-row: 1 / span 3;
  color: var(--wine);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
}

.moduuli h2 {
  font-size: clamp(20px, 3vw, 26px);
  line-height: 1.2;
  margin: 0;
}
.moduuli h2 a { color: var(--ink); text-decoration: none; }
.moduuli h2 a:hover { color: var(--wine); text-decoration: underline; }

.moduuli .teoria {
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-top: 8px;
}

.moduuli p {
  color: var(--slate);
  font-size: 17px;
  margin: 8px 0 0;
}

@media (max-width: 560px) {
  .moduuli { grid-template-columns: 1fr; padding: 20px; }
  .moduuli .num { grid-row: auto; font-size: 22px; line-height: 1; margin-bottom: 8px; }
  .moduuli p { font-size: 16px; }
}

/* The card index sits below the modules: same series, shorter form. */
.kortit-linkki {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--petrol);
  text-decoration: none;
}
.kortit-linkki:hover { text-decoration: underline; }