.guide-card-link,
.related-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.guide-card-link:hover,
.related-card-link:hover {
  text-decoration: none;
}

.guide-card,
.content-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(
    135deg,
    color-mix(in oklch, var(--sp-color-primary) 8%, transparent) 0%,
    color-mix(in oklch, var(--sp-color-primary) 4%, transparent) 50%,
    color-mix(in oklch, var(--sp-color-primary) 2%, transparent) 100%
  );
  border: 1px solid var(--sp-color-border);
  border-radius: var(--sp-corners-lg);
  border-top-right-radius: var(--sp-radius-xs);
  overflow: hidden;
  transition: box-shadow var(--sp-duration-normal) var(--sp-ease-out), transform var(--sp-duration-normal) var(--sp-ease-out), border-color var(--sp-duration-normal) var(--sp-ease-out);
}

.guide-card:hover,
.content-card:hover {
  border-color: color-mix(in oklch, var(--sp-color-primary) 50%, transparent);
  transform: translateY(calc(var(--sp-space-1) * -1));
  box-shadow: var(--sp-shadow-lg);
}

.guide-card-link:hover .guide-card,
.related-card-link:hover .related-card {
  border-color: color-mix(in oklch, var(--sp-color-primary) 50%, transparent);
  transform: translateY(calc(var(--sp-space-1) * -1));
  box-shadow: var(--sp-shadow-lg);
}

.guide-card:hover .card-image img,
.content-card:hover .card-image img {
  transform: scale(1.05);
}

.guide-card-link:hover .card-image img,
.related-card-link:hover .card-image img {
  transform: scale(1.05);
}

.guide-card h2,
.content-card h2 {
  font-family: var(--sp-font-heading);
  font-size: var(--sp-text-xl);
  margin: 0 0 var(--sp-space-2);
  line-height: 1.3;
  color: var(--sp-color-text-primary);
  text-transform: uppercase;
}

.guide-card-link:hover .card-title,
.related-card-link:hover .card-title {
  color: var(--sp-color-primary);
}

.guide-card p,
.content-card p {
  color: var(--sp-color-text-secondary);
  margin-bottom: var(--sp-space-4);
  line-height: 1.6;
  flex-grow: 1;
}

.guide-card .card-content,
.content-card .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-space-4);
}

.meta {
  display: flex;
  align-items: center;
  gap: var(--sp-space-2);
  font-size: var(--sp-text-sm);
  color: var(--sp-color-text-disabled);
  padding-top: var(--sp-space-4);
  border-top: 1px solid var(--sp-color-border);
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-space-4);
}

.card-content h4 {
  margin: 0 0 var(--sp-space-2);
}

.card-title {
  font-family: var(--sp-font-heading);
  font-size: var(--sp-text-md);
  line-height: 1.35;
  color: var(--sp-color-text-primary);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--sp-duration-fast) var(--sp-ease-default);
  text-transform: uppercase;
}

.card-title:hover {
  color: var(--sp-color-primary);
}

.card-excerpt {
  font-size: var(--sp-text-sm);
  line-height: 1.6;
  color: var(--sp-color-text-secondary);
  margin-bottom: var(--sp-space-4);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-space-4);
  font-size: var(--sp-text-xs);
  color: var(--sp-color-text-disabled);
  padding-top: var(--sp-space-2);
  border-top: 1px solid var(--sp-color-border);
}

@media (prefers-reduced-motion: reduce) {
  .guide-card.guide-card,
  .content-card.content-card {
    transition: none;
  }

  .guide-card.guide-card:hover,
  .content-card.content-card:hover {
    transform: none;
  }

  .guide-card-link:hover .guide-card.guide-card,
  .related-card-link:hover .related-card.related-card {
    transform: none;
  }

  .guide-card:hover .card-image.card-image img,
  .content-card:hover .card-image.card-image img {
    transform: none;
  }

  .guide-card-link:hover .card-image.card-image img,
  .related-card-link:hover .card-image.card-image img {
    transform: none;
  }

  .card-title.card-title {
    transition: none;
  }
}