/* MonardX Blog. Own prefix (blg-), no dependency on other stylesheets. */

.blg-container { max-width: 1140px; margin: 0 auto; padding: 0 2rem; }
.blg-narrow { max-width: 760px; }
.blg-section { padding: 3rem 0 4rem; background: #ffffff; }

.blg-label {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: #6C63FF; margin: 0 0 0.6rem;
}
.blg-label a { color: inherit; text-decoration: none; }
.blg-label a:hover { text-decoration: underline; }
.blg-dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #C8CAD8; margin: 0 0.5rem; vertical-align: middle; }

/* Hero */
.blg-hero { background: #12153D; color: #ffffff; padding: 130px 0 3.5rem; }
.blg-hero h1 em { font-style: normal; color: #1EC86A; }
.blg-hero .blg-label { color: #1EC86A; }
.blg-hero h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; line-height: 1.12; margin: 0 0 1rem;
}
.blg-hero-sub { font-family: 'DM Sans', sans-serif; font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,0.72); max-width: 640px; margin: 0; }

/* Filter row */
.blg-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 2rem; }
.blg-chip {
    display: inline-flex; align-items: center; padding: 6px 14px;
    font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 600;
    color: #4A4E7A; background: #ffffff; border: 1px solid #D0D3E8; border-radius: 100px;
    text-decoration: none; transition: all 0.15s;
}
.blg-chip:hover { border-color: #6C63FF; color: #6C63FF; }
.blg-chip-active { color: #6C63FF; background: rgba(108,99,255,0.08); border-color: rgba(108,99,255,0.3); }
.blg-search { margin-left: auto; display: inline-flex; align-items: center; border: 1px solid #D0D3E8; border-radius: 100px; background: #ffffff; padding: 0 4px 0 12px; transition: border-color 0.15s; }
.blg-search:focus-within { border-color: #6C63FF; }
.blg-search input { border: none; outline: none; background: transparent; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: #12153D; width: 180px; padding: 7px 0; }
.blg-search input::placeholder { color: #8A8FAA; }
.blg-search button { border: none; background: #6C63FF; color: #ffffff; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.blg-search button:hover { background: #1EC86A; }
.blg-feed-link { margin-left: 0.75rem; display: inline-flex; align-items: center; gap: 0.35rem; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 600; color: #F26522; text-decoration: none; }
.blg-feed-link:hover { color: #d9531a; }

/* Card grid */
.blg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.75rem; }
.blg-card {
    display: flex; flex-direction: column; background: #ffffff; border: 1px solid #E2E4ED; border-radius: 12px;
    overflow: hidden; text-decoration: none; color: #12153D; transition: transform 0.2s, box-shadow 0.2s;
}
.blg-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(18,21,61,0.10); }
.blg-card-image { aspect-ratio: 1200 / 630; background: #F0EFFE; }
.blg-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blg-card-placeholder {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #12153D 0%, #2a2f6b 100%);
}
.blg-card-placeholder span { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: #1EC86A; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; }
.blg-card-body { padding: 1.25rem 1.4rem 1.5rem; }
.blg-card-meta { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; color: #8A8FAA; margin: 0 0 0.5rem; }
.blg-card-cat { color: #6C63FF; font-weight: 600; }
.blg-card h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.5rem; }
.blg-card-summary { font-family: 'DM Sans', sans-serif; font-size: 0.93rem; line-height: 1.55; color: #4A4E7A; margin: 0; }
.blg-empty { font-family: 'DM Sans', sans-serif; color: #8A8FAA; padding: 2rem 0; }

/* Article */
.blg-preview-bar { background: #b8860b; color: #fff; text-align: center; font-family: 'DM Sans', sans-serif; font-size: 0.85rem; padding: 8px; }
.blg-article { background: #ffffff; padding-bottom: 1rem; }
.blg-article-header { padding: 130px 0 1.5rem; }
.blg-article-header h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; line-height: 1.15; color: #12153D; margin: 0 0 0.9rem;
}
.blg-article-meta { font-family: 'DM Sans', sans-serif; font-size: 0.88rem; color: #8A8FAA; margin: 0 0 1.75rem; }
.blg-article-image { width: 100%; height: auto; border-radius: 12px; display: block; }

.blg-body { font-family: 'DM Sans', sans-serif; font-size: 1.08rem; line-height: 1.75; color: #2B2F55; padding-top: 1.5rem; }
.blg-standfirst { font-size: 1.22rem; line-height: 1.6; color: #12153D; font-weight: 500; margin: 0 0 1.75rem; }
.blg-body h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.5rem; font-weight: 700; color: #12153D; margin: 2.25rem 0 0.75rem; line-height: 1.25; }
.blg-body h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.15rem; font-weight: 700; color: #12153D; margin: 1.5rem 0 0.4rem; }
.blg-body p { margin: 0 0 1.15rem; }
.blg-body ul, .blg-body ol { margin: 0 0 1.15rem 1.4rem; }
.blg-body li { margin-bottom: 0.4rem; }
.blg-body a { color: #6C63FF; }
.blg-body blockquote { margin: 1.5rem 0; padding: 0.9rem 1.2rem; background: #F0EFFE; border-left: 4px solid #6C63FF; border-radius: 6px; font-style: normal; }
.blg-body .blg-callout { background: #F0EFFE; border-left: 4px solid #6C63FF; padding: 0.9rem 1.2rem; border-radius: 6px; margin: 1.5rem 0; }
.blg-body table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: 0.95rem; }
.blg-body th, .blg-body td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid #E2E4ED; }
.blg-body th { color: #6C63FF; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.blg-body img { max-width: 100%; height: auto; border-radius: 8px; }

/* Related */
.blg-related { padding-top: 2rem; }
.blg-tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.9rem; }
.blg-tool-card {
    display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.1rem;
    border: 1px solid #D0D3E8; border-radius: 10px; text-decoration: none; color: #12153D;
    font-family: 'DM Sans', sans-serif; transition: border-color 0.2s;
}
.blg-tool-card:hover { border-color: #6C63FF; }
.blg-tool-card strong { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.98rem; }
.blg-tool-card span { font-size: 0.86rem; color: #4A4E7A; line-height: 1.45; }
.blg-term-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.blg-term {
    font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: #12153D; text-decoration: none;
    padding: 0.4rem 0.9rem; border: 1px solid #D0D3E8; border-radius: 6px; transition: border-color 0.2s;
}
.blg-term:hover { border-color: #6C63FF; color: #6C63FF; }
.blg-tags { padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.blg-tag { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; color: #8A8FAA; background: #F5F6FA; padding: 3px 10px; border-radius: 100px; }

/* Author */
.blg-author { display: flex; gap: 1rem; align-items: flex-start; padding: 2.25rem 2rem 2.5rem; margin-top: 2rem; border-top: 1px solid #E2E4ED; font-family: 'DM Sans', sans-serif; }
.blg-author img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.blg-author p { margin: 0 0 0.4rem; font-size: 0.95rem; line-height: 1.55; color: #4A4E7A; }
.blg-author a { color: #6C63FF; }
.blg-disclosure { font-size: 0.78rem; color: #8A8FAA; }


@media (max-width: 640px) {
    .blg-container { padding: 0 1.25rem; }
    .blg-hero { padding: 110px 0 2.5rem; }
    .blg-article-header { padding: 110px 0 1.5rem; }
    .blg-body { font-size: 1.02rem; }
    .blg-search { margin-left: 0; width: 100%; }
    .blg-search input { width: 100%; }
    .blg-feed-link { margin-left: 0; }
}