/* ===== FEATURE CARD COMPONENT ===== */
/* Reusable card with offset background "shadow" effect */

.feature-card {
  position: relative;
  max-width: 40rem;
}

.feature-card-content {
  position: relative;
  background: color-mix(in srgb, var(--accent-base) 10%, var(--background));
  border: var(--border-size) solid var(--border);
  border-radius: var(--border-radius);
  padding: 1rem;
  font-family: var(--font-heading);
  z-index: 5;
}

.feature-card-title {
  margin: 0 !important;
  margin-bottom: 0.6rem;
}

.feature-card-background {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--accent-base) 80%, var(--background)),
    color-mix(in srgb, var(--accent-base) 30%, var(--background))
  );
  border: var(--border-size) solid var(--border);
  border-radius: var(--border-radius);
}

.feature-card-text {
  margin-top: 0.5rem;
}

.feature-card-text p:last-of-type {
  margin-bottom: 0;
}

/* ===== FEATURE CARDS GRID (for blocks) ===== */
.feature-cards-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}