/* ==========================================================================
   Blog: article content + app-style phone layout  (Oct 2026)
   - Section 1 applies at every width: makes CKEditor content safe to display
     (tables, images, videos, long links) and keeps the blog list look on desktop.
   - Section 2 applies to phones only (<= 768px, the site's mobile breakpoint).
   Desktop and laptop layouts are otherwise unchanged.
   ========================================================================== */

/* ---------- 1. All widths ---------- */
.blog-article .content { overflow-wrap: break-word; }
.blog-article .content a { overflow-wrap: anywhere; }
.blog-article .content img { max-width: 100%; height: auto; display: block; border-radius: 12px; }
.blog-article .content figure { margin: 22px 0; }
.blog-article .content .table-responsive {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin: 18px 0 22px; border: 1px solid #e4e8ef; border-radius: 12px;
}
.blog-article .content table { width: 100%; border-collapse: collapse; margin: 0; font-size: 16px; line-height: 1.6; }
.blog-article .content th,
.blog-article .content td {
    padding: 11px 14px; text-align: left; vertical-align: top;
    border-bottom: 1px solid #e4e8ef; min-width: 110px;
}
.blog-article .content tr > :not(:last-child) { border-right: 1px solid #e4e8ef; }
.blog-article .content tbody tr:last-child > * { border-bottom: 0; }
.blog-article .content thead th,
.blog-article .content thead td { background: #f3f6fb; color: #111827; font-weight: 600; }
.blog-article .content .embed-video { position: relative; aspect-ratio: 16 / 9; margin: 22px 0; }
.blog-article .content .embed-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.blog-article .content blockquote {
    margin: 22px 0; padding: 12px 16px; background: #f5f8ff;
    border-left: 4px solid var(--primary-color1, #3366cc); border-radius: 0 10px 10px 0;
}
.blog-article .content pre { overflow-x: auto; }
.blog-article .share-links .whatsapp { background: #25d366 !important; }
.blog-article .share-wa { display: none; }              /* WhatsApp share: phones only */
.blog-article .post-meta-line .meta-sep { margin: 0 6px; color: #9aa3b2; }

/* blog list: category label (was a dead link) keeps its desktop look */
.blog-listing .meta-name h2 span { display: block; color: #eee; }
@media (min-width: 768px) and (max-width: 991px) {
    .blog-listing .meta-name h2 span { display: none; }
}

/* ---------- 2. Phones ---------- */
@media (max-width: 768px) {

    /* compact top banner on blog pages */
    .blog-banner .inner-banner { min-height: 0; padding: 34px 0 26px; }
    .blog-banner .inner-banner .down-arrow-icon { display: none; }
    .blog-banner .inner-banner-title { font-size: 28px; line-height: 1.2; margin-bottom: 6px; }
    .blog-banner--post .inner-banner-title { display: none; }   /* the article shows its own title */
    .blog-banner--post .inner-banner { padding: 14px 0 !important; }
    .blog-banner .breadcrumb { margin: 0; flex-wrap: nowrap; justify-content: center; gap: 6px !important; }
    .blog-banner .breadcrumb .breadcrumb-item { font-size: 14px; line-height: 1.4; white-space: nowrap; }
    .blog-banner .breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 12px; }
    .blog-banner .breadcrumb .breadcrumb-item + .breadcrumb-item::after { top: 50%; transform: translateY(-50%); width: 4px; height: 4px; }
    .blog-banner--post .breadcrumb .breadcrumb-item.active { display: none; }   /* full title is right below */

    /* ---------- article page ---------- */
    .blog-article .home-blog { padding-top: 14px !important; padding-bottom: 24px !important; padding-left: 12px; padding-right: 12px; }
    .blog-article .grid-cards { display: flex; flex-direction: column; gap: 16px; }
    .blog-article .post-cards, .blog-article .side-bar { width: 100%; margin: 0; }

    .blog-article .large-card {
        border-radius: 18px; overflow: hidden; margin: 0;
        box-shadow: 0 4px 18px rgba(16, 38, 76, .07);
    }
    .blog-article .post-img { position: relative; margin: 0; }
    .blog-article .post-img img.card-img-top {
        width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
        border-radius: 0; display: block;
    }
    .blog-article .post-img .post-category {
        position: static; display: inline-block; margin: 16px 18px 0;
        font-size: 12px; line-height: 1; padding: 7px 12px; border-radius: 999px;
    }
    .blog-article .large-card .card-inner { padding: 12px 18px 24px !important; }
    .blog-article h1.post-title {
        font-size: 24px !important; line-height: 1.3 !important; letter-spacing: -.2px;
        margin: 6px 0 12px !important; word-break: normal; overflow-wrap: break-word;
    }

    /* date line above a single row of round share buttons */
    .blog-article .card-inner > .d-flex.justify-content-between {
        flex-direction: column-reverse; align-items: flex-start !important;
        gap: 12px; margin: 0 0 18px !important;
    }
    .blog-article .card-inner > .d-flex.justify-content-between > .mt-4 { margin-top: 0 !important; width: 100%; }
    .blog-article .post-author .date > div { margin: 0 !important; font-size: 13.5px; color: #6b7280; align-items: flex-start !important; }
    .blog-article .post-author .date svg { flex: 0 0 auto; margin-top: 2px; }
    .blog-article .post-author, .blog-article .post-author .date { width: 100%; }
    .blog-article .post-meta-line { line-height: 1.6; display: flex; flex-wrap: wrap; align-items: center; min-width: 0; flex: 1 1 auto; }
    .blog-article .post-meta-line > time,
    .blog-article .post-meta-line .meta-upd,
    .blog-article .post-meta-line .meta-read { white-space: nowrap; }
    .blog-article .share-links { display: flex; flex-wrap: nowrap; gap: 10px; margin: 0; padding: 0; float: none; }
    .blog-article .share-links > li { margin: 0; display: block; }
    .blog-article .share-wa { display: block; }
    .blog-article .share-links li a {
        width: 42px; height: 42px; padding: 0; margin: 0; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }
    .blog-article .share-links li a i { margin: 0; font-size: 18px; }
    .blog-article .share-links .lbl { display: none; }

    .blog-article .post-excerpt {
        font-size: 16.5px; line-height: 1.6; color: #374151; font-weight: 500;
        margin: 0 0 14px !important;
    }
    .blog-article .card-inner > hr { margin: 0 0 18px; opacity: .12; }

    /* readable article text */
    .blog-article .content { font-size: 16.5px; line-height: 1.75; color: #1f2937; }
    .blog-article .content p,
    .blog-article .content li {
        font-size: inherit; line-height: inherit; color: inherit;
        text-align: left !important; letter-spacing: 0;
    }
    .blog-article .content p { margin: 0 0 14px; }
    .blog-article .content h2 {
        font-size: 21px; line-height: 1.35; color: #111827; font-weight: 700;
        margin: 30px 0 10px; letter-spacing: -.1px;
    }
    .blog-article .content h3 { font-size: 18px; line-height: 1.4; color: #111827; margin: 24px 0 8px; }
    .blog-article .content h4,
    .blog-article .content h5,
    .blog-article .content h6 { font-size: 16.5px; line-height: 1.45; color: #111827; margin: 20px 0 8px; }
    .blog-article .content > :first-child { margin-top: 0; }
    .blog-article .content ul,
    .blog-article .content ol { margin: 0 0 16px; }
    .blog-article .content ul { padding-left: 0; }
    .blog-article .content ol { padding-left: 0; list-style: none; counter-reset: art-ol; }
    .blog-article .content li { margin: 0 0 8px; }
    .blog-article .content ul > li { position: relative; padding-left: 22px; }
    .blog-article .content ul > li::before { top: .68em; width: 8px; height: 8px; border-radius: 2px; }
    .blog-article .content ol > li { position: relative; padding-left: 36px; margin-top: 0; counter-increment: art-ol; }
    .blog-article .content ol > li::before {
        content: counter(art-ol); left: 0; top: .15em; width: 24px; height: 24px; border-radius: 50%;
        background: var(--primary-color1, #3965ad); color: #fff; font-size: 13px; font-weight: 600; line-height: 1;
        display: flex; align-items: center; justify-content: center;
    }
    .blog-article .content li > ul,
    .blog-article .content li > ol { margin: 8px 0 0; }
    .blog-article .content strong,
    .blog-article .content b { color: #111827; }
    .blog-article .content table { font-size: 14.5px; }
    .blog-article .content th,
    .blog-article .content td { padding: 10px 12px; }
    .blog-article .content figure { margin: 18px 0; }

    /* sidebar cards below the article */
    .blog-article .side-bar .card { border-radius: 18px; margin: 0 0 16px; box-shadow: 0 4px 18px rgba(16, 38, 76, .06); }
    .blog-article .side-bar .card-inner { padding: 18px !important; }
    .blog-article .side-bar .post-heading { margin: 0; padding: 0; }
    .blog-article .side-bar .post-heading h3 { font-size: 18px; margin: 0 0 6px; }
    .blog-article .side-bar .post-row { margin: 8px 0 0; padding: 0; }
    .blog-article .side-bar .post-heading p { font-size: 14px; line-height: 1.55; margin: 6px 0 0; }
    .blog-article .side-bar .post-column { padding: 12px 0; margin: 0; border-bottom: 1px solid #eef1f5; }
    .blog-article .side-bar .post-column:last-child { border-bottom: 0; padding-bottom: 0; }
    .blog-article .side-bar .post-column .primary-btn { font-size: 11px; padding: 5px 10px; border-radius: 999px; line-height: 1; }
    .blog-article .side-bar .post-title2 { font-size: 15px; line-height: 1.45; margin: 8px 0 0; }
    .blog-article .side-bar .blog-widget-body { margin-top: 12px; }
    .blog-article .side-bar .follow-list { gap: 12px !important; margin: 0; padding: 0; }

    /* previous / next as tappable cards */
    .blog-article .row.mt-5 { margin-top: 0 !important; }
    .blog-article .row.mt-5 > [class*="col-"] { width: 100%; }
    .blog-article .post-pagination {
        display: grid; gap: 12px; border: 0; padding: 0; margin: 0;
    }
    .blog-article .post-pagination::before,
    .blog-article .post-pagination::after { display: none; }
    .blog-article .post-pagination a {
        display: block; width: 100%; float: none; margin: 0; text-align: left !important;
        background: #fff; border-radius: 16px; padding: 14px 16px;
        box-shadow: 0 4px 18px rgba(16, 38, 76, .06);
    }
    .blog-article .post-pagination a span { font-size: 11px; letter-spacing: 1px; color: #6b7280; }
    .blog-article .post-pagination a h6 { font-size: 15px; line-height: 1.45; margin: 6px 0 0; text-align: left !important; }

    /* ---------- blog list ---------- */
    .blog-listing { padding-top: 34px !important; }
    .blog-listing .section-title2 h1 { font-size: 26px; margin-bottom: 18px; }
    .blog-listing .main-content-area { padding-bottom: 30px; }
    .blog-listing .blog-area > .container { padding-left: 12px; padding-right: 12px; }
    .blog-listing .post-style1 {
        margin: 0 0 18px !important; padding: 0 !important;
        background: #fff; border-radius: 18px; overflow: hidden;
        box-shadow: 0 4px 18px rgba(16, 38, 76, .08);
    }
    .blog-listing .post-style1 > [class*="col-"] { padding: 0; width: 100%; }
    .blog-listing .post-style1 .thumb-image { left: 0 !important; right: auto !important; }
    .blog-listing .post-style1 .thumb-image img {
        width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; object-fit: cover; display: block;
    }
    .blog-listing .post-style1 .details { padding: 16px 18px 18px !important; margin: 0; height: auto; }
    .blog-listing .post-style1 .meta-name h2 { font-size: 12px; line-height: 1; margin: 0 0 10px; }
    .blog-listing .post-style1 .meta-name h2 span {
        display: inline-block; color: var(--primary-color1, #3366cc); background: #eef3ff;
        padding: 6px 10px; border-radius: 999px; font-weight: 600; letter-spacing: .3px;
    }
    .blog-listing .post-style1 .title h2 { font-size: 19px; line-height: 1.35; margin: 0; font-weight: 600; }
    .blog-listing .post-style1 .title h2 a { color: #111827; }
    .blog-listing .post-style1 .content { margin: 8px 0 12px; line-height: 1.6; }
    .blog-listing .post-style1 .content p {
        font-size: 15px; line-height: 1.6; color: #4b5563; margin: 0;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    }
    .blog-listing .post-style1 .bottom-area {
        display: flex; justify-content: space-between; align-items: center;
        padding: 12px 0 0 !important; border-top: 1px solid #eef1f5;
    }
    .blog-listing .post-style1 .bottom-area::after { display: none; }
    .blog-listing .post-style1 .bottom-area > * { float: none; margin: 0; }
    .blog-listing .post-style1 .details > :last-child { margin-bottom: 0; }
}