/* _card.css | cards: a project or an offer. Consecutive cards make a grid (.cards). */

.cards { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }

.card {
  display: flex; flex-direction: column;
  background: var(--color-surface); color: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-200); border-radius: var(--radius);
  overflow: hidden;
}
.card > :not(.card__image):not(.card__visual) { margin-left: 1.5rem; margin-right: 1.5rem; }
.card__image { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card__visual {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9;
  background: var(--color-neutral-100); color: var(--color-neutral-600);
  font-family: var(--font-display); font-size: 2.5rem; letter-spacing: 0.05em;
}
.card__label { margin-top: 1.25rem; }
.card__title { font-size: 1.35rem; margin-top: 0.5rem; }
.card:not(:has(.card__label)) .card__title { margin-top: 1.25rem; }
.card__tag { margin-top: 0.25rem; font-family: var(--font-ui); font-size: 0.75rem; text-transform: var(--label-case); letter-spacing: calc(0.1em * var(--label-tracking)); color: var(--color-primary-700); }
.card__text { margin-top: 0.75rem; color: var(--color-neutral-600); font-size: 0.95rem; }
.card__facts { list-style: none; margin-top: 1rem; display: grid; gap: 0.4rem; font-size: 0.9rem; color: var(--color-neutral-700); }
.card__facts li { display: flex; align-items: center; gap: 0.5rem; }
.card__facts svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--color-primary-700); }
.card__link { margin-top: auto; padding: 1.25rem 0 1.5rem; color: var(--color-primary-700); font-family: var(--font-ui); font-size: 0.9rem; }
.card__link:hover { text-decoration: underline; }
.card--offer .card__link { align-self: flex-start; margin-bottom: 1.5rem; padding: 0.6rem 1.25rem; border: 1px solid var(--color-primary-700); border-radius: var(--radius); }
.card--offer .card__link:hover { background: var(--color-primary-700); color: var(--color-on-primary); text-decoration: none; }