/* Start:/local/templates/store_market4it/components/bitrix/news.list/solutions/style.css?17919800396168*/
/* =========================================================
   SOLUTIONS PAGE (/solutions/)
   Стили разводящей страницы «Готовые серверные решения».
   Парадигма — как у solutions_custom.css (статьи решений):
   родительский блок с дизайн-токенами, БЭМ-подобные потомки.
   Применяется только внутри обёртки .solutions-page.
   ========================================================= */

.solutions-page {
    --sp-text: var(--color-text);
    --sp-muted: var(--color-muted);
    --sp-heading: var(--color-heading);
    --sp-border: var(--color-border);
    --sp-bg: var(--color-bg);
    --sp-white: var(--color-white);
    --sp-accent: var(--color-accent);
    --sp-accent-hover: var(--color-accent-hover);
    --sp-accent-light: var(--color-accent-light);

    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 32px 24px 64px;

    color: var(--sp-text);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.7;

    box-sizing: border-box;
}

.solutions-page *,
.solutions-page *::before,
.solutions-page *::after {
    box-sizing: border-box;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

body .solutions-page h2 {
    margin: 64px 0 24px;

    color: var(--sp-heading);

    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.solutions-page h3 {
    margin: 0;

    color: var(--sp-heading);

    line-height: 1.35;
    letter-spacing: -0.01em;
}

.solutions-page p {
    margin: 0 0 20px;
}

.solutions-page ul {
    margin: 0 0 28px;
    padding-left: 28px;
}

.solutions-page li {
    margin-bottom: 12px;
    padding-left: 4px;
}

.solutions-page li::marker {
    color: var(--sp-accent);
    font-weight: 700;
}


/* =========================================================
   TABLES (контент страницы)
   ========================================================= */

.solutions-page .solutions-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.solutions-page .custom-table th,
.solutions-page .custom-table td {
    padding: 12px 16px;

    border: 1px solid var(--sp-border);

    text-align: left;
}

.solutions-page .custom-table th {
    background: #f1f5f9;

    color: var(--sp-heading);

    font-size: 15px;
    font-weight: 700;
}


/* =========================================================
   CARDS GRID
   ========================================================= */

.solutions-page .solutions-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;

    margin: 28px 0;
    padding: 0;
}

/* десктоп: 4 карточки в ряд */
@media (min-width: 992px) {
    .solutions-page .solutions-container {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* =========================================================
   CARD
   ========================================================= */

.solutions-page .solution-item {
    display: flex;
    flex-direction: column;

    max-width: 400px;
    min-height: 220px;
    padding: 20px;

    border: 1px solid var(--sp-border);
    border-radius: 12px;

    background: var(--sp-white);

    box-shadow: 0 4px 18px rgba(15, 23, 42, .04);

    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.solutions-page .solution-item:hover {
    border-color: var(--sp-accent);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .1);
    transform: translateY(-3px);
}

.solutions-page .solution-item:focus-within {
    border-color: var(--sp-accent);
    box-shadow: 0 0 0 3px rgba(242, 63, 39, .2);
}


/* ---------- Карточка: изображение ---------- */

.solutions-page .solution-item__image-link {
    display: block;
    margin: 0 0 12px;

    border-radius: 8px;
    overflow: hidden;
}

.solutions-page .solution-item__image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 170px;
    margin: 0 auto;
    /* object-fit: cover; */
    /* aspect-ratio: 1 / 1; */

    transition: filter var(--hover-duration) ease;
}

.solutions-page .solution-item:hover .solution-item__image,
.solutions-page .solution-item:focus-within .solution-item__image {
    filter: brightness(.94);
}


/* ---------- Карточка: тело ---------- */

.solutions-page .solution-item__body {
    flex: 1 1 auto;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.solutions-page .solution-item__title {
    font-size: clamp(18px, 1.8vw, 21px);

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.solutions-page .solution-item__title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--hover-duration) ease;
}

.solutions-page .solution-item__title a:hover {
    color: var(--sp-accent-hover);
}

.solutions-page .solution-item__title a:focus-visible {
    outline: 2px solid var(--sp-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.solutions-page .solution-item__text {
    margin: 0;

    color: var(--sp-muted);

    font-size: 15px;
    line-height: 1.55;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ---------- Карточка: «Подробнее» ---------- */

.solutions-page .solution-item__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 16px;
    padding-top: 14px;

    border-top: 1px solid #f1f5f9;

    color: var(--sp-accent);

    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.solutions-page .solution-item__more:hover {
    color: var(--sp-accent-hover);
}

.solutions-page .solution-item__arrow {
    transition: transform .2s ease;
}

.solutions-page .solution-item__more:hover .solution-item__arrow {
    transform: translateX(4px);
}

/* End */
/* /local/templates/store_market4it/components/bitrix/news.list/solutions/style.css?17919800396168 */