/* Раздел новостей видом «Проектами» (07.11, db/199, svartreid.by): NewsProjects, views/minishop/news/{projects,project,project_card}.php.
   Подключается в <head> только на этих страницах (layouts/service_header.php по $esProjectsCss). Цвет сайта — var(--color-site). */
.prj-page {padding: 8px 0 56px}
.prj-intro {max-width: 860px; margin-bottom: 28px}
.prj-grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px}

/* карточка проекта: фото одной пропорции (обрезка по центру), дата, название, начало текста */
.prj-card {display: flex; flex-direction: column; min-width: 0; color: #1d1d1f; text-decoration: none}
.prj-card:hover, .prj-card:focus {color: #1d1d1f; text-decoration: none}
.prj-card__img {position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: #f1f1f3}
.prj-card__img img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease}
.prj-card:hover .prj-card__img img {transform: scale(1.04)}
.prj-card__count {position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 20px;
    font-size: 13px; line-height: 1; color: #fff; background: rgba(17, 18, 22, .55); backdrop-filter: blur(4px)}
.prj-card__body {display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 2px 0}
.prj-card__date {font-size: 13px; line-height: 1.3; color: #8a8f98}
.prj-card__title {font-size: 18px; line-height: 1.3; font-weight: 500}
.prj-card__text {display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; line-height: 1.5; color: #5f636b}
.prj-card__more {display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--color-site, #c8152f)}
.prj-card__more i {font-size: 12px; transition: transform .25s}
.prj-card:hover .prj-card__more i {transform: translateX(4px)}

/* первый проект на первой странице — крупно: фото слева, текст справа */
.prj-card--wide {grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 44px; align-items: center; margin-bottom: 8px}
.prj-card--wide .prj-card__img {aspect-ratio: 16 / 10; border-radius: 20px}
.prj-card--wide .prj-card__body {gap: 12px; padding: 0}
.prj-card--wide .prj-card__title {font-size: 30px; line-height: 1.2}
.prj-card--wide .prj-card__text {-webkit-line-clamp: 5; font-size: 16px; line-height: 1.6}
.prj-card--wide .prj-card__more {margin-top: 8px; font-size: 15px}

/* страница проекта */
.prj-item {padding: 0 0 64px}
.prj-item__meta {display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -4px 0 22px; font-size: 14px; line-height: 1.4; color: #8a8f98}
.prj-item__meta a {color: inherit; text-decoration: underline; text-underline-offset: 3px}
.prj-item__meta a:hover {color: var(--color-site, #c8152f)}
.prj-item__layout {display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start}
.prj-item__hero {position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 32px; border-radius: 20px; background: #2b2d31; isolation: isolate}
/* фото любой пропорции — целиком (вертикальное с телефона не режется), под ним — оно же размытым фоном */
.prj-item__hero:before {content: ''; position: absolute; inset: -40px; z-index: -1; background: var(--prj-bg) center / cover no-repeat; filter: blur(28px) brightness(.85); transform: scale(1.08)}
.prj-item__hero img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain}
/* текст: размер и шрифт, вставленные из Word/PDF (span style="font-size: 10pt"), — как у сайта */
.prj-item__text .item-content {max-width: 780px; font-size: 16px; line-height: 1.7; color: #2b2d31}
.prj-item__text .item-content :is(p, span, font, div, li, td, strong, b, em, i, u, a) {font-size: inherit !important; font-family: inherit !important; line-height: inherit !important}
.prj-item__text .item-content p {margin: 0 0 14px}
.prj-item__text .item-content :is(p, div, span) {text-align: left !important} /* «по ширине» из старого редактора — дыры между словами */
.prj-item__text .item-content :is(strong, b) {font-weight: 600; color: #1d1d1f}
.prj-item__text .item-content :is(h2, h3) {margin: 28px 0 12px; font-size: 22px; line-height: 1.3; font-weight: 500; color: #1d1d1f}
.prj-item__text .item-content ul {margin: 0 0 16px; padding-left: 20px}
.prj-item__text .item-content table {max-width: 100%}
.prj-h2 {margin: 0 0 18px; font-size: 24px; line-height: 1.25; font-weight: 500; color: #1d1d1f}
.prj-photos, .prj-videos {margin-top: 40px}
.prj-videos__grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start}
.prj-videos__grid video {display: block; width: 100%; height: auto; max-height: 560px; border-radius: 14px; background: #111; object-fit: cover}
.prj-photos__grid {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px}
.prj-photos__grid a {position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: #f1f1f3}
.prj-photos__grid img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease}
.prj-photos__grid a:hover img {transform: scale(1.04)}
.prj-item__aside {position: sticky; top: 110px}
.prj-cta {padding: 28px; border-radius: 20px; background: #f4f4f6}
.prj-cta__title {font-size: 22px; line-height: 1.25; font-weight: 500; color: #1d1d1f}
.prj-cta__text {margin: 12px 0 20px; font-size: 15px; line-height: 1.55; color: #5f636b}
.prj-cta__btn {display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; padding: 0 20px; border-radius: 12px; font-size: 16px}
.prj-cta__phone {display: block; margin-top: 14px; text-align: center; font-size: 17px; font-weight: 500; color: #1d1d1f}
.prj-cta__phone:hover {color: var(--color-site, #c8152f)}
.prj-more {margin-top: 64px; padding-top: 40px; border-top: 1px solid #ececef}
.prj-more__head {display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px}
.prj-more__head .prj-h2 {margin: 0}
.prj-more__head a {display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--color-site, #c8152f)}
.prj-more__head a i {font-size: 12px}

@media (max-width: 1200px) {
    .prj-item__layout {grid-template-columns: minmax(0, 1fr) 300px; gap: 32px}
    .prj-card--wide {gap: 32px}
    .prj-card--wide .prj-card__title {font-size: 26px}
}
@media (max-width: 992px) {
    .prj-grid {grid-template-columns: repeat(2, minmax(0, 1fr))}
    .prj-card--wide {grid-template-columns: 1fr; gap: 18px}
    .prj-card--wide .prj-card__title {font-size: 24px}
    .prj-item__layout {grid-template-columns: 1fr}
    .prj-item__aside {position: static}
}
@media (max-width: 600px) {
    .prj-page {padding-bottom: 40px}
    .prj-grid {grid-template-columns: 1fr; gap: 28px}
    .prj-card--wide .prj-card__title {font-size: 21px}
    .prj-card--wide .prj-card__text {-webkit-line-clamp: 3; font-size: 15px}
    .prj-item__hero {aspect-ratio: 4 / 3; margin-bottom: 22px; border-radius: 14px}
    .prj-item__text .item-content {font-size: 15px}
    .prj-photos__grid, .prj-videos__grid {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px}
    .prj-h2 {font-size: 20px}
    .prj-cta {padding: 22px}
    .prj-more {margin-top: 44px; padding-top: 28px}
}