/* JV Promo Blocks Module Styles */
.jv-promo-blocks {
    width: 100%;
    margin: 20px 0;
}

.jv-promo-blocks .promo-list-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.jv-promo-blocks .promo-list-item {
    flex: 1;
    min-width: 300px;
    padding: 13px 0px 13px 30px;
    border-radius: 30px;
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    /* #373: тень при наведении убрана, остался один подъём — ровно такой же, как
       у карточек каталога (.jv-product-card:hover): −3px и 0.2s.
       ВНИМАНИЕ: набор правил .promo-list-item в этом файле продублирован дважды,
       побеждает второй — правим оба. */
    transition: transform 0.2s ease;
}

.jv-promo-blocks .promo-list-item:hover {
    transform: translateY(-3px);
}

.jv-promo-blocks .promo-list-item h3 {
    font-size: 32px;
    line-height: 36px;
    text-transform: none; /* #174: без капса */
    font-weight: 500;
    margin-bottom: 20px;
    max-width: 320px;
}

.jv-promo-blocks .promo-list-item p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 20px;
    max-width: 330px;
    font-weight: 400;
    opacity: 0.9;
}

.jv-promo-blocks .promo-list-item .promo-cta {
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 20px;
    width: fit-content;
    position: relative;
    border-bottom: 1px solid;
    transition: opacity 0.3s ease;
}

.jv-promo-blocks .promo-list-item .promo-cta:hover {
    opacity: 0.8;
}

.jv-promo-blocks .promo-list-item img {
    position: absolute;
    right: 0px;
    bottom: 0px;
    max-width: 250px;
    max-height: 100%;
    object-fit: contain;
}
@media only screen and (max-width: 1710px){

.jv-promo-blocks .promo-list-item h3 {
    font-size: 30px;
    line-height: 33px;
    text-transform: none; /* #174: без капса */
    font-weight: 500;
    margin-bottom: 10px;
    max-width: 320px;
}

.jv-promo-blocks .promo-list-item p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 14px;
    max-width: 313px;
    font-weight: 400;
    opacity: 0.9;
}

.jv-promo-blocks .promo-list-item .promo-cta {
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 20px;
    width: fit-content;
    position: relative;
    border-bottom: 1px solid;
    transition: opacity 0.3s ease;
}

    
}

@media only screen and (max-width: 1440px){
  .jv-promo-blocks {
    width: 100%;
    margin: 20px 0;
}

.jv-promo-blocks .promo-list-items {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.jv-promo-blocks .promo-list-item {
    flex: 1;
    min-width: 300px;
    padding: 3px 0px 13px 30px;
    border-radius: 30px;
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    /* #373: тень при наведении убрана, остался один подъём — ровно такой же, как
       у карточек каталога (.jv-product-card:hover): −3px и 0.2s.
       ВНИМАНИЕ: набор правил .promo-list-item в этом файле продублирован дважды,
       побеждает второй — правим оба. */
    transition: transform 0.2s ease;
}

.jv-promo-blocks .promo-list-item:hover {
    transform: translateY(-3px);
}

.jv-promo-blocks .promo-list-item h3 {
    font-size: 26px;
    line-height: 30px;
    text-transform: none; /* #174: без капса */
    font-weight: 500;
    margin-bottom: 9px;
    max-width: 300px;
}

.jv-promo-blocks .promo-list-item p {
    font-size: 13px;
    line-height: 20px;
    margin-bottom: 10px;
    max-width: 270px;
    font-weight: 400;
    opacity: 0.9;
}

.jv-promo-blocks .promo-list-item .promo-cta {
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0px;
    width: fit-content;
    position: relative;
    border-bottom: 1px solid;
    transition: opacity 0.3s ease;
}

.jv-promo-blocks .promo-list-item .promo-cta:hover {
    opacity: 0.8;
}

.jv-promo-blocks .promo-list-item img {
    position: absolute;
    right: 0px;
    bottom: 0px;
    max-width: 250px;
    max-height: 100%;
    object-fit: contain;
}
  




    
}
@media only screen and (max-width: 1360px){
    .jv-promo-blocks {
    width: 100%;
    margin: 20px 0;
    }
    .jv-promo-blocks .promo-list-item h3 {
    font-size: 22px;
    line-height: 26px;
    text-transform: none; /* #174: без капса */
    font-weight: 700;
    margin-bottom: 0px;
    }
    .jv-promo-blocks .promo-list-item {
    flex: 1;
    min-width: 300px;
    padding: 0px 170px 9px 18px;
    }
    .jv-promo-blocks .promo-list-item p {
    font-size: 12px;
    line-height: 15px;
    margin-bottom: 9px;
    max-width: 330px;
    font-weight: 400;
    }
    .jv-promo-blocks .promo-list-item .promo-cta {
    font-size: 10px;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 10px;
    width: fit-content;
    position: relative;
    border-bottom: 1px solid;
    transition: opacity 0.3s ease;
    }
}

/* Responsive styles */
@media only screen and (max-width: 1024px) {
    .jv-promo-blocks .promo-list-items {
        gap: 15px;
    }
    
    .jv-promo-blocks .promo-list-item {
        /* min-width: 280px; */
        /* padding: 30px 25px; */
    }
    
    .jv-promo-blocks .promo-list-item h3 {
        /* font-size: 28px; */
        /* line-height: 32px; */
    }
    
    .jv-promo-blocks .promo-list-item img {
        max-width: 120px;
        max-height: 120px;
    }
}
@media only screen and (max-width: 1226px){
    .jv-promo-blocks {
    width: 100%;
    margin: 20px 0;
    }
    .jv-promo-blocks .promo-list-item h3 {
    font-size: 19px;
    line-height: 20px;
    text-transform: none; /* #174: без капса */
    font-weight: 700;
    margin-bottom: 0px;
    margin: 14px 0;
    }
    .jv-promo-blocks .promo-list-item {
    flex: 1;
    min-width: 300px;
    padding: 0px 170px 9px 18px;
    }
    .jv-promo-blocks .promo-list-item p {
    font-size: 12px;
    line-height: 15px;
    margin-bottom: 9px;
    max-width: 330px;
    font-weight: 400;
    }
    .jv-promo-blocks .promo-list-item .promo-cta {
    font-size: 10px;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 10px;
    width: fit-content;
    position: relative;
    border-bottom: 1px solid;
    transition: opacity 0.3s ease;
    }
}
@media only screen and (max-width: 1155px){
    .jv-promo-blocks {
    width: 100%;
    margin: 20px 0;
    }
    .jv-promo-blocks .promo-list-item h3 {
    font-size: 16px;
    line-height: 20px;
    text-transform: none; /* #174: без капса */
    font-weight: 700;
    margin-bottom: 0px;
    margin: 9px 0;
    }
    .jv-promo-blocks .promo-list-item {
    flex: 1;
    min-width: 300px;
    padding: 0px 170px 9px 18px;
    }
    .jv-promo-blocks .promo-list-item p {
    font-size: 12px;
    line-height: 15px;
    margin-bottom: 7px;
    max-width: 330px;
    font-weight: 400;
    }
    .jv-promo-blocks .promo-list-item .promo-cta {
    font-size: 10px;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 10px;
    width: fit-content;
    position: relative;
    border-bottom: 1px solid;
    transition: opacity 0.3s ease;
    }
}
/* Responsive styles */
@media only screen and (max-width: 1024px) {
    .jv-promo-blocks .promo-list-items {
        gap: 15px;
    }
    
    .jv-promo-blocks .promo-list-item {
        /* min-width: 280px; */
        /* padding: 30px 25px; */
    }
    
    .jv-promo-blocks .promo-list-item h3 {
        /* font-size: 28px; */
        /* line-height: 32px; */
    }
    
    .jv-promo-blocks .promo-list-item img {
        max-width: 120px;
        max-height: 120px;
    }
}



/* Responsive styles */
@media only screen and (max-width: 980px) {
    .jv-promo-blocks .promo-list-items {
        gap: 15px;
    }
    
    .jv-promo-blocks .promo-list-item {
        min-width: 280px;
        padding: 0px 113px 4px 18px;
    }
    
    .jv-promo-blocks .promo-list-item h3 {
        font-size: 16px;
        line-height: 17px;
        font-weight: 500;
    }
    
    .jv-promo-blocks .promo-list-item img {
        max-width: 120px;
        max-height: 120px;
    }
        .jv-promo-blocks .promo-list-item p {
        font-size: 12px;
        line-height: 12px;
        margin-bottom: 9px;
        max-width: 330px;
        font-weight: 400;
    }
        .jv-promo-blocks .promo-list-item .promo-cta {
        font-size: 12px;
        font-weight: 400;
        text-decoration: none;
        display: inline-block;
        margin-bottom: 10px;
        width: fit-content;
        position: relative;
        border-bottom: 1px solid;
        transition: opacity 0.3s ease;
    }
}



@media only screen and (max-width: 910px) {
    .jv-promo-blocks .promo-list-items {
        gap: 15px;
    }
    
    .jv-promo-blocks .promo-list-item {
        min-width: 200px;
        padding: 0px 113px 4px 18px;
        border-radius: 10px;
    }
    
    .jv-promo-blocks .promo-list-item h3 {
        font-size: 13px;
        line-height: 13px;
        font-weight: 500;
    }
    
    .jv-promo-blocks .promo-list-item img {
        max-width: 120px;
        max-height: 120px;
    }
        .jv-promo-blocks .promo-list-item p {
        font-size: 12px;
        line-height: 12px;
        margin-bottom: 9px;
        max-width: 330px;
        font-weight: 400;
    }
        .jv-promo-blocks .promo-list-item .promo-cta {
        font-size: 12px;
        font-weight: 400;
        text-decoration: none;
        display: inline-block;
        margin-bottom: 10px;
        width: fit-content;
        position: relative;
        border-bottom: 1px solid;
        transition: opacity 0.3s ease;
    }
}
@media only screen and (max-width: 580px){
        
    .jv-promo-blocks .promo-list-item {
        min-width: 154px;
        padding: 0px 23px 4px 8px;
        border-radius: 10px;
    }
          .jv-promo-blocks .promo-list-item p {
        font-size: 12px;
        line-height: 9px;
        margin-bottom: 6px;
        max-width: 330px;
        font-weight: 400;
    }
        .jv-promo-blocks .promo-list-item h3 {
        font-size: 10px;
        line-height: 10px;
        font-weight: 500;
        margin: 10px 0 0;
    }
}

@media only screen and (max-width: 500px) {
        .jv-promo-blocks .promo-list-item img {
        position: absolute;
        right: 0;
        transform: none;
        bottom: 0px;
        max-width: 150px;
        max-height: 150px;
    }
        .jv-promo-blocks .promo-list-item h3 {
        font-size: 18px;
        line-height: 20.67px;
        max-width: 100%;
        margin-top: 0px;
        font-weight: 500;
        padding-bottom: 9px;
    }
    .jv-promo-blocks .promo-list-item p {
        font-size: 12px;
        line-height: 11px;
        max-width: 100%;
        padding-bottom: 7px;
        margin-bottom: 7px;
    }
    .promo-list-items .promo-list-item:nth-child(3) p {
        font-size: 12px!important;
    }
    html .promo-list-items .promo-list-item {
        padding-right: 138px;
        padding: 20px 138px 13px 13px;
    }
    .jv-promo-blocks .promo-list-item {

    }
        html .promo-list-items .promo-list-item .promo-cta {
        bottom: auto;
        left: auto;
        font-size: 12px;
        padding-bottom: 2.5px;
        margin-bottom: 0;
        border-bottom: 1px solid;
    }


}
@media only screen and (max-width: 360px) {
        .jv-promo-blocks .promo-list-item img {
        position: absolute;
        right: 0;
        transform: none;
        bottom: 0px;
        max-width: 150px;
        max-height: 150px;
    }
        .jv-promo-blocks .promo-list-item h3 {
        font-size: 18px;
        line-height: 20.67px;
        max-width: 100%;
        margin-top: 0px;
        font-weight: 500;
        padding-bottom: 9px;
    }
    .jv-promo-blocks .promo-list-item p {
        font-size: 12px;
        line-height: 11px;
        max-width: 100%;
        padding-bottom: 7px;
        margin-bottom: 7px;
    }
    .promo-list-items .promo-list-item:nth-child(3) p {
        font-size: 12px!important;
    }
    html .promo-list-items .promo-list-item {
        padding-right: 138px;
        padding: 20px 138px 13px 13px;
    }
    .jv-promo-blocks .promo-list-item {

    }
        html .promo-list-items .promo-list-item .promo-cta {
        bottom: auto;
        left: auto;
        font-size: 12px;
        padding-bottom: 2.5px;
        margin-bottom: 0;
        border-bottom: 1px solid;
    }


}

/* ============================================================
   JV: чистая адаптивная раскладка промо-карточек.
   Переопределяет ад-хок брейкпоинты выше (специфичность
   .jv-promo-blocks .promo-list-items .promo-list-item + !important,
   в конце файла = выигрывает по порядку каскада).
   ============================================================ */

/* Планшет 768–991: ТРИ плитки в ряд (фидбек #40 — 1 колонка выглядела «отвратительно»).
   Компактная композиция: описание скрыто, заголовок мельче, картинка меньше в правом углу. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .jv-promo-blocks .promo-list-items {
        gap: 12px !important;
        flex-wrap: nowrap !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;                  /* высота из темы обрезала контент */
        border-radius: 16px !important;
        padding: 16px 104px 16px 16px !important; /* справа — место под картинку */
        min-height: 150px !important;
        justify-content: center !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item h3 {
        font-size: 17px !important;
        line-height: 21px !important;
        margin: 0 0 8px !important;
        max-width: 100% !important;
        padding-bottom: 0 !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item p { display: none !important; }
    .jv-promo-blocks .promo-list-items .promo-list-item .promo-cta {
        font-size: 12px !important;
        margin: 0 !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item img {
        height: auto !important;
        max-width: 96px !important;
        max-height: 66% !important;
        object-fit: contain !important;
    }
}

/* ============================================================
   Мобилка ≤767 — раскладка по макету (29.07): два квадрата в
   ряд («Освещение по типу помещения» + «Проектная заявка») и
   широкая плитка калькулятора под ними.
   Квадраты: заголовок сверху (капсом, как в макете), картинка
   по центру, CTA снизу; описание скрыто. Широкая: текст слева
   с описанием, картинка справа за краем.

   Грабля: тема задаёт плиткам жёсткую высоту
   (07-footer.css `height:13.586vw` ≤1860 и 08-responsive.css
   `html .promo-list-items .promo-list-item{height:142px}` ≤500) —
   без `height:auto !important` aspect-ratio не работает.

   Широкая плитка выбирается по ссылке на калькулятор, а не по
   nth-child: в админке порядок баннеров другой (калькулятор
   идёт вторым), а по макету он должен быть внизу — отсюда order.
   ============================================================ */
@media only screen and (max-width: 767px) {
    .jv-promo-blocks .promo-list-items {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 10px !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;      /* см. граблю выше */
        min-height: 0 !important;
        aspect-ratio: 1 / 1 !important;
        padding: 14px 12px 12px !important;
        border-radius: 16px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item h3 {
        order: 1 !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        /* в заголовках из админки есть NBSP («типу помещения») —
           без этого длинная склейка вылезает за край плитки */
        overflow-wrap: anywhere !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item p {
        display: none !important;
    }
    /* Картинка вписана в собственный слой, а не в поток: в потоке она
       ограничивалась остатком высоты и выходила заметно мельче макета
       (исходники — квадраты 250×250 с полями вокруг объекта). */
    .jv-promo-blocks .promo-list-items .promo-list-item img {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        bottom: 26px !important;      /* над строкой CTA */
        transform: translateX(-50%) !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 54% !important;
        max-height: none !important;
        min-height: 0 !important;
        object-fit: contain !important;
        object-position: bottom center !important;
        margin: 0 !important;
        z-index: 0 !important;
    }
    /* «Проектная заявка»: скрины формы прижаты к правому краю (как в макете),
       но не заезжают на CTA — текст «Перейти в раздел» длиннее макетного
       «В раздел» и занимает почти всю ширину плитки. */
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="proekt"] img {
        left: auto !important;
        right: -10px !important;
        bottom: 24px !important;
        transform: none !important;
        width: 66% !important;
        max-width: 66% !important;
        height: 64% !important;   /* картинка вертикальная — вписывается по высоте */
        object-position: bottom right !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item h3,
    .jv-promo-blocks .promo-list-items .promo-list-item .promo-cta {
        position: relative !important;
        z-index: 1 !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item .promo-cta {
        order: 3 !important;
        margin: auto 0 0 !important;   /* прижат к низу плитки */
        padding: 0 !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        border-bottom: 0 !important;   /* по макету — без подчёркивания */
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item .promo-cta::after {
        content: "\2192";              /* стрелка → как в макете */
        font-size: 13px;
        line-height: 1;
    }

    /* — широкая плитка: калькулятор освещённости — */
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="calc"],
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="kalk"] {
        grid-column: 1 / -1 !important;
        order: 2 !important;           /* всегда под квадратами */
        aspect-ratio: auto !important;
        height: auto !important;
        min-height: 160px !important;
        padding: 16px 42% 14px 14px !important;  /* справа резерв под картинку */
        justify-content: center !important;
    }
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="calc"] h3,
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="kalk"] h3 {
        font-size: 14px !important;
    }
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="calc"] p,
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="kalk"] p {
        display: block !important;
        order: 2 !important;
        font-size: 11.5px !important;
        line-height: 1.4 !important;
        margin: 6px 0 12px !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="calc"] .promo-cta,
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="kalk"] .promo-cta {
        font-size: 12px !important;
    }
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="calc"] img,
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="kalk"] img {
        position: absolute !important;
        left: auto !important;         /* сброс left/bottom из правила квадратов */
        bottom: auto !important;
        right: -6px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 42% !important;
        height: 88% !important;
        margin: 0 !important;
        object-fit: contain !important;
        object-position: right center !important;
    }
}

/* Широкая мобилка 480–767 (крупные телефоны в альбомной, узкие планшеты):
   плитка вырастает до ~340px — типографика макета (13px) на ней теряется. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .jv-promo-blocks .promo-list-items .promo-list-item {
        padding: 20px 18px 18px !important;
        border-radius: 20px !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item h3 {
        font-size: 18px !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item .promo-cta {
        font-size: 13px !important;
    }
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="calc"],
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="kalk"] {
        padding: 24px 42% 22px 18px !important;
        min-height: 190px !important;
    }
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="calc"] h3,
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="kalk"] h3 {
        font-size: 20px !important;
    }
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="calc"] p,
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="kalk"] p {
        font-size: 14px !important;
    }
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="calc"] .promo-cta,
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="kalk"] .promo-cta {
        font-size: 14px !important;
    }
}

/* Узкая мобилка ≤374 (iPhone SE): плитка 145px — CTA в одну строку. */
@media only screen and (max-width: 374px) {
    .jv-promo-blocks .promo-list-items .promo-list-item .promo-cta {
        font-size: 10.5px !important;
        gap: 6px !important;
    }
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="calc"] .promo-cta,
    .jv-promo-blocks .promo-list-items a.promo-list-item[href*="kalk"] .promo-cta {
        font-size: 11.5px !important;
    }
}

/* Розовую карточку «Калькулятор освещённости» (#fff3f6) делаем серой — как первую (#f3f3f6).
   Бьём инлайн-фон из БД через !important; ключ по цвету, а не по позиции. */
.jv-promo-blocks .promo-list-item[style*="#fff3f6"],
.jv-promo-blocks .promo-list-item[style*="#FFF3F6"] {
    background-color: #f3f3f6 !important;
}

/* ============================================================
   JV: вся карточка кликабельна — сам .promo-list-item является
   ссылкой (<a class="promo-list-item--link">). CTA .promo-cta —
   декоративный текст-подпись внутри, не отдельная ссылка.
   ============================================================ */
.jv-promo-blocks a.promo-list-item {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.jv-promo-blocks a.promo-list-item:hover .promo-cta {
    opacity: 0.8;
}

/* ============================================================
   QA 29.07 · десктопная раскладка плиток (#234, #236, #237, #238)
   Было: padding-right = 0 при картинке 250px справа — заголовок и
   описание наезжали на изображение; высота плитки (200px) меньше
   контента (235px) при overflow:hidden — CTA «Перейти в раздел»
   обрезался. Здесь: три плитки строго одного размера (flex:1 1 0
   + stretch), справа зарезервировано место под картинку, CTA
   прижат к низу в потоке — плитка растёт под контент.
   В конце файла + !important — перебивает ад-хок брейкпоинты выше.
   ============================================================ */
@media only screen and (min-width: 992px) {
    .jv-promo-blocks .promo-list-items {
        gap: 20px !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        /* справа — резерв под картинку (200px = 190px картинка + воздух) */
        padding: 24px 200px 24px 30px !important;
        /* тема задаёт height:13.586vw (07-footer.css) — при контенте выше
           min-height плитка не росла и низ обрезался overflow:hidden */
        height: auto !important;
        min-height: 244px !important;
        justify-content: flex-start !important;
        border-radius: 30px !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item h3 {
        font-size: 24px !important;
        line-height: 1.15 !important;
        font-weight: 600 !important;
        margin: 0 0 10px !important;
        max-width: 100% !important;
        text-transform: none !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item p {
        font-size: 15px !important;
        line-height: 1.45 !important;
        margin: 0 0 16px !important;
        max-width: 100% !important;
    }
    /* margin-top:auto — CTA всегда у нижнего края, но остаётся в потоке,
       поэтому не вылезает за пределы плитки (в отличие от space-between). */
    .jv-promo-blocks .promo-list-items .promo-list-item .promo-cta {
        margin: auto 0 0 !important;
        font-size: 13px !important;
    }
    /* height:auto — тема даёт img height:100% (07-footer.css ≤1860), из-за чего
       бокс картинки всегда 90% высоты плитки, а неквадратный объект «висел»
       по центру этого бокса вместо нижнего края. */
    .jv-promo-blocks .promo-list-items .promo-list-item img {
        height: auto !important;
        max-width: 190px !important;
        max-height: 78% !important;
        right: 6px !important;
        bottom: 0 !important;
        object-fit: contain !important;
    }
}

/* Узкий десктоп 992–1279 (#229 «текст вылезает за край» на 1203px):
   колонка текста узкая — уменьшаем кегль описания и резерв под картинку.
   Селекторы с #common-home — чтобы перебить ID-правила типографики
   главной в custom.css (p 16px), у обычных классов специфичность ниже. */
@media only screen and (min-width: 992px) and (max-width: 1279px) {
    #common-home .jv-promo-blocks .promo-list-item,
    .jv-promo-blocks .promo-list-items .promo-list-item {
        padding-left: 20px !important;
        padding-right: 150px !important;
        height: auto !important;
        min-height: 210px !important;
    }
    #common-home .jv-promo-blocks .promo-list-item h3,
    .jv-promo-blocks .promo-list-items .promo-list-item h3 {
        font-size: 19px !important;
        line-height: 1.2 !important;
        margin: 0 0 8px !important;
    }
    #common-home .jv-promo-blocks .promo-list-item p,
    .jv-promo-blocks .promo-list-items .promo-list-item p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 0 0 12px !important;
        max-width: 100% !important;
    }
    #common-home .jv-promo-blocks .promo-list-item img,
    .jv-promo-blocks .promo-list-items .promo-list-item img {
        max-width: 138px !important;
        max-height: 70% !important;
        height: auto !important;
    }
}
/* #284: картинки промо-плиток были прижаты к нижнему краю. У «Освещения по типу
   помещения» объект низкий (95px против 190px у соседей) и висел у самого низа —
   плитка читалась как незаверстанная. Центрируем по вертикали: у высоких
   картинок сдвиг незаметен, низкая встаёт в оптическую середину.
   transform у самой картинки свободен — hover двигает плитку (.promo-list-item). */
.jv-promo-blocks .promo-list-items .promo-list-item img,
#common-home .jv-promo-blocks .promo-list-item img {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
}

/* #373: подъём плиток отключаем при системном «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  .jv-promo-blocks .promo-list-item { transition: none; }
  .jv-promo-blocks .promo-list-item:hover { transform: none; }
}

/* ============================================================
   #574 · короткая подпись CTA на мобилке
   На десктопе показываем текст из админки; на ≤767px у двух квадратных
   плиток («Проектная заявка», «Просвещение») он длиннее ширины плитки и
   налезает на картинку — там печатаем «В раздел». Широкую плитку
   калькулятора не трогаем: места хватает.
   ============================================================ */
.jv-promo-blocks .promo-cta__short { display: none; }

@media only screen and (max-width: 767px) {
    .jv-promo-blocks .promo-list-items .promo-list-item:not([href*="calc"]):not([href*="kalk"]) .promo-cta__full {
        display: none !important;
    }
    .jv-promo-blocks .promo-list-items .promo-list-item:not([href*="calc"]):not([href*="kalk"]) .promo-cta__short {
        display: inline !important;
    }
}

/* #680 (19.08, мобилка): картинку промо-плитки прижимаем к нижней кромке.
   ⚠️ Это отменяет #284, где её как раз подняли в оптический центр: у «Освещения
   по типу помещения» объект низкий и висел у самого низа. Заказчик 19.08 просит
   обратное — «прижать к низу карточки». Отмена ограничена мобилкой, на десктопе
   центрирование #284 остаётся.
   Заодно снимаем радиус у самой картинки: карточка скруглена на 16px и режет
   содержимое по своей форме, а собственный радиус PNG с белым фоном давал
   белые уголки поверх скругления («убрать белые точки на углах»). */
@media (max-width: 767px) {
  .jv-promo-blocks .promo-list-items .promo-list-item img,
  #common-home .jv-promo-blocks .promo-list-item img {
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
  }
}