---
interface Props {
  index: string;
  title: string;
}
const { index, title } = Astro.props;
---
<article class="feature-card lift material">
  <header class="feature-head">
    <span class="feature-index">{index}</span>
    <h3 class="feature-title">{title}</h3>
  </header>
  <div class="feature-body">
    <slot />
  </div>
</article>
<style>
  .feature-card {
    position: relative;
    background: var(--material-medium);
    border: 1px solid var(--material-border);
    border-radius: var(--radius-l);
    padding: clamp(20px, 2.4vw, 26px);
    box-shadow: var(--shadow-2);

    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    will-change: transform;
  }

  .feature-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(
      to right,
      transparent,
      var(--material-edge),
      transparent
    );
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    pointer-events: none;
    opacity: 0.7;
  }
  .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3);
    border-color: var(--accent-dim);
  }
  .feature-card:active { transform: translateY(-1px) scale(0.997); }
  .feature-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
  }
  .feature-index {
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--accent);
    letter-spacing: 0.06em;
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-dim);
  }
  .feature-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--text);
  }
  .feature-body {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
  }
  .feature-body :global(p) { margin: 0 0 8px; }
  .feature-body :global(p:last-child) { margin-bottom: 0; }
  .feature-body :global(ul) { margin: 0; padding-left: 1.1em; }
  .feature-body :global(li) { margin: 4px 0; }
  .feature-body :global(code) {
    font-size: 0.8em;
    color: var(--accent);
    background: rgba(209, 209, 214, 0.08);
    border-color: var(--accent-dim);
  }
</style>