/* ==========================================================================
   Блоки контента для страниц услуг: карточки, аккордеон «Частые вопросы», подсказки.
   Правки от 27.07.26 («Просевшие страницы»).

   Подключение: header.php -> <link ... /assets/css/svc-blocks.css>
   Разметка вставляется в контент страницы через админку (см. README правок).

   ВАЖНО: в шаблоне сайта задано глобальное `* { list-style: none; margin: 0;
   padding: 0 }`, а также `.tabscont > div { display: none }` — поэтому все
   отступы, маркеры списков и display заданы здесь явно, а корневой тег блока
   это <section>, а не <div>.
   ========================================================================== */

.svc-block {
    display: block;
    margin: 40px 0;
    color: #272425;
    font-family: 'Istok Web', sans-serif;
    line-height: 1.55;
}

/* страховка на случай, если блок положат в <div> внутри .tabscont */
.tabscont > .svc-block,
.tabscont > div.svc-block {
    display: block;
}

.svc-block h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 20px;
    color: #272425;
}

.svc-block > p {
    margin: 0 0 15px;
}

/* --------------------------------------------------------------------------
   Карточки (варианты, задачи, форматы, «что можно напечатать» и т.п.)
   -------------------------------------------------------------------------- */

.svc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
    margin: 0 0 10px;
}

.svc-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6eef7;
    border-radius: 14px;
    padding: 24px 26px;
    box-shadow: 0 5px 10px rgba(37, 117, 252, 0.19);
    transition: box-shadow .2s ease, transform .2s ease;
}

.svc-card:hover {
    box-shadow: 0 8px 20px rgba(37, 117, 252, 0.26);
    transform: translateY(-2px);
}

.svc-card h3 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px;
    color: #272425;
    padding-left: 16px;
    position: relative;
}

.svc-card h3:before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4CC3FF;
}

.svc-card p {
    margin: 0 0 10px;
}

.svc-card p:last-child,
.svc-card ul:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Списки внутри блоков
   -------------------------------------------------------------------------- */

.svc-block ul {
    list-style: disc outside;
    margin: 0 0 12px;
    padding-left: 20px;
}

.svc-block ul li {
    list-style: disc outside;
    margin: 0 0 6px;
}

.svc-block ul li:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Подсказка / призыв «не знаете, что выбрать»
   -------------------------------------------------------------------------- */

.svc-note {
    display: block;
    margin: 20px 0 0;
    padding: 22px 26px;
    border-left: 4px solid #4CC3FF;
    border-radius: 0 12px 12px 0;
    background: rgba(76, 195, 255, 0.09);
}

.svc-note strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.svc-note p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Частые вопросы (аккордеон на <details>, без JS)
   -------------------------------------------------------------------------- */

.svc-faq {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(37, 117, 252, 0.19);
    background: #fff;
}

.svc-faq details {
    display: block;
    border-bottom: 1px solid #e6eef7;
}

.svc-faq details:last-child {
    border-bottom: 0;
}

/* именно display:block — flex на <summary> ломает раскрытие в старых Safari */
.svc-faq summary {
    display: block;
    list-style: none;
    cursor: pointer;
    padding: 20px 60px 20px 26px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    position: relative;
    transition: color .2s ease, background .2s ease;
}

.svc-faq summary::-webkit-details-marker {
    display: none;
}

.svc-faq summary::marker {
    content: "";
}

.svc-faq summary:hover {
    color: #2675FC;
    background: rgba(76, 195, 255, 0.06);
}

/* «плюс», который превращается в «минус» */
.svc-faq summary:after,
.svc-faq summary:before {
    content: "";
    position: absolute;
    right: 26px;
    background: #4CC3FF;
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease;
}

.svc-faq summary:before {
    top: 29px;
    width: 16px;
    height: 2px;
}

.svc-faq summary:after {
    top: 22px;
    right: 33px;
    width: 2px;
    height: 16px;
}

.svc-faq details[open] > summary {
    color: #2675FC;
}

.svc-faq details[open] > summary:after {
    transform: rotate(90deg);
    opacity: 0;
}

.svc-faq .svc-faq__answer {
    padding: 0 26px 22px;
}

.svc-faq .svc-faq__answer p {
    margin: 0 0 10px;
}

.svc-faq .svc-faq__answer p:last-child,
.svc-faq .svc-faq__answer ul:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Мобильные
   -------------------------------------------------------------------------- */

@media (max-width: 1360px) {
    .svc-block {
        padding: 0 20px;
    }
}

@media (max-width: 767px) {
    .svc-block {
        margin: 30px 0;
    }

    .svc-block h2 {
        font-size: 22px;
        margin-bottom: 16px;
    }

    .svc-cards {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .svc-card {
        padding: 18px 20px;
        border-radius: 12px;
    }

    .svc-card h3 {
        font-size: 17px;
    }

    .svc-faq summary {
        font-size: 16px;
        padding: 16px 50px 16px 18px;
    }

    .svc-faq summary:before {
        right: 18px;
        top: 25px;
    }

    .svc-faq summary:after {
        right: 25px;
        top: 18px;
    }

    .svc-faq .svc-faq__answer {
        padding: 0 18px 18px;
        font-size: 15px;
    }

    .svc-note {
        padding: 18px 20px;
    }
}