.csp-wrapper {
--csp-accent:   #6366f1;
--csp-radius:   12px;
--csp-columns:  3;
--csp-ratio:    16 / 9;
--csp-gap:      1.5rem;
--csp-card-bg:  #ffffff;
--csp-text:     #1e293b;
--csp-muted:    #64748b;
--csp-border:   #e2e8f0;
--csp-shadow:   0 4px 24px rgba(0,0,0,.08);
--csp-shadow-h: 0 12px 40px rgba(0,0,0,.15);
--csp-trans:    .28s cubic-bezier(.4, 0, .2, 1);
font-family: inherit;
box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; } .csp-section-title {
font-size: 1.6rem;
font-weight: 700;
color: var(--csp-text);
margin: 0 0 1.5rem;
padding-bottom: .75rem;
border-bottom: 3px solid var(--csp-accent);
display: inline-block;
} .csp-grid {
display: grid;
grid-template-columns: repeat(var(--csp-columns), 1fr);
gap: var(--csp-gap);
}
@media (max-width: 1024px) {
.csp-grid { grid-template-columns: repeat(min(var(--csp-columns), 2), 1fr); }
}
@media (max-width: 640px) {
.csp-grid { grid-template-columns: 1fr; }
} .csp-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.csp-item-list .csp-item-card {
display: flex;
flex-direction: row;
gap: 1rem;
align-items: flex-start;
}
.csp-item-list .csp-card-thumb {
flex: 0 0 140px;
aspect-ratio: 4/3 !important;
min-height: auto;
}
@media (max-width: 480px) {
.csp-item-list .csp-item-card { flex-direction: column; }
.csp-item-list .csp-card-thumb { flex: none; width: 100%; aspect-ratio: 16/9 !important; }
} .csp-masonry {
columns: var(--csp-columns);
column-gap: var(--csp-gap);
}
@media (max-width: 1024px) {
.csp-masonry { columns: 2; }
}
@media (max-width: 640px) {
.csp-masonry { columns: 1; }
}
.csp-masonry .csp-item {
break-inside: avoid;
margin-bottom: var(--csp-gap);
} .csp-item { position: relative; }
.csp-item-card {
background: var(--csp-card-bg);
border-radius: var(--csp-radius);
overflow: hidden;
transition: transform var(--csp-trans), box-shadow var(--csp-trans);
position: relative;
height: 100%;
display: flex;
flex-direction: column;
} .csp-style-shadow .csp-item-card {
box-shadow: var(--csp-shadow);
}
.csp-style-shadow .csp-item-card:hover {
transform: translateY(-6px);
box-shadow: var(--csp-shadow-h);
}
.csp-style-border .csp-item-card {
border: 2px solid var(--csp-border);
}
.csp-style-border .csp-item-card:hover {
border-color: var(--csp-accent);
transform: translateY(-4px);
}
.csp-style-flat .csp-item-card {
background: #f8fafc;
}
.csp-style-flat .csp-item-card:hover {
background: #f1f5f9;
transform: translateY(-3px);
}
.csp-style-ghost .csp-item-card {
background: transparent;
border: 1.5px solid var(--csp-border);
backdrop-filter: blur(4px);
}
.csp-style-ghost .csp-item-card:hover {
background: rgba(99,102,241,.05);
border-color: var(--csp-accent);
transform: translateY(-4px);
}
.csp-style-minimal .csp-item-card {
background: transparent;
border-radius: 0;
border-bottom: 1px solid var(--csp-border);
}
.csp-style-minimal .csp-card-thumb {
border-radius: 8px;
overflow: hidden;
} .csp-card-thumb {
display: block;
overflow: hidden;
aspect-ratio: var(--csp-ratio);
background: #f1f5f9;
position: relative;
flex-shrink: 0;
}
.csp-card-thumb img,
.csp-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s cubic-bezier(.4, 0, .2, 1);
display: block;
}
.csp-item-card:hover .csp-thumb-img {
transform: scale(1.06);
} .csp-thumb-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.35) 0%, transparent 60%);
opacity: 0;
transition: opacity var(--csp-trans);
}
.csp-item-card:hover .csp-thumb-overlay { opacity: 1; } .csp-no-thumb {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}
.csp-thumb-placeholder svg {
width: 48px;
height: 48px;
color: #94a3b8;
opacity: .5;
} .csp-card-cat {
position: absolute;
top: .75rem;
left: .75rem;
z-index: 2;
background: var(--csp-accent);
color: #fff;
font-size: .7rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
padding: .2rem .55rem;
border-radius: 4px;
text-decoration: none;
line-height: 1.4;
transition: background var(--csp-trans), opacity var(--csp-trans);
}
.csp-card-cat:hover { opacity: .85; color: #fff; } .csp-item-list .csp-item-card:not(:has(.csp-card-thumb)) .csp-card-cat,
.csp-style-minimal .csp-card-cat {
position: static;
display: inline-block;
margin-bottom: .5rem;
} .csp-card-body {
padding: 1.1rem 1.25rem 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
gap: .5rem;
}
.csp-item-list .csp-card-body {
padding: .6rem .6rem .6rem 0;
}
.csp-style-minimal .csp-card-body {
padding: .75rem 0 1rem;
} .csp-card-meta {
display: flex;
flex-wrap: wrap;
gap: .75rem;
font-size: .75rem;
color: var(--csp-muted);
align-items: center;
}
.csp-meta-date,
.csp-meta-author {
display: flex;
align-items: center;
gap: .3rem;
}
.csp-meta-date svg,
.csp-meta-author svg { flex-shrink: 0; } .csp-card-title {
margin: 0;
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
color: var(--csp-text);
flex: 1;
}
.csp-card-title a {
color: inherit;
text-decoration: none;
transition: color var(--csp-trans);
}
.csp-card-title a:hover { color: var(--csp-accent); } .csp-card-excerpt {
margin: 0;
font-size: .875rem;
color: var(--csp-muted);
line-height: 1.65;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
} .csp-read-more {
display: inline-flex;
align-items: center;
gap: .35rem;
font-size: .8rem;
font-weight: 600;
color: var(--csp-accent);
text-decoration: none;
margin-top: auto;
padding-top: .25rem;
transition: gap var(--csp-trans), opacity var(--csp-trans);
}
.csp-read-more:hover { gap: .55rem; opacity: .8; color: var(--csp-accent); }
.csp-read-more svg { flex-shrink: 0; transition: transform var(--csp-trans); }
.csp-read-more:hover svg { transform: translateX(3px); } .csp-no-posts {
padding: 2rem;
text-align: center;
color: var(--csp-muted);
background: #f8fafc;
border-radius: var(--csp-radius);
border: 1px dashed var(--csp-border);
}  .csp-anim-fade .csp-item {
opacity: 0;
animation: csp-fadeIn .5s forwards;
}
@keyframes csp-fadeIn {
to { opacity: 1; }
} .csp-anim-slide .csp-item {
opacity: 0;
transform: translateY(28px);
animation: csp-slideUp .5s forwards;
}
@keyframes csp-slideUp {
to { opacity: 1; transform: translateY(0); }
} .csp-anim-zoom .csp-item {
opacity: 0;
transform: scale(.92);
animation: csp-zoomIn .45s forwards;
}
@keyframes csp-zoomIn {
to { opacity: 1; transform: scale(1); }
} .csp-anim-flip .csp-item {
opacity: 0;
transform: rotateX(-15deg) translateY(20px);
animation: csp-flip .5s forwards;
perspective: 800px;
}
@keyframes csp-flip {
to { opacity: 1; transform: rotateX(0) translateY(0); }
} .csp-item:nth-child(1)  { animation-delay: .05s; }
.csp-item:nth-child(2)  { animation-delay: .10s; }
.csp-item:nth-child(3)  { animation-delay: .15s; }
.csp-item:nth-child(4)  { animation-delay: .20s; }
.csp-item:nth-child(5)  { animation-delay: .25s; }
.csp-item:nth-child(6)  { animation-delay: .30s; }
.csp-item:nth-child(7)  { animation-delay: .35s; }
.csp-item:nth-child(8)  { animation-delay: .40s; }
.csp-item:nth-child(9)  { animation-delay: .45s; }
.csp-item:nth-child(10) { animation-delay: .50s; } .csp-widget-wrap .csp-wrapper {
--csp-gap: 1rem;
}
.csp-widget-wrap .csp-card-title { font-size: .9rem; }
.csp-widget-wrap .csp-card-thumb { aspect-ratio: 4/3; }