/* ==========================================================
   Tweeloads Blog Pro — base styles (theme-agnostic)
   Actual colors come from assets/css/themes.css via CSS vars.
   ========================================================== */

.twl-blog-wrap {
    --twl-radius: 16px;
    --twl-cols: 3;

    max-width: 1180px;
    margin: 0 auto;
    padding: 60px 20px 80px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--twl-bg);
    color: var(--twl-text);
}

.twl-blog-wrap * { box-sizing: border-box; }

/* ---------- Card style variants ---------- */
.twl-blog-wrap.twl-card-rounded { --twl-radius: 16px; }
.twl-blog-wrap.twl-card-soft    { --twl-radius: 24px; }
.twl-blog-wrap.twl-card-sharp   { --twl-radius: 4px; }

/* ---------- Column variants ---------- */
.twl-blog-wrap.twl-cols-2 .twl-grid { --twl-cols: 2; }
.twl-blog-wrap.twl-cols-3 .twl-grid { --twl-cols: 3; }
.twl-blog-wrap.twl-cols-4 .twl-grid { --twl-cols: 4; }

/* ---------- Header ---------- */
.twl-blog-header { text-align: center; margin-bottom: 40px; }

.twl-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--twl-primary);
    margin-bottom: 12px;
}

.twl-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 18px;
    color: var(--twl-heading);
}

.twl-subtitle {
    max-width: 620px;
    margin: 0 auto;
    font-size: 17px;
    line-height: 1.6;
    color: var(--twl-text-muted);
}

/* ---------- Controls ---------- */
.twl-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--twl-card-bg);
    border-radius: var(--twl-radius);
    padding: 14px 20px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid var(--twl-border);
}

.twl-search {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--twl-bg);
    border-radius: calc(var(--twl-radius) - 6px);
    padding: 10px 14px;
    color: var(--twl-text-muted);
}

.twl-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    width: 100%;
    color: var(--twl-text);
}

.twl-filters { display: flex; gap: 8px; flex-wrap: wrap; }

.twl-filter {
    border: 1px solid var(--twl-border);
    background: var(--twl-card-bg);
    color: var(--twl-text-muted);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.twl-filter:hover { border-color: var(--twl-primary); color: var(--twl-primary); }

.twl-filter.active {
    background: var(--twl-primary-tint);
    border-color: var(--twl-primary);
    color: var(--twl-primary);
}

/* ---------- Layout ---------- */
.twl-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    align-items: start;
}

.twl-blog-wrap.twl-no-sidebar .twl-layout { grid-template-columns: 1fr; }

.twl-grid {
    display: grid;
    grid-template-columns: repeat(var(--twl-cols), 1fr);
    gap: 22px;
}

@media (max-width: 900px) {
    .twl-layout { grid-template-columns: 1fr; }
    .twl-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .twl-grid { grid-template-columns: 1fr; }
    .twl-title { font-size: 32px; }
    .twl-controls { flex-direction: column; align-items: stretch; }
}

/* ---------- Post Card ---------- */
.twl-card {
    background: var(--twl-card-bg);
    border: 1px solid var(--twl-border);
    border-radius: var(--twl-radius);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.twl-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

.twl-card-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--twl-heading);
}

.twl-card-img, .twl-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.twl-card-img--placeholder { background: var(--twl-accent-gradient); }

.twl-badge {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-radius: 999px;
    color: var(--twl-badge-text);
    background: var(--twl-badge-bg);
}

.twl-card-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.twl-card-title { font-size: 18px; font-weight: 700; line-height: 1.35; margin: 0 0 10px; }
.twl-card-title a { color: var(--twl-heading); text-decoration: none; }
.twl-card-title a:hover { color: var(--twl-primary); }

.twl-card-excerpt { font-size: 14px; line-height: 1.6; color: var(--twl-text-muted); margin: 0 0 16px; flex: 1; }
.twl-card-meta { font-size: 13px; color: var(--twl-text-faint); }
.twl-dot { margin: 0 6px; }

.twl-no-results { grid-column: 1 / -1; text-align: center; color: var(--twl-text-muted); padding: 40px 0; }

.twl-loadmore-wrap { grid-column: 1 / -1; text-align: center; margin-top: 8px; }

.twl-loadmore {
    border: 1px solid var(--twl-border);
    background: var(--twl-card-bg);
    color: var(--twl-primary);
    font-weight: 600;
    font-size: 14px;
    padding: 10px 26px;
    border-radius: 999px;
    cursor: pointer;
}
.twl-loadmore:hover { background: var(--twl-primary-tint); }

/* ---------- Sidebar ---------- */
.twl-sidebar { display: flex; flex-direction: column; gap: 20px; }

.twl-side-box {
    background: var(--twl-card-bg);
    border: 1px solid var(--twl-border);
    border-radius: var(--twl-radius);
    padding: 22px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.twl-side-title {
    font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
    color: var(--twl-heading); margin: 0 0 16px; text-transform: uppercase;
}

.twl-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.twl-side-list li { display: flex; flex-direction: column; gap: 4px; }
.twl-side-list a { font-size: 14.5px; font-weight: 600; color: var(--twl-text); text-decoration: none; line-height: 1.4; }
.twl-side-list a:hover { color: var(--twl-primary); }
.twl-side-meta { font-size: 12.5px; color: var(--twl-text-faint); }

.twl-cat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.twl-cat-list li { display: flex; align-items: center; justify-content: space-between; }
.twl-cat-list a { font-size: 14.5px; color: var(--twl-text); text-decoration: none; font-weight: 500; }
.twl-cat-list a:hover { color: var(--twl-primary); }
.twl-cat-count { font-size: 13px; color: var(--twl-text-faint); }

.twl-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.twl-tag { font-size: 12.5px; color: var(--twl-text-muted); background: var(--twl-bg); padding: 6px 12px; border-radius: 999px; text-decoration: none; }
.twl-tag:hover { background: var(--twl-primary-tint); color: var(--twl-primary); }

.twl-credit-box { text-align: center; }
.twl-credit-text { font-size: 12.5px; color: var(--twl-text-faint); margin: 0; }
.twl-credit-text a { color: var(--twl-primary); text-decoration: none; font-weight: 600; }

.twl-grid.is-loading { opacity: 0.5; pointer-events: none; transition: opacity 0.2s ease; }