/* =========================================================
   SEO10 — стили страницы «Портфолио» (portfolio.html)
   ========================================================= */

/* ===================== СЕТКА РАБОТ (группы по 4 + финальный баннер) ===================== */
.portfolio-bento + .portfolio-bento { margin-top: 22px; }
.portfolio-bento-solo { margin-top: 22px; grid-template-rows: auto; }
.portfolio-bento-full { grid-column: 1 / 4; grid-row: 1; }
.portfolio-bento-full .portfolio-bento-card { aspect-ratio: 1200 / 340; }

.portfolio-bento-trio { grid-template-columns: repeat(3, 1fr); }
.portfolio-bento-trio .portfolio-bento-item { grid-column: auto; grid-row: auto; }
.portfolio-bento-trio .portfolio-bento-card { aspect-ratio: 1 / 1; }

/* карточка теперь <button> — сбрасываем нативные стили кнопки */
button.portfolio-bento-card {
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
}

/* ===================== МОДАЛКА С ПРЕВЬЮ ПРОЕКТА ===================== */
.portfolio-modal-box { max-width: 640px; padding: 0; position: relative; overflow: hidden; }
.portfolio-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  background: rgba(17, 24, 15, .45);
  color: #fff;
}
.portfolio-modal-close:hover { background: rgba(17, 24, 15, .65); color: #fff; }
.portfolio-modal-scroll { overflow-y: auto; max-height: 85vh; }
.portfolio-modal-media {
  padding: 34px 30px;
  display: flex;
  justify-content: center;
}
.portfolio-modal-media img {
  width: 100%;
  max-width: 420px;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  display: block;
}
.portfolio-modal-info { padding: 28px 32px 34px; }
.portfolio-modal-info h3 { font-size: 22px; margin-bottom: 6px; }
.portfolio-modal-sub { font-size: 14.5px; color: var(--text-dim); margin: 0 0 14px; }
.portfolio-modal-cta { margin-top: 22px; }
.portfolio-modal-nourl { font-size: 13.5px; color: var(--text-faint); }