/*
 * content.css — small compat layer for the figi content pages.
 * ============================================================
 * Loaded (after styles.css / landing.css) by the pages module views:
 *   /blog, /blog/<slug>          (blog.css carries the draft's own
 *                                 section.blog-single rules)
 *   /buy-* , /smm-panel-*        (SEO landing fragments)
 *
 * Only additions and frame fixes live here; the heavy lifting stays in the
 * theme stylesheets so these pages keep matching the landing look.
 */

/* --- page top offset under the fixed rsp bar (45px) + nav (65px) ------- */
.figi-top {
    padding-top: 150px !important;
}
@media (max-width: 767px) {
    .figi-top {
        padding-top: 136px !important;
    }
}

/* --- blog listing: the landing .blog-card with an h3 title -------------- */
.blog-card h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--dark, #1a1d23);
    line-height: 1.4;
    margin-bottom: 8px;
}
.blog-card h3 a {
    color: inherit;
    text-decoration: none;
}
.blog-card h3 a:hover {
    color: var(--blue, #2563eb);
    text-decoration: none;
}
.blog-thumb-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- signup banner used inside the extracted articles ------------------- */
.figipanel-blog-banner {
    margin: 24px -15px;
    display: block;
}
.figipanel-blog-banner a {
    display: block;
}
.figipanel-blog-banner img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    cursor: pointer;
}
@media (min-width: 768px) {
    .figipanel-blog-banner {
        margin: 24px 0;
    }
}

/* --- blog article frame ------------------------------------------------ */
.blog-content .image-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}
.blog-content .post-info p {
    margin-bottom: 8px;
}
.blog-content .details img {
    max-width: 100%;
    height: auto;
}
.blog-content .details table {
    width: 100%;
}
.blog-content .details a {
    color: var(--blue, #2563eb);
}

/* --- blog sidebar ------------------------------------------------------ */
.side-bar .widget .title {
    font-size: 16px;
    font-weight: 800;
    color: var(--dark, #1a1d23);
    margin-bottom: 14px;
}
.side-bar .widget-post {
    margin-bottom: 18px;
    overflow: hidden;
}
.side-bar .widget-post .box-image {
    float: left;
}
.side-bar .widget-post .box-image img {
    width: 70px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
}
.side-bar .widget-post .title {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 2px;
}
@media (min-width: 992px) {
    .side-bar {
        position: sticky;
        top: 130px;
        align-self: flex-start;
    }
}