/* ── CT Insights Grid ── */
:root {
    --ct-primary:   #193567;
    --ct-hover:     #0F69A6;
    --ct-text:      #081F5C;
    --ct-light:     #D0E3FF;
    --ct-gray:      #64748b;
    --ct-border:    #e2e8f0;
    --ct-white:     #ffffff;
    --ct-radius:    10px;
}

.ct-grid-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; font-family: 'Urbanist', sans-serif; }

/* ── FILTERS ── */
.ct-filters { margin-bottom: 32px; }
.ct-filter-group { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.ct-search-wrap { position: relative; }
.ct-search {
    border: 2px solid var(--ct-border);
    border-radius: 8px;
    padding: 9px 36px 9px 14px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ct-text);
    width: 220px;
    outline: none;
    transition: border-color .2s;
}
.ct-search:focus { border-color: var(--ct-primary); }
.ct-search-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--ct-gray); pointer-events: none; }

.ct-cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-cat-btn {
    background: var(--ct-white);
    border: 2px solid var(--ct-border);
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--ct-gray);
    cursor: pointer;
    transition: all .2s;
}
.ct-cat-btn:hover { border-color: var(--ct-primary); color: var(--ct-primary); }
.ct-cat-btn.active { background: var(--ct-primary); border-color: var(--ct-primary); color: var(--ct-white); }

.ct-year-select {
    border: 2px solid var(--ct-border);
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--ct-text);
    background: var(--ct-white);
    cursor: pointer;
    outline: none;
    transition: border-color .2s;
}
.ct-year-select:focus { border-color: var(--ct-primary); }

/* ── GRID ── */
.ct-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}
@media (max-width: 900px) { .ct-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ct-grid { grid-template-columns: 1fr; } }

/* ── CARD ── */
.ct-card {
    background: var(--ct-white);
    border: 1px solid var(--ct-border);
    border-radius: var(--ct-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.ct-card:hover { box-shadow: 0 8px 32px rgba(25,53,103,.13); transform: translateY(-3px); }

.ct-card-img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
}
.ct-card-img-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: var(--ct-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    color: var(--ct-primary);
}

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

.ct-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.ct-card-cat {
    background: var(--ct-light);
    color: var(--ct-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
}
.ct-card-date { font-size: 12px; color: var(--ct-gray); }
.ct-card-read { font-size: 12px; color: var(--ct-gray); }
.ct-card-read::before { content: "· "; }

.ct-card-title {
    font-family: 'DM Sans', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--ct-text);
    line-height: 1.35;
    margin: 0 0 10px;
}

.ct-card-excerpt { font-size: 13px; color: var(--ct-gray); line-height: 1.65; flex: 1; margin-bottom: 18px; }

.ct-card-link {
    display: inline-block;
    background: var(--ct-primary);
    color: var(--ct-white) !important;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    padding: 9px 20px;
    border-radius: 6px;
    text-decoration: none !important;
    align-self: flex-start;
    transition: background .2s;
}
.ct-card-link:hover { background: var(--ct-hover) !important; }

/* ── LOAD MORE ── */
.ct-load-more-wrap { text-align: center; margin-bottom: 40px; }
.ct-load-more {
    background: var(--ct-primary);
    color: var(--ct-white);
    border: none;
    border-radius: 8px;
    padding: 13px 36px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background .2s;
}
.ct-load-more:hover { background: var(--ct-hover); }
.ct-loading { color: var(--ct-gray); font-size: 14px; }

/* ── NO RESULTS ── */
.ct-no-results { text-align: center; color: var(--ct-gray); font-size: 15px; padding: 40px 0; }

/* ── FADE IN ── */
@keyframes ct-fadein { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.ct-card { animation: ct-fadein .3s ease both; }