/* Секция «возможности платформы»: плитка из семи карточек.
   На 1440 первая полоса делится на колонку из трёх карточек и одну высокую,
   вторая полоса — три равные. */

/* Свой отступ секция обнуляет только на десктопе. */

.features__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

.features__bento {
  display: grid;
  gap: var(--space-6);
}

.features__band,
.features__col { display: contents; }

@media (min-width: 768px) {
  .features__inner { gap: var(--space-10); }

  .features__bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  /* Последняя карточка занимает ряд целиком. */
  .features__bento > :last-child { grid-column: 1 / -1; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .features__band--three .feature-progress,
  .features__band--three > .feature-card:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
  }

  .features__band--three .feature-progress .feature-card__media,
  .features__band--three .feature-progress .feature-card__copy,
  .features__band--three > .feature-card:last-child .feature-card__media,
  .features__band--three > .feature-card:last-child .feature-card__copy {
    flex: 1 1 50%;
    min-width: 0;
  }

  .features__band--three .feature-progress .feature-card__media,
  .features__band--three > .feature-card:last-child .feature-card__media {
    align-self: stretch;
  }
}

@media (min-width: 1024px) {
  /* Между двумя 0/0-панелями отступ дают соседи по 100 с каждой стороны;
     лишние 32 снизу здесь сбивали этот счёт (ai-tech после неё получал
     132 вместо ровных 100, как везде на странице). */
  .features { padding-block: 0; }

  .features__inner { gap: var(--space-14); }

  .features__bento {
    grid-template-columns: none;
    gap: var(--space-6);
  }

  .features__band,
  .features__col {
    display: grid;
    gap: var(--space-6);
  }

  .features__bento > :last-child { grid-column: auto; }

  /* Высоты полос заданы макетом: карточки внутри выравниваются растяжением. */
  .features__band--main {
    grid-template-columns: minmax(0, 872fr) minmax(0, 424fr);
    align-items: stretch;
    min-height: 620px;
  }

  .features__col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 298px);
  }

  /* Вторая строка колонки — одна карточка во всю её ширину: подпись слева,
     иллюстрация справа. Без этого карточка встаёт в одну колонку из двух,
     иллюстрация в 558 не помещается и выдавливает подпись за край. */
  .features__col > .feature-card--wide { grid-column: 1 / -1; }

  /* Строки колонки заданы макетом, поэтому карточкам разрешено быть ниже
     своего содержимого: лишнее обрезает сама карточка, как в Figma. */
  .features__col > * { min-height: 0; }

  .features__band--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 320px;
  }
}

/* Иллюстрации карточек. При посадке в тему адрес придёт из ACF. */
.feature-visual-novel { --media-image: url("../../img/features/visual-novel.webp"); }
.feature-characters { --media-image: url("../../img/features/characters.webp"); }
.feature-ai { --media-image: url("../../img/features/ai.webp"); }
.feature-decisions { --media-image: url("../../img/features/decisions.webp"); }
.feature-minigames { --media-image: url("../../img/features/minigames.webp"); }
.feature-levels { --media-image: url("../../img/features/levels.webp"); }
.feature-progress { --media-image: url("../../img/features/progress.webp"); }

/* Кадрирование снято с макета. У этих двух картинка выше слота, и в Figma
   она прижата не по центру: «характеры» — к верхнему краю, «решения» — к
   нижнему. По умолчанию `center` срезал у первой верх, у второй низ. */
.feature-characters .feature-card__media { background-position: 50% 1%; }
.feature-decisions .feature-card__media { background-position: 50% 94.5%; }

/* Высокая карточка и карточки нижней полосы больше, значит и пятна крупнее. */
.feature-card--tall { --glow-blur: 80px; }