/* blog.css — страницы раздела «Материалы» */

.blog-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 110px 20px 120px;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

/* ---------- хлебные крошки ---------- */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #7FA3C0;
}

.crumbs a {
    color: #9EC0DA;
    text-decoration: none;
}

.crumbs a:hover { color: #fff; }
.crumbs span { color: #4E7A9B; }

/* ---------- шапка раздела ---------- */
.blog-eyebrow,
.post-cta-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #FF3E79;
}

.blog-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-head h1 {
    font-size: clamp(30px, 6vw, 42px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

.blog-lede {
    font-size: 18px;
    line-height: 1.6;
    color: #BBD4E8;
    margin: 0;
}

.blog-lede a { color: #FF3E79; }

/* ---------- карточки статей ---------- */
.cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 22px;
    border: 1px solid #12486E;
    border-radius: 14px;
    background: #03284F;
    text-decoration: none;
    color: #EAF3FB;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.card:hover {
    border-color: #0288D1;
    background: #07305C;
}

.card-meta {
    font-size: 13px;
    color: #7FA3C0;
}

.card h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
}

.card p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: #BBD4E8;
}

.card-more {
    font-size: 14px;
    font-weight: 700;
    color: #FF3E79;
}

/* ---------- статья ---------- */
.post {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.post-meta {
    font-size: 14px;
    color: #7FA3C0;
}

.post h1 {
    font-size: clamp(28px, 5.6vw, 40px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

.post-lead {
    font-size: 19px;
    line-height: 1.6;
    color: #D6E6F4;
    margin: 0;
    padding-left: 16px;
    border-left: 3px solid #FF3E79;
}

.post h2 {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 16px 0 0;
}

.post h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 10px 0 0;
}

.post p {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: #C8DEEF;
}

.post ul {
    margin: 0;
    padding-left: 22px;
    font-size: 17px;
    line-height: 1.75;
    color: #C8DEEF;
}

.post li { margin-bottom: 6px; }

.post a { color: #FF3E79; }

.post b { color: #fff; }

.post code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 15px;
    padding: 2px 6px;
    border-radius: 5px;
    background: #07305C;
    border: 1px solid #12486E;
}

.post blockquote {
    margin: 0;
    padding: 14px 18px;
    border-radius: 11px;
    background: #07305C;
    border: 1px solid #12486E;
    font-size: 16.5px;
    line-height: 1.6;
    color: #D6E6F4;
}

/* ---------- блок с призывом ---------- */
.post-cta {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 24px;
    border: 1px solid #12486E;
    border-radius: 14px;
    background: linear-gradient(160deg, #07305C, #03284F 70%);
}

.post-cta h2 {
    font-size: 23px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
}

.post-cta p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: #BBD4E8;
}

.post-cta-row {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.post-btn {
    flex: 1 1 auto;
    padding: 14px 22px;
    border-radius: 11px;
    background: #FF3E79;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background 0.18s ease;
}

.post-btn:hover { background: #cf285a; }

.post-btn--ghost {
    background: transparent;
    border: 1px solid #12486E;
    font-weight: 600;
}

.post-btn--ghost:hover { background: #07305C; }

.post-back {
    align-self: flex-start;
    font-size: 15px;
    color: #9EC0DA;
    text-decoration: none;
}

.post-back:hover { color: #fff; }

.blog-wrap :focus-visible {
    outline: 2px solid #FF3E79;
    outline-offset: 3px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .blog-wrap { padding: 96px 16px 96px; }
    .post p, .post ul { font-size: 16.5px; }
}