---
import GridObject from './GridObject.astro';
import { t, type Lang } from '../../i18n/ui';
interface Props { lang: Lang }
const { lang } = Astro.props;
const ui = t(lang);
const objects = ['steps', 'nested', 'stack'] as const;
---
<section class="section vcards" aria-label={lang === 'de' ? 'Eigenschaften' : 'Properties'}>
  <div class="container">
    <ul class="vcards__list" role="list">
      {ui.verifier.cards.map((card, i) => (
        <li class="vcards__item">
          <h2 class="vcards__title">{card.title}</h2>
          <GridObject kind={objects[i]} class="vcards__object" />
          <p class="muted vcards__body">{card.body}</p>
        </li>
      ))}
    </ul>
  </div>
</section>

<style>
  .vcards__list { display: grid; gap: var(--gap); }
  .vcards__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* Title, then the drawing in the row that takes the slack, then the body at the bottom. */
    grid-template-rows: auto 1fr auto;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-6) var(--space-7);
    background: var(--paper-deep);
  }
  .vcards__title {
    font-size: var(--step-title);
    line-height: var(--leading-title);
    letter-spacing: var(--track-h2);
    font-weight: var(--weight-regular);
    min-height: calc(2 * var(--leading-title) * 1em);
    text-wrap: balance;
    hyphens: auto;
  }
  .vcards__item :global(.vcards__object) { width: 100%; max-width: 14rem; justify-self: center; align-self: center; }
  /* Hovering a card lets its grid recede, so the shape that carries the idea stands alone. */
  @media (hover: hover) {
    .vcards__item:hover {
      --object-scale: 1.03;
      --object-grid: 0.26;
    }
  }
  .vcards__body { max-width: 26em; }
  @media (min-width: 48rem) {
    .vcards__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
</style>