/* ==========================================================================
   LendSwift — Blog
   Square design language, token-driven for light and dark.
   ========================================================================== */

.blog-page { background: var(--ls-bg); color: var(--ls-text); }

.blog-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
}

.blog-page * { box-sizing: border-box; }

/* -------------------------------------------------------------------- Hero */

.blog-hero {
    background: linear-gradient(135deg, var(--ls-brand-700), var(--ls-brand-900));
    color: #fff;
    padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
    margin-bottom: var(--ls-space-10);
}

.blog-eyebrow {
    display: inline-block;
    font-size: var(--ls-text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    background: rgba(255, 255, 255, 0.16);
    margin-bottom: var(--ls-space-4);
}

.blog-hero h1 {
    margin: 0 0 var(--ls-space-4);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
    max-width: 18ch;
}

.blog-hero > .blog-shell > p {
    margin: 0 0 var(--ls-space-8);
    font-size: var(--ls-text-lg);
    line-height: 1.6;
    opacity: 0.85;
    max-width: 60ch;
}

.blog-search {
    display: flex;
    align-items: center;
    gap: var(--ls-space-3);
    max-width: 560px;
    background: var(--ls-surface);
    padding: var(--ls-space-2) var(--ls-space-2) var(--ls-space-2) var(--ls-space-4);
    box-shadow: var(--ls-shadow-lg);
}

.blog-search i { color: var(--ls-text-muted); }

.blog-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--ls-font-sans);
    font-size: var(--ls-text-base);
    color: var(--ls-text);
    padding: var(--ls-space-3) 0;
}

.blog-search button {
    flex: 0 0 auto;
    border: 0;
    cursor: pointer;
    background: var(--ls-brand-600);
    color: #fff;
    font-family: var(--ls-font-sans);
    font-size: var(--ls-text-sm);
    font-weight: 650;
    padding: var(--ls-space-3) var(--ls-space-6);
    transition: background var(--ls-duration) var(--ls-ease);
}

.blog-search button:hover { background: var(--ls-brand-700); }

/* ----------------------------------------------------------------- Filters */

.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ls-space-2);
    margin-bottom: var(--ls-space-6);
    padding-bottom: var(--ls-space-5);
    border-bottom: 1px solid var(--ls-border);
}

.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ls-space-2);
    padding: 0.5rem 1rem;
    border: 1px solid var(--ls-border);
    background: var(--ls-surface);
    color: var(--ls-text-secondary);
    font-size: var(--ls-text-sm);
    font-weight: 550;
    text-decoration: none;
    transition: all var(--ls-duration) var(--ls-ease);
}

.blog-chip:hover { border-color: var(--ls-brand-600); color: var(--ls-brand-600); }
.blog-chip.is-active { background: var(--ls-brand-600); border-color: var(--ls-brand-600); color: #fff; }

.blog-count {
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 1px 6px;
    background: var(--ls-surface-3);
    color: var(--ls-text-muted);
}

.blog-chip.is-active .blog-count { background: rgba(255, 255, 255, 0.24); color: #fff; }

.blog-result-line { margin: 0 0 var(--ls-space-5); color: var(--ls-text-muted); font-size: var(--ls-text-sm); }

/* -------------------------------------------------------------------- Grid */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--ls-space-6);
    margin-bottom: var(--ls-space-10);
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--ls-surface);
    border: 1px solid var(--ls-border);
    text-decoration: none;
    overflow: hidden;
    transition: border-color var(--ls-duration) var(--ls-ease),
                box-shadow var(--ls-duration) var(--ls-ease),
                transform var(--ls-duration) var(--ls-ease);
}

.blog-card:hover {
    border-color: var(--ls-brand-600);
    box-shadow: var(--ls-shadow-lg);
    transform: translateY(-3px);
}

.blog-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--ls-surface-3);
    overflow: hidden;
}

.blog-card-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--ls-duration-slow) var(--ls-ease);
}

.blog-card:hover .blog-card-media img { transform: scale(1.04); }

.blog-card-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--ls-text-muted);
    opacity: 0.35;
    background: linear-gradient(135deg, var(--ls-surface-3), var(--ls-surface-2));
}

.blog-card-tag {
    position: absolute;
    left: 0; bottom: 0;
    padding: 0.3rem 0.75rem;
    background: var(--ls-brand-600);
    color: #fff;
    font-size: var(--ls-text-xs);
    font-weight: 650;
}

.blog-card-body { padding: var(--ls-space-5); display: flex; flex-direction: column; gap: var(--ls-space-3); flex: 1 1 auto; }

.blog-card-body h2 {
    margin: 0;
    font-size: var(--ls-text-lg);
    font-weight: 650;
    line-height: 1.35;
    color: var(--ls-text);
    letter-spacing: -0.01em;
}

.blog-card-body p {
    margin: 0;
    font-size: var(--ls-text-sm);
    line-height: 1.6;
    color: var(--ls-text-muted);
    flex: 1 1 auto;
}

.blog-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ls-space-4);
    font-size: var(--ls-text-xs);
    color: var(--ls-text-muted);
    padding-top: var(--ls-space-3);
    border-top: 1px solid var(--ls-border);
}

/* -------------------------------------------------------------- Pagination */

.blog-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ls-space-2);
    margin-bottom: var(--ls-space-16);
}

.blog-page-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ls-space-2);
    min-width: 42px;
    justify-content: center;
    padding: 0.6rem 1rem;
    border: 1px solid var(--ls-border);
    background: var(--ls-surface);
    color: var(--ls-text-secondary);
    text-decoration: none;
    font-size: var(--ls-text-sm);
    font-weight: 600;
    transition: all var(--ls-duration) var(--ls-ease);
}

.blog-page-link:hover { border-color: var(--ls-brand-600); color: var(--ls-brand-600); }
.blog-page-link.is-active { background: var(--ls-brand-600); border-color: var(--ls-brand-600); color: #fff; }

/* ------------------------------------------------------------ Single post */

.blog-article-hero {
    background: var(--ls-surface);
    border-bottom: 1px solid var(--ls-border);
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 4vw, 3rem);
    margin-bottom: var(--ls-space-8);
}

.blog-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ls-space-2);
    margin-bottom: var(--ls-space-5);
    font-size: var(--ls-text-sm);
    color: var(--ls-text-muted);
}

.blog-crumbs a { color: var(--ls-brand-600); text-decoration: none; }
.blog-crumbs a:hover { text-decoration: underline; }

.blog-article-hero h1 {
    margin: 0 0 var(--ls-space-4);
    font-size: clamp(1.85rem, 4.5vw, 3rem);
    font-weight: 750;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--ls-text);
    max-width: 22ch;
}

.blog-article-lede {
    margin: 0 0 var(--ls-space-5);
    font-size: var(--ls-text-lg);
    line-height: 1.6;
    color: var(--ls-text-secondary);
    max-width: 65ch;
}

.blog-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ls-space-5);
    font-size: var(--ls-text-xs);
    color: var(--ls-text-muted);
}

.blog-article-meta i { margin-right: 5px; }

.blog-cover { margin-bottom: var(--ls-space-8); border: 1px solid var(--ls-border); overflow: hidden; }
.blog-cover img { display: block; width: 100%; height: auto; }

.blog-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--ls-space-10);
    align-items: start;
    padding-bottom: var(--ls-space-16);
}

.blog-article-body { font-size: 1.0625rem; line-height: 1.8; color: var(--ls-text-secondary); max-width: 72ch; }
.blog-article-body h2 { margin: var(--ls-space-10) 0 var(--ls-space-4); font-size: var(--ls-text-2xl); font-weight: 700; color: var(--ls-text); letter-spacing: -0.02em; }
.blog-article-body h3 { margin: var(--ls-space-8) 0 var(--ls-space-3); font-size: var(--ls-text-xl); font-weight: 650; color: var(--ls-text); }
.blog-article-body p { margin: 0 0 var(--ls-space-5); }
.blog-article-body ul, .blog-article-body ol { margin: 0 0 var(--ls-space-5); padding-left: var(--ls-space-6); }
.blog-article-body li { margin-bottom: var(--ls-space-2); }
.blog-article-body strong { color: var(--ls-text); font-weight: 650; }
.blog-article-body a { color: var(--ls-brand-600); }
.blog-article-body blockquote {
    margin: 0 0 var(--ls-space-5);
    padding: var(--ls-space-4) var(--ls-space-6);
    border-left: 3px solid var(--ls-brand-600);
    background: var(--ls-surface-2);
    font-style: italic;
}

.blog-article-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ls-space-4);
    margin-top: var(--ls-space-10);
    padding: var(--ls-space-6);
    background: var(--ls-surface-2);
    border: 1px solid var(--ls-border);
}

.blog-article-cta strong { display: block; color: var(--ls-text); margin-bottom: 3px; }
.blog-article-cta p { margin: 0; font-size: var(--ls-text-sm); color: var(--ls-text-muted); }

.blog-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ls-space-2);
    padding: 0.75rem 1.4rem;
    background: var(--ls-brand-600);
    color: #fff;
    text-decoration: none;
    font-weight: 650;
    font-size: var(--ls-text-sm);
    white-space: nowrap;
    transition: background var(--ls-duration) var(--ls-ease);
}

.blog-btn:hover { background: var(--ls-brand-700); color: #fff; }
.blog-btn i { transition: transform var(--ls-duration) var(--ls-ease); font-size: 0.75rem; }
.blog-btn:hover i { transform: translateX(3px); }

/* ------------------------------------------------------------------- Aside */

.blog-aside { display: flex; flex-direction: column; gap: var(--ls-space-5); position: sticky; top: var(--ls-space-6); }

.blog-aside-card { background: var(--ls-surface); border: 1px solid var(--ls-border); padding: var(--ls-space-5); }

.blog-aside-card h3 {
    margin: 0 0 var(--ls-space-4);
    font-size: var(--ls-text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ls-text-muted);
}

.blog-aside-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ls-space-3); }

.blog-aside-card a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ls-space-2);
    color: var(--ls-text-secondary);
    text-decoration: none;
    font-size: var(--ls-text-sm);
    line-height: 1.45;
    transition: color var(--ls-duration) var(--ls-ease);
}

.blog-aside-card a:hover { color: var(--ls-brand-600); }

/* ------------------------------------------------------------------ Empty */

.blog-empty {
    text-align: center;
    padding: var(--ls-space-16) var(--ls-space-4);
    background: var(--ls-surface);
    border: 1px dashed var(--ls-border-strong);
    margin-bottom: var(--ls-space-16);
}

.blog-empty i { font-size: 2.75rem; color: var(--ls-text-muted); opacity: 0.4; margin-bottom: var(--ls-space-4); }
.blog-empty h2 { margin: 0 0 var(--ls-space-2); font-size: var(--ls-text-xl); color: var(--ls-text); }
.blog-empty p { margin: 0 0 var(--ls-space-6); color: var(--ls-text-muted); }

/* ------------------------------------------------------------- Responsive */

@media (max-width: 900px) {
    .blog-article-layout { grid-template-columns: 1fr; gap: var(--ls-space-8); }
    .blog-aside { position: static; }
}

@media (max-width: 600px) {
    .blog-search { flex-wrap: wrap; padding: var(--ls-space-3); }
    .blog-search input { flex-basis: 100%; }
    .blog-search button { width: 100%; }
    .blog-article-cta { flex-direction: column; align-items: stretch; }
    .blog-btn { justify-content: center; }
}