/* features — asimmetrik bento.
   Xana sayı = element sayı (5). Boş xana qalması dizayn xətasıdır. */

.features {
  padding: var(--space-20) var(--space-5);
  background: var(--bg);
}

.features__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
}

.features__title {
  font-family: var(--font-display);
  font-size: var(--size-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  margin: 0 0 var(--space-10);
  max-width: 20ch;
  text-wrap: balance;
}

.features__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* --- Xana */
.features__cell {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.features__cell--primary {
  background: var(--primary-subtle);
  border-color: var(--primary-border);
}

.features__cell--accent {
  background: var(--accent-subtle);
  border-color: var(--border);
}

/* Şəkilli böyük xana */
.features__cell--wide {
  padding: 0;
  overflow: hidden;
  gap: 0;
}

.features__media {
  aspect-ratio: 16 / 9;
  background: var(--surface-2);
}

.features__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.features__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.features__heading {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--text);
}

.features__text {
  margin: 0;
  font-size: var(--size-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
  max-width: 44ch;
  text-wrap: pretty;
}

.features__cell--primary .features__text,
.features__cell--accent .features__text { color: var(--text); }

@media (min-width: 48rem) {
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .features__cell--wide { grid-column: span 2; }
}

@media (min-width: 64rem) {
  .features__title { font-size: var(--size-3xl); }
  .features__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
  }
  .features__cell--wide { grid-column: span 2; }
  .features__media { aspect-ratio: 21 / 9; }
}

@media (prefers-reduced-motion: no-preference) {
  .features__cell {
    animation: features-rise var(--duration-slow) var(--ease-out-quart) both;
  }
  .features__cell:nth-child(2) { animation-delay: 50ms; }
  .features__cell:nth-child(3) { animation-delay: 100ms; }
  .features__cell:nth-child(4) { animation-delay: 150ms; }
  .features__cell:nth-child(5) { animation-delay: 200ms; }
}

@keyframes features-rise {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}