/* Category News Widget — all colors/sizes come from the CSS variables set in the widget/block options. */
.cnw{--cnw-accent:#0b5cad;--cnw-text:#1a1a1a;--cnw-muted:#6b7280;--cnw-border:#e5e7eb;--cnw-card:#fff;--cnw-radius:10px;--cnw-gap:24px;--cnw-ratio:16/9;--cnw-cols:3;--cnw-cols-md:2;--cnw-title:18px;--cnw-c:var(--cnw-cols);color:var(--cnw-text)}
.cnw *{box-sizing:border-box}
.cnw-title-small{--cnw-title:16px}
.cnw-title-large{--cnw-title:22px}

/* Grid */
.cnw-grid{display:grid;gap:var(--cnw-gap);grid-template-columns:repeat(var(--cnw-c),minmax(0,1fr))}
.cnw-featured .cnw-card:first-child{grid-column:span 2;grid-row:span 2}
.cnw-featured .cnw-card:first-child .cnw-thumb{flex:1;min-height:0}
.cnw .cnw-featured .cnw-card:first-child .cnw-title{font-size:calc(var(--cnw-title) * 1.35)}

/* Card */
.cnw-card{position:relative;display:flex;flex-direction:column;background:var(--cnw-card);border:1px solid var(--cnw-border);border-radius:var(--cnw-radius);overflow:hidden;transition:box-shadow .2s,transform .2s}
.cnw-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.08);transform:translateY(-2px)}
.cnw-card:focus-within{outline:2px solid var(--cnw-accent);outline-offset:2px}
.cnw-style-shadow .cnw-card{border-color:transparent;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.cnw-style-shadow .cnw-card:hover{box-shadow:0 10px 28px rgba(0,0,0,.14)}
.cnw-style-flat .cnw-card{border:0;background:transparent;overflow:visible}
.cnw-style-flat .cnw-card:hover{box-shadow:none}
.cnw-style-flat .cnw-thumb{border-radius:var(--cnw-radius)}
.cnw-style-flat .cnw-body{padding:12px 0 0}

.cnw-thumb{aspect-ratio:var(--cnw-ratio);background:#f3f4f6;overflow:hidden}
.cnw-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.cnw-card:hover .cnw-thumb img{transform:scale(1.03)}
.cnw-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.cnw-meta{font-size:13px;color:var(--cnw-muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cnw-cat{color:var(--cnw-accent);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:12px}
.cnw h3.cnw-title{font-size:var(--cnw-title);line-height:1.3;margin:0;font-weight:700;letter-spacing:normal}
.cnw .cnw-title a{color:inherit;text-decoration:none}
.cnw-title a::after{content:"";position:absolute;inset:0;z-index:1}
.cnw-title a:focus-visible{outline:none}
.cnw .cnw-excerpt{margin:0;font-size:15px;line-height:1.55;color:var(--cnw-text);opacity:.85;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cnw-more{margin-top:auto;font-size:14px;font-weight:600;color:var(--cnw-accent)}

/* Compact list */
.cnw-list{display:flex;flex-direction:column;gap:16px;list-style:none;margin:0;padding:0}
.cnw-list .cnw-card{flex-direction:row;border:0;border-bottom:1px solid var(--cnw-border);border-radius:0;padding-bottom:16px;background:none;overflow:visible}
.cnw-list .cnw-card:hover{box-shadow:none;transform:none}
.cnw-list .cnw-thumb{flex:0 0 96px;aspect-ratio:1/1;border-radius:8px}
.cnw-list .cnw-body{padding:0 0 0 12px;gap:4px}
.cnw .cnw-list .cnw-title{font-size:15px}

/* Slider */
.cnw-slider{position:relative}
.cnw-arrows{display:flex;justify-content:flex-end;gap:8px;margin-bottom:12px}
.cnw-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--cnw-border);background:var(--cnw-card);color:var(--cnw-accent);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px;transition:background .2s,color .2s}
.cnw-arrow:hover{background:var(--cnw-accent);color:#fff;border-color:var(--cnw-accent)}
.cnw-arrow:focus-visible{outline:2px solid var(--cnw-accent);outline-offset:2px}
.cnw-track{position:relative;display:flex;gap:var(--cnw-gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:6px 8px 20px;margin:0 -8px;scroll-padding-left:8px}
.cnw-track::-webkit-scrollbar{display:none}
.cnw-track>.cnw-card{flex:0 0 calc((100% - (var(--cnw-c) - 1) * var(--cnw-gap)) / var(--cnw-c));scroll-snap-align:start}
.cnw-dots{display:flex;justify-content:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.cnw-dot{width:10px;height:10px;border-radius:5px;border:0;padding:0;background:var(--cnw-border);cursor:pointer;transition:width .2s,background .2s}
.cnw-dot[aria-current="true"]{background:var(--cnw-accent);width:24px}
.cnw-dot:focus-visible{outline:2px solid var(--cnw-accent);outline-offset:2px}

/* Footer link */
.cnw-footer{margin-top:20px;text-align:right}
.cnw-footer a{font-weight:600;color:var(--cnw-accent);text-decoration:none}
.cnw-footer a:hover{text-decoration:underline}
.cnw-empty{color:var(--cnw-muted)}

/* Responsive */
@media (max-width:900px){
	.cnw{--cnw-c:var(--cnw-cols-md)}
	.cnw-featured .cnw-card:first-child{grid-row:auto}
	.cnw-featured .cnw-card:first-child .cnw-thumb{flex:none}
}
@media (max-width:600px){
	.cnw{--cnw-c:1}
	.cnw-featured .cnw-card:first-child{grid-column:auto;grid-row:auto}
	.cnw-featured .cnw-card:first-child .cnw-thumb{flex:none}
	.cnw-track>.cnw-card{flex-basis:85%} /* next card peeks in, so people know to swipe */
}
@media (prefers-reduced-motion:reduce){
	.cnw-card,.cnw-thumb img,.cnw-dot{transition:none}
	.cnw-card:hover{transform:none}
	.cnw-card:hover .cnw-thumb img{transform:none}
	.cnw-track{scroll-behavior:auto}
}
