/* =============================================================================
   教材「Web 制作はじめてガイド」への導線カード
   html.slim の #course-guide でのみ使用する。
   ========================================================================== */

.guide-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin-block-start: 2rem;
}

.guide-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid rgb(34 36 38 / 15%);
  border-radius: 0.28571429rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.guide-card:hover,
.guide-card:focus-visible {
  color: inherit;
  border-color: var(--primary, #2185d0);
  box-shadow: 0 6px 18px -8px rgb(34 36 38 / 35%);
  transform: translateY(-2px);
}

.guide-card__step {
  color: var(--gray, rgb(0 0 0 / 55%));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.guide-card__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
}

.guide-card__title i {
  color: var(--primary, #2185d0);
}

.guide-card__text {
  margin: 0;
  color: var(--gray-dark, rgb(0 0 0 / 68%));
  font-size: 0.95rem;
  line-height: 1.75;
}

.guide-card__meta {
  margin-block-start: auto;
  padding-block-start: 0.5rem;
  color: var(--gray, rgb(0 0 0 / 55%));
  font-size: 0.85rem;
}

/* 教材そのものへ入る大きなボタンの下に添える注記 */
.guide-note {
  margin-block-start: 0.75rem;
  color: var(--gray, rgb(0 0 0 / 55%));
  font-size: 0.9rem;
}