/* Blog pages — mobile reading & layout polish (list, category, detail) */

/* Preserve CKEditor inline formatting (colors, backgrounds, font styles) on blog detail */
.fa-layout--blog .blog-content a:not([style]) {
    color: #facc15;
}

.fa-layout--blog .blog-content [style*="color"] :is(a, strong, em, span, b, i, u):not([style]),
.fa-layout--blog .blog-content font[color] :is(a, strong, em, span, b, i, u):not([style]) {
    color: inherit;
}

.fa-layout--blog .blog-content strong:not([style]) {
    font-weight: 700;
    color: inherit;
}

@media (max-width: 768px) {
    .fa-layout--blog.adonis-fa-new-body {
        background: #121c30;
        color: #f4f7fb;
    }

    .fa-layout--blog .adonis-fa-new-main {
        overflow-x: clip;
    }

    /* ── Shared wrap padding ── */
    .fa-layout--blog .blog-wrap,
    .fa-layout--blog .blog-detail-wrap {
        padding-inline: clamp(1rem, 4.2vw, 1.25rem);
        padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
    }

    .fa-layout--blog .blog-detail-wrap {
        padding-top: calc(var(--fa-header-h, 88px) + 1rem);
    }

    .fa-layout--blog .blog-hero {
        padding-top: calc(var(--fa-header-h, 88px) + 1rem);
        padding-bottom: 0.75rem;
    }

    /* ── Detail: title block ── */
    .fa-layout--blog .blog-breadcrumb {
        font-size: 0.78rem;
        line-height: 1.7;
        margin-bottom: 1rem;
        color: #b8c4d9;
    }

    .fa-layout--blog .blog-title {
        font-size: clamp(1.35rem, 6.2vw, 1.75rem);
        line-height: 1.55;
        margin-bottom: 0.75rem;
        text-align: right;
    }

    .fa-layout--blog .blog-subtitle {
        font-size: clamp(1rem, 4.2vw, 1.15rem);
        line-height: 1.75;
        margin-bottom: 0.55rem;
        text-align: right;
    }

    .fa-layout--blog .blog-subtitle-3 {
        font-size: clamp(0.92rem, 3.6vw, 1rem);
        line-height: 1.8;
        margin-bottom: 0.75rem;
        text-align: right;
        color: #dbe4f0;
    }

    .fa-layout--blog .blog-meta {
        gap: 0.65rem;
        margin-bottom: 1.15rem;
        font-size: 0.82rem;
        line-height: 1.65;
        color: #b8c4d9;
    }

    .fa-layout--blog .blog-hero-img {
        border-radius: 14px;
        margin-bottom: 1.25rem;
    }

    /* ── Detail: article body — lighter panel for long reading ── */
    .fa-layout--blog .blog-content {
        font-size: 1rem;
        line-height: 2.05;
        color: #eef2f8;
        background: #18243c;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        padding: 1.15rem 1rem 1.25rem;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    }

    .fa-layout--blog .blog-content p {
        margin: 0 0 1.15rem;
        text-align: justify;
        text-align-last: right;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .fa-layout--blog .blog-content .blog-lead {
        font-size: 1.05rem;
        line-height: 1.95;
        padding: 1rem 0.95rem;
        margin-bottom: 1.25rem;
        background: rgba(255, 255, 255, 0.06);
    }

    .fa-layout--blog .blog-content h2 {
        font-size: clamp(1.15rem, 5vw, 1.35rem);
        line-height: 1.55;
        margin: 1.75rem 0 0.85rem;
        padding-bottom: 0.55rem;
        text-align: right;
    }

    .fa-layout--blog .blog-content h3 {
        font-size: clamp(1.05rem, 4.2vw, 1.15rem);
        line-height: 1.6;
        margin: 1.35rem 0 0.65rem;
        text-align: right;
    }

    .fa-layout--blog .blog-content ul,
    .fa-layout--blog .blog-content ol {
        margin: 0 0 1.15rem;
        padding-inline-start: 1.35rem;
        line-height: 2;
    }

    .fa-layout--blog .blog-content li {
        margin-bottom: 0.55rem;
        text-align: justify;
        text-align-last: right;
    }

    .fa-layout--blog .blog-content blockquote {
        margin: 0 0 1.15rem;
        padding: 0.95rem 1rem;
        line-height: 1.95;
        text-align: justify;
        text-align-last: right;
    }

    .fa-layout--blog .blog-content figcaption {
        font-size: 0.82rem;
        line-height: 1.7;
        text-align: center;
    }

    .fa-layout--blog .blog-content figure.blog-figure {
        margin: 1.25rem 0;
    }

    /* Inline body images — preserve natural aspect ratio (no forced 16:9 crop) */
    .fa-layout--blog .blog-content img,
    .fa-layout--blog .blog-content figure img,
    .fa-layout--blog .blog-content p img,
    .fa-layout--blog .blog-content > img {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        aspect-ratio: auto;
        object-fit: contain;
        display: block;
        margin-inline: auto;
    }

    .fa-layout--blog .blog-content figure {
        max-width: 100%;
        margin: 1.25rem 0;
    }

    .fa-layout--blog .blog-back {
        display: inline-flex;
        margin-top: 1.5rem;
        font-size: 0.95rem;
    }

    /* ── List / category hero ── */
    .fa-layout--blog .blog-hero h1,
    .fa-layout--blog .cat-hero-txt h1 {
        font-size: clamp(1.45rem, 6vw, 1.85rem);
        line-height: 1.5;
        text-align: right;
    }

    .fa-layout--blog .blog-hero p,
    .fa-layout--blog .cat-hero-txt p {
        font-size: 0.95rem;
        line-height: 2;
        text-align: justify;
        text-align-last: right;
        color: #cbd5e1;
        max-width: 100%;
    }

    .fa-layout--blog .blog-sec {
        padding: 1.75rem 0 2rem;
    }

    .fa-layout--blog .blog-sec-head {
        margin-bottom: 1.15rem;
    }

    .fa-layout--blog .blog-sec-head h2 {
        font-size: clamp(1.2rem, 5vw, 1.45rem);
        line-height: 1.45;
    }

    .fa-layout--blog .life-cat-card {
        min-height: 220px;
        border-radius: 18px;
    }

    .fa-layout--blog .life-cat-overlay {
        padding: 1.25rem 1.1rem;
    }

    .fa-layout--blog .life-cat-overlay h3 {
        font-size: clamp(1.15rem, 5vw, 1.35rem);
        line-height: 1.5;
    }

    .fa-layout--blog .life-cat-overlay p {
        font-size: 0.88rem;
        line-height: 1.95;
        text-align: justify;
        text-align-last: right;
    }

    .fa-layout--blog .blog-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .fa-layout--blog .blog-card-body {
        padding: 1rem 1.05rem 1.15rem;
    }

    .fa-layout--blog .blog-card-body h3 {
        font-size: 1rem;
        line-height: 1.75;
        margin-bottom: 0.65rem;
    }

    .fa-layout--blog .blog-card-body p {
        font-size: 0.88rem;
        line-height: 1.95;
        margin-bottom: 0.85rem;
    }

    .fa-layout--blog .cat-hero {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding-top: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .fa-layout--blog .cat-hero-img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .fa-layout--blog .cat-chips {
        gap: 0.45rem;
        padding: 1rem 0 0.5rem;
    }

    .fa-layout--blog .cat-chip {
        font-size: 0.82rem;
        padding: 0.45rem 0.85rem;
    }
}

@media (max-width: 420px) {
    .fa-layout--blog .blog-content {
        padding: 1rem 0.85rem 1.1rem;
        border-radius: 14px;
    }

    .fa-layout--blog .blog-content {
        font-size: 0.98rem;
        line-height: 2.1;
    }
}