/* ==========================================================================
   Главная — «Работаем с объектами и тендерами»

   Макет: 1:431 (1840×1247). Заголовок по центру, ниже сетка карточек
   с 3D-иллюстрациями: слева мелкая контурная иконка, справа иллюстрация,
   текст 32 Medium внизу. Последняя карточка — синяя, работает как кнопка.
   ========================================================================== */

/* Шапка секции — нода 1:463 (771×150), от неё до сетки 48.
   Сетка — карточки 910×336 (ноды 1:432…1:462) с зазором 20. */
.tenders .section-head { min-height: 150px; margin-bottom: 48px; }

.tenders__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 336px;
  gap: 20px;
}

.tender-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-32);
  border-radius: var(--radius-lg);
  background: var(--color-bg-soft);
  overflow: hidden;
}

.tender-card__icon {
  display: flex;
  width: 32px;
  height: 32px;
  color: var(--color-brand);
}

.tender-card__icon svg { width: 32px; height: 32px; }

/* Иллюстрация в макете крупная и уходит за правый край карточки. */
.tender-card__art {
  position: absolute;
  right: -24px;
  top: 50%;
  width: 300px;
  max-width: 55%;
  transform: translateY(-50%);
  pointer-events: none;
}

.tender-card__text {
  position: relative;
  z-index: 1;
  max-width: 60%;
  font-size: var(--fs-32);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-32);
}

.tender-card--cta {
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: var(--space-24);
  background: var(--color-brand);
  color: var(--color-text-invert);
  font-size: var(--fs-24);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-24);
  transition: background var(--dur-fast) var(--ease-out);
}

.tender-card--cta:hover { background: var(--color-brand-hover); }

@media (max-width: 900px) {
  .tenders__grid { grid-template-columns: 1fr; }
  .tender-card__text { max-width: 100%; font-size: var(--fs-24); }
  .tender-card__art { opacity: .25; }
}

/* --- Телефон: размеры, не попавшие в блоки выше ---------------------------- */
@media (max-width: 900px) {
  /* Колонки уже сложены в этом брейкпоинте, а высота ряда 336
     оставалась десктопной. */
  .tenders__grid { grid-auto-rows: auto; }
}

@media (max-width: 700px) {
  .tender-card__text,
  .tender-card--cta { font-size: var(--fs-18); }
}

/* --- Телефон: карточки во весь экран (см. пояснение в front-hero.css) ------ */
@media (max-width: 700px) {
  .tender-card {
    margin-inline: calc(var(--side-padding) * -1);
    border-radius: 0;
  }
}