/* ─────────────────────────────────────────────────────────────
   Блок "Картки з Marquee" рендерить ту саму розмітку, що й блок
   Segmentation (.segmentation, .segment-card, .logo-marquee).
   Канонічні стилі цих класів — у blocks/segmentation/style.css.
   Тут лише те, що відрізняє цей блок.
   ───────────────────────────────────────────────────────────── */

/* 2 колонки — модифікатор segmentation-v2 з render.php */
.segmentation.segmentation-v2 .segments-grid {
    grid-template-columns: repeat(2, 1fr);
}

/* Список задач — цей блок виводить .segment-card__list
   (segmentation використовує .segment-card__tasks-content) */
.segment-card__list,
.segment-card__list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.segment-card__list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 14px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-main);
}

.segment-card__list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* Залишаємо підтримку старого .dot для зворотної сумісності */
.segment-card__list .dot {
    display: none;
}

/* Responsive: нижче 992px сітка стає горизонтальною каруселлю —
   канонічні стилі каруселі в blocks/segmentation/style.css.
   Скидаємо тут лише 2-колонковий модифікатор, щоб він
   не перебивав карусель своєю вищою специфічністю. */
@media (max-width: 992px) {
    .segmentation.segmentation-v2 .segments-grid {
        grid-template-columns: none;
    }
}