/* blog.css — типография за тялото + дребни допълнения за блога. */

/* „articles-view-link" hover ефект (тъмната сянка зад бутона) — има го в
   app.min.css (началната), но липсва в main.css → репликираме го тук, за да
   са бутоните в блога идентични с тези на началната страница. */
.articles-view-link { position: relative; }
.articles-view-link::before {
    position: absolute; content: ""; width: 100%; height: 47px; z-index: -1;
    top: 5px; left: 3px; background-color: #104042; border-radius: 10px; transition: .4s;
}
.articles-view-link:hover::before { top: -4px; left: -3px; }

.blog-content { color: #4a5568; font-size: 1.075rem; line-height: 1.85; }
.blog-content > *:first-child { margin-top: 0; }
.blog-content h2 { font-size: 1.7rem; color: #104042; font-weight: 600; margin: 1.8rem 0 .9rem; }
.blog-content h3 { font-size: 1.4rem; color: #104042; font-weight: 600; margin: 1.5rem 0 .8rem; }
.blog-content h4 { font-size: 1.2rem; color: #104042; font-weight: 600; margin: 1.3rem 0 .6rem; }
.blog-content p { margin: 0 0 1.1rem; }
.blog-content a { color: #0d6efd; text-decoration: underline; }
.blog-content ul, .blog-content ol { margin: 0 0 1.1rem 1.4rem; }
.blog-content li { margin-bottom: .5rem; }
.blog-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 1.2rem 0; }
.blog-content blockquote {
    border-left: 4px solid #d7f25a; background: #f5f9fc;
    margin: 1.4rem 0; padding: 1rem 1.4rem; border-radius: 0 8px 8px 0; color: #104042;
}
.blog-content table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.blog-content th, .blog-content td { border: 1px solid #e2e8f0; padding: 10px 12px; text-align: left; }
.blog-content figure { margin: 1.2rem 0; }
.blog-content figure img { margin: 0; }

/* Корицата на детайла да не е прекалено висока */
.blog-content + a { margin-top: .5rem; }

/* ── Слотове за снимки — всички 3:2 (като оригиналите → без изрязване) ────── */
.blog-img-4x3,
.blog-list-img,
.blog-cover-l,
.blog-img-16x9 {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}
.blog-cover-l { border-radius: 12px; }