/* showcase.css — единственный собственный css витрины.

   Витрина не шаблон: своего t<N>.css у неё нет и быть не может — она ничего
   не продаёт. Здесь описано ровно то, чего нет в дизайн-системе: карточка
   сайта с превью и мобильное поведение сетки карточек. Всё остальное —
   регистры, ритм, шкала, кнопка, метка — взято из общих девяти файлов
   как есть. Значения только через var(--as-*).

   Ни одного пути наружу папки landings/: витрина отделена от четырёх сайтов
   структурно, а не на словах (R06). Картинки превью скопированы в img/,
   а не подтянуты из папок сайтов. */

/* ---------- Шапка ----------
   .header из system.css здесь не используется: он фиксированный, с меню
   и якорной навигацией — это оснастка посадочной страницы. Указателю
   хватает статичной строки, которая уезжает вместе со страницей. */
.sc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--as-s5);
  min-height: var(--as-header-h);
  padding-block: var(--as-s4);
  border-bottom: var(--as-hairline) solid var(--as-line-on-dark);
}

/* ---------- Первый экран ----------
   Дисплейный размер здесь один и небольшой: d3, не d1. Витрина открывается
   заказчиком, который уже всё знает, — крупная обложка была бы продающим
   приёмом там, где нужен указатель. */
.sc-intro__lead {
  margin-top: var(--as-s5);
}

.sc-intro__note {
  margin-top: var(--as-s6);
  color: var(--as-text-on-dark-mute);
}

/* ---------- Сетка карточек ---------- */
.sc-cards {
  row-gap: var(--as-s8);
}

/* ---------- Карточка сайта ----------
   Позиционируется, потому что ссылка «Открыть сайт» растягивается на всю
   карточку псевдоэлементом: щёлкать можно куда угодно, а в порядке
   табуляции и у скринридера остаётся одна короткая ссылка, а не заголовок,
   обёрнутый в анкор. */
.sc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--as-s4);
  padding: var(--as-s5);
  background: var(--as-cream-100);
  border: var(--as-hairline) solid var(--as-line-on-light);
  border-radius: var(--as-radius-flat);
  transition: border-color var(--as-dur-fast) var(--as-ease);
}

.sc-card:hover {
  border-color: var(--as-accent-500);
}

/* Кадр превью. Пропорция задана рамкой, поэтому разметка обходится без
   width/height у картинки и всё равно не прыгает при загрузке. */
.sc-card__frame {
  width: 100%;
  aspect-ratio: var(--as-ratio-wide);
  overflow: hidden;
  background: var(--as-cream-200);
  border-radius: var(--as-radius-flat);
}

.sc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sc-card__marker {
  width: 100%;
}

/* Шаблон — единственное акцентное место карточки: это и есть решение,
   ради которого страницу открыли. */
.sc-card__tpl {
  font-size: var(--as-fs-body);
  font-weight: var(--as-w-medium);
  color: var(--as-accent-500);
}

.sc-card__why {
  color: var(--as-text-on-light-mute);
}

/* Действие прижато к низу: у карточек разной длины основания кнопки
   всё равно стоят на одной линии. */
.sc-card__go {
  margin-top: auto;
}

.sc-card__go::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--as-radius-flat);
}

/* ---------- Подвал ---------- */
.sc-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--as-s3) var(--as-s6);
  padding-block: var(--as-s7);
  border-top: var(--as-hairline) solid var(--as-line-on-dark);
  color: var(--as-text-on-dark-mute);
}

/* ---------- Мобильный указатель ----------
   Общий responsive.css разворачивает раскладки посадочных страниц и про
   .col-* ничего не знает: до волны 2 колонки сворачивала каждая страница
   сама. Витрина делает то же и в том же месте — 900 px. */
@media (max-width: 900px) {
  .sc-cards > .sc-card {
    grid-column: span 12;
  }
}

@media (max-width: 600px) {
  .sc-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--as-s3);
  }

  .sc-card {
    padding: var(--as-s4);
  }

  /* Действие на узком экране занимает всю строку — правило дизайн-системы
     для .menu и .sticky-cta; у витрины эту роль играет кнопка карточки. */
  .sc-card__go {
    width: 100%;
  }
}