/* ============================================================
   ПРИМЕРЫ РАБОТ

   Отличается от плиток портфолио на главной намеренно. Там —
   тёмная сцена и стеклянные карточки, здесь скриншот должен
   читаться как скриншот: светлая подложка, тонкая рамка, тень
   как у окна браузера. Картинка тут содержание, а не фактура,
   и всё оформление работает на то, чтобы её не перебивать.
   ============================================================ */
.wreal{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap:clamp(18px, 2vw, 34px);
  margin:clamp(28px, 3vw, 48px) 0 0;
  padding:0;
  list-style:none;
}

/* Первая карточка шире остальных: у примеров всегда есть главный,
   и ряд одинаковых плиток это скрывает. Работает только когда
   примеров больше одного — класс ставит сам шаблон. */
@media (min-width: 900px){
  .wreal__card--wide{ grid-column:span 2; }
}

.wreal__link{
  display:block;
  color:inherit;
}

/* Обойма скриншота. Пропорции 16:10 — доля первого экрана обычного
   ноутбука; в них помещается шапка с первым экраном, а именно по ним
   узнают сайт. Картинка обрезается по верху: низ страницы в превью
   не нужен. */
.wreal__shot{
  position:relative;
  display:block;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--surface-2);
  box-shadow:var(--shadow-card);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wreal__shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  display:block;
}

a.wreal__link:hover .wreal__shot{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lift);
}

/* Метка в углу: тип работы. Полупрозрачная подложка с размытием —
   скриншоты бывают и светлые, и тёмные, а метка должна читаться
   на любом. */
.wreal__tag{
  position:absolute;
  left:clamp(10px, .9vw, 16px);
  top:clamp(10px, .9vw, 16px);
  padding:.45em .75em;
  border-radius:3px;              /* плашка, не «таблетка» (28.09.2026) */
  background:rgba(11, 12, 24, .86);
  color:#fff;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-size:clamp(12px, .75vw, 12px);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.wreal__name{
  display:flex;
  align-items:center;
  gap:.5em;
  margin:clamp(12px, 1.2vw, 18px) 0 0;
  font-family:var(--font-display);
  font-weight:620;
  font-size:clamp(16px, 1.3vw, 21px);
  line-height:1.25;
  color:var(--fg);
  transition:color .22s var(--ease);
}
.wreal__name svg{
  width:.72em;
  height:.72em;
  flex:none;
  color:var(--accent-1);
}
a.wreal__link:hover .wreal__name{ color:var(--accent-1); }

.wreal__note{
  margin:clamp(6px, .6vw, 10px) 0 0;
  max-width:52ch;
  font-size:clamp(13px, 1vw, 16px);
  line-height:1.6;
  color:var(--fg-lead);
}

@media (prefers-reduced-motion: reduce){
  .wreal__shot{ transition:none; }
  a.wreal__link:hover .wreal__shot{ transform:none; }
}