/* ============================================================
   ILINA · виджет проектов на главной (макбук + телефон)
   Дополняет .prow/.devices/.mac/.phone из ilina-dN-home.css.
   Цвета не заданы — всё на currentColor, работает во всех 5 дизайнах.
   ============================================================ */

/* строка проекта кликабельна целиком */
.prow__info a{text-decoration:none;color:inherit;display:block}
.prow__info a:hover h3{opacity:.75}
.prow__info h3{transition:opacity .2s}
a.devices{text-decoration:none;color:inherit;transition:transform .25s}
a.devices:hover{transform:translateY(-4px)}

/* дата проекта вместо домена */
.prow__date{
  display:inline-block;margin:0 0 12px;font-size:14px;font-weight:600;
  letter-spacing:.04em;color:var(--d1-cyan,currentColor);opacity:.9;
}
/* d2: кислотный на светлом фоне не читался — даём плашку,
   как у выделений в заголовках брутализма */
html.design-2 .prow__date{background:#111;color:#d8ff3d;padding:3px 10px}
html.design-3 .prow__date{color:#c0392b}
html.design-4 .prow__date{color:#c98a3d}
/* d5: тёмно-синий на тёмно-фиолетовом тоже не читался */
html.design-5 .prow__date{color:var(--d5-lime,#3dff5f)}

/* экраны: скриншоты сайтов длинные — показываем верх страницы */
.mac__screen img{object-fit:cover;object-position:top center}
.phone__screen img{object-fit:cover;object-position:top center}

/* на мобильных строка складывается: сначала устройства, потом текст */
@media(max-width:960px){
  .prow{gap:18px}
  .prow .devices{order:-1}
  .prow__info h3{font-size:clamp(20px,5vw,26px)}
}


/* ============================================================
   ПРОПОРЦИИ УСТРОЙСТВ ПОД РЕАЛЬНЫЕ СКРИНШОТЫ
   Скрины десктопа приходят ~2.08:1 (2557x1231 и т.п.), а рамка
   макбука была 16:10 — картинку резало. Ставим экран в пропорцию
   скриншота: физически неправдоподобно для ноутбука, зато скрин
   виден целиком и без обрезки.
   ============================================================ */
.mac__screen img{aspect-ratio:25/12!important;object-fit:cover;object-position:top center}
.mac__screen{border-width:5px;border-radius:10px 10px 3px 3px}
.mac__base{height:9px}

/* телефон: вертикальный скрин, показываем верх экрана */
.phone__screen img{aspect-ratio:9/19!important;object-fit:cover;object-position:top center}

/* соотношение блоков в ряду: макбук шире, телефон компактнее */
.devices{align-items:flex-end}
.mac{width:76%}
.phone{width:20%}

@media(max-width:640px){
  .mac{width:74%}
  .phone{width:22%}
}