/* =========================================================================
   Content Widgets — Category Grid & Blog Carousel — shared frontend styles
   ========================================================================= */
.ccw-widget{
  --ccw-ink:#1A2E29;
  --ccw-ink-soft:#5B6B66;
  --ccw-bg:#EAF4EF;
  --ccw-card:#FFFFFF;
  --ccw-accent:#1E9E6A;
  --ccw-line:rgba(26,46,41,.08);
  --ccw-font-body:"Work Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --ccw-radius:16px;
  --ccw-shadow:0 1px 2px rgba(20,30,26,.04), 0 10px 24px -12px rgba(20,30,26,.14);
  font-family:var(--ccw-font-body);
  color:var(--ccw-ink);
  box-sizing:border-box;
}
.ccw-widget *{box-sizing:border-box;}
.ccw-widget img{max-width:100%;display:block;}
.ccw-widget a{color:inherit;text-decoration:none;}
.ccw-widget ul{list-style:none;margin:0;padding:0;}

/* -------------------------------------------------------------------------
   CATEGORY GRID
   ------------------------------------------------------------------------- */
.ccw-category-grid-section{
  background:var(--ccw-bg);
  border-radius:20px;
  padding:36px;
}
.ccw-category-section-head{max-width:640px;margin-bottom:28px;}
.ccw-category-section-head h2{font-size:clamp(24px,3vw,32px);margin:0;font-weight:700;}
.ccw-category-section-head p{margin-top:10px;color:var(--ccw-ink-soft);font-size:15px;}

.ccw-category-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.ccw-category-card{
  position:relative;
  background:var(--ccw-card);
  border-radius:var(--ccw-radius);
  box-shadow:var(--ccw-shadow);
  padding:26px 22px 24px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:transform .2s ease, box-shadow .2s ease;
}
.ccw-category-card.ccw-clickable{cursor:pointer;}
.ccw-category-card:hover{
  transform:translateY(-4px);
  box-shadow:0 4px 8px rgba(20,30,26,.06), 0 20px 34px -14px rgba(20,30,26,.2);
}
.ccw-category-card .ccw-arrow{
  position:absolute;top:18px;right:18px;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ccw-ink-soft);
  border:1px solid var(--ccw-line);
  transition:border-color .2s ease, color .2s ease;
}
.ccw-category-card:hover .ccw-arrow{border-color:var(--ccw-ink-soft);color:var(--ccw-ink);}
.ccw-category-card .ccw-icon{
  font-size:40px;line-height:1;margin-bottom:18px;height:46px;display:flex;align-items:center;
}
.ccw-category-card .ccw-icon img{height:46px;width:auto;object-fit:contain;}
.ccw-category-card h3{font-size:17px;font-weight:700;margin:0 0 8px;}
.ccw-category-card p{font-size:13.5px;color:var(--ccw-ink-soft);line-height:1.5;margin:0;}
.ccw-category-card.ccw-hidden{display:none !important;}

@media (max-width:1100px){ .ccw-category-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:700px){ .ccw-category-grid{grid-template-columns:repeat(2,1fr);} .ccw-category-grid-section{padding:24px;} }
@media (max-width:460px){ .ccw-category-grid{grid-template-columns:1fr;} }

/* -------------------------------------------------------------------------
   BLOG CAROUSEL
   ------------------------------------------------------------------------- */
.ccw-blog-carousel-section{padding:20px 0;}
.ccw-blog-section-head{max-width:640px;margin-bottom:28px;}
.ccw-blog-section-head h2{font-size:clamp(24px,3vw,32px);margin:0;font-weight:700;}
.ccw-blog-section-head p{margin-top:10px;color:var(--ccw-ink-soft);font-size:15px;}

.ccw-carousel-viewport{
  position:relative;
  overflow:hidden;
  padding:10px 0 30px;
}
.ccw-carousel-track{
  display:flex;
  align-items:center;
  will-change:transform;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.ccw-carousel-slide{
  flex:none;
  width:320px;
  margin:0 12px;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  background:#ddd;
  aspect-ratio:16/10;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.35);
  transition:transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s ease, filter .5s ease;
  transform:scale(.82);
  opacity:.35;
  filter:blur(1px) saturate(.85);
  cursor:pointer;
}
.ccw-carousel-slide img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.ccw-carousel-slide.ccw-dist-0{
  transform:scale(1.12);
  opacity:1;
  filter:none;
  z-index:5;
  box-shadow:0 20px 46px -16px rgba(0,0,0,.45);
}
.ccw-carousel-slide.ccw-dist-1{
  transform:scale(.9);
  opacity:.65;
  filter:blur(.5px) saturate(.9);
  z-index:3;
}
.ccw-carousel-slide.ccw-dist-2{ z-index:1; }

.ccw-slide-overlay{
  position:absolute;left:0;right:0;bottom:0;padding:20px;
  background:linear-gradient(0deg, rgba(10,14,12,.82) 0%, rgba(10,14,12,.35) 55%, transparent 100%);
  color:#fff;
}
.ccw-slide-meta{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px;}
.ccw-slide-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;border:1.5px solid rgba(255,255,255,.5);}
.ccw-slide-author{font-weight:600;}
.ccw-slide-date{opacity:.75;margin-left:auto;font-size:12.5px;white-space:nowrap;}
.ccw-slide-title{font-size:19px;font-weight:700;line-height:1.3;margin:0;}
.ccw-carousel-slide.ccw-dist-1 .ccw-slide-title,
.ccw-carousel-slide.ccw-dist-2 .ccw-slide-title{ font-size:15px; }

.ccw-carousel-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:8;
  width:44px;height:44px;border-radius:50%;
  background:#fff;color:var(--ccw-ink);
  border:1px solid var(--ccw-line);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:background .2s ease;
}
.ccw-carousel-nav:hover{background:#F3F3F1;}
.ccw-carousel-nav.ccw-prev{left:8px;}
.ccw-carousel-nav.ccw-next{right:8px;}

.ccw-carousel-dots{display:flex;justify-content:center;gap:10px;margin-top:8px;}
.ccw-carousel-dot{
  width:9px;height:9px;border-radius:50%;
  background:transparent;border:1.6px solid #C7CFCB;
  padding:0;cursor:pointer;transition:all .2s ease;
}
.ccw-carousel-dot.ccw-active{background:var(--ccw-accent);border-color:var(--ccw-accent);}

.ccw-no-posts{
  text-align:center;padding:50px 20px;color:var(--ccw-ink-soft);
  border:1px dashed var(--ccw-line);border-radius:14px;font-size:14px;
}

@media (max-width:700px){
  .ccw-carousel-slide{width:220px;}
  .ccw-carousel-nav{width:38px;height:38px;}
}