/* Start:/local/templates/test_union/components/bitrix/news.list/projects_wall/style.css?17811005835229*/
/* Pinterest-стена проектов (/nashi-proekty/). Scoped под .proj-wall.
   Бренд-цвета литералами (#001F1F тёмный, #8F7662 акцент) — тема Aspro перебивает
   --dark/--light на body, поэтому var() здесь не используем. */

.proj-wall{ margin: 0 0 40px; }
/* .btn (Aspro) перебивает атрибут [hidden] — форсируем скрытие пагинации/«ещё» */
.proj-wall [hidden]{ display: none !important; }
.proj-wall--empty{ padding: 60px 0; text-align: center; color: #6b6b6b; font-size: 18px; }

/* раскладка masonry: ряд колонок одинаковой ширины */
.proj-wall__grid.is-pw-masonry{ display: flex; align-items: flex-start; gap: 18px; }
.proj-wall__col{ flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* до инициализации JS не показываем «сырой» список */
.proj-wall__grid:not(.is-pw-masonry){ display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }

.proj-card{
    position: relative; overflow: hidden; border-radius: 14px; background: #f1ece6;
    box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: box-shadow .25s, transform .25s;
}
.proj-card:hover{ box-shadow: 0 12px 30px rgba(0,31,31,.18); }
.proj-card__link{ display: block; width: 100%; height: 100%; }
.proj-card__img{
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease; background: #f1ece6;
}
.proj-card:hover .proj-card__img{ transform: scale(1.04); }

/* полупрозрачный оверлей поверх картинки */
.proj-card__overlay{
    position: absolute; inset: 0; pointer-events: none; opacity: 0;
    transition: opacity .25s ease; display: flex; flex-direction: column;
    justify-content: space-between; padding: 10px;
    background: linear-gradient(180deg, rgba(0,31,31,.18) 0%, rgba(0,31,31,0) 28%, rgba(0,31,31,0) 45%, rgba(0,31,31,.72) 100%);
}
.proj-card:hover .proj-card__overlay{ opacity: 1; }

/* кнопка лайка слева сверху — компактный чип (иконка + число) */
.proj-like{
    pointer-events: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
    border: 0; cursor: pointer; padding: 5px 9px; border-radius: 999px;
    background: rgba(255,255,255,.92); color: #001F1F; font-weight: 600; font-size: 13px; line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .15s, background .2s;
}
.proj-like:hover{ transform: scale(1.06); }
.proj-like:active{ transform: scale(.94); }
.proj-like__icon{ width: 15px; height: 15px; fill: none; stroke: #001F1F; stroke-width: 2; transition: fill .2s, stroke .2s; }
.proj-like.is-liked .proj-like__icon{ fill: #e1394e; stroke: #e1394e; }
.proj-like.is-liked{ color: #001F1F; }
.proj-like.is-busy{ opacity: .75; }
.proj-like__n{ min-width: 8px; text-align: left; }

/* низ оверлея: кнопка «Хочу также» */
.proj-card__foot{ display: flex; justify-content: center; }

.proj-want{
    pointer-events: auto; flex: 0 0 auto; cursor: pointer; white-space: nowrap;
    border: 0; border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 600;
    background: #8F7662; color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); transition: background .2s, transform .15s;
}
.proj-want:hover{ background: #7a6353; color: #fff; transform: translateY(-1px); }
.proj-want:active{ transform: translateY(0); }

/* «Показать ещё» + пагинация */
.proj-wall__morewrap{ text-align: center; margin-top: 26px; }
.proj-wall__pager{ margin-top: 22px; display: flex; justify-content: center; }
.proj-wall__pager .module-pagination{ display: inline-flex; }

/* тач-устройства: ховера нет — действия видимы постоянно */
@media (hover: none){
    .proj-card__overlay{ opacity: 1; background: linear-gradient(180deg, rgba(0,31,31,.12) 0%, rgba(0,31,31,0) 32%, rgba(0,31,31,.74) 100%); }
    .proj-card:hover .proj-card__img{ transform: none; }
}

/* адаптив: чем уже карточка, тем компактнее контролы */
@media (max-width: 980px){
    .proj-wall__grid.is-pw-masonry,
    .proj-wall__grid:not(.is-pw-masonry){ gap: 12px; }
    .proj-wall__col{ gap: 12px; }
    .proj-card__overlay{ padding: 9px; }
    .proj-like{ padding: 5px 8px; font-size: 12px; gap: 4px; }
    .proj-like__icon{ width: 14px; height: 14px; }
    .proj-want{ padding: 6px 12px; font-size: 11.5px; }
}
@media (max-width: 600px){
    .proj-wall__grid:not(.is-pw-masonry){ grid-template-columns: repeat(2, 1fr); }
    .proj-card{ border-radius: 11px; }
    .proj-card__overlay{ padding: 7px; }
    .proj-like{ padding: 4px 7px; font-size: 11px; gap: 3px; box-shadow: 0 1px 5px rgba(0,0,0,.22); }
    .proj-like__icon{ width: 13px; height: 13px; }
    .proj-want{ padding: 5px 10px; font-size: 11px; box-shadow: 0 1px 6px rgba(0,0,0,.28); }
}
@media (max-width: 400px){
    .proj-card__overlay{ padding: 6px; }
    .proj-want{ padding: 4px 9px; font-size: 10.5px; }
    .proj-like{ padding: 4px 6px; font-size: 10.5px; }
}

/* End */
/* /local/templates/test_union/components/bitrix/news.list/projects_wall/style.css?17811005835229 */