Minimal Link Card

---
/**
 * MinimalLinkCard — Elegant arrow-link card for site navigation sections.
 * 
 * @param {string} title - The text label of the link.
 * @param {string} href - The destination URL.
 */
interface Props {
  title: string;
  href: string;
}

const { title, href } = Astro.props;
---

<a href={href} class="link-card">
  <span class="link-card__title">{title}</span>
  <svg class="link-card__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
    <path d="M5 12h14M12 5l7 7-7 7"/>
  </svg>
</a>

<style>
  .link-card { 
    display: flex; justify-content: space-between; align-items: center; 
    padding: var(--sp-6, 1.5rem); 
    background: var(--c-bg-elev, rgba(255,255,255,0.03)); 
    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
    border-radius: var(--r-md, 12px); 
    text-decoration: none; 
    color: var(--c-text-1, #fff); 
    font-weight: 600; 
    transition: 0.2s; 
  }
  .link-card:hover { 
    background: rgba(255,255,255,0.06); 
    border-color: var(--c-primary, #6366f1); 
    color: var(--c-primary-light, #818cf8); 
  }
  .link-card__icon { transition: transform 0.2s; }
  .link-card:hover .link-card__icon { transform: translateX(5px); }
</style>