:root{
  --bg:#111;
  --card:#1e1e1e;
  --accent1:#00b4d8;
  --accent2:#0077b6;
  --muted:#aaa;
  --white:#ffffff;
}

/* GRID for list */
.cc-cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
  gap:24px;
  align-items:start;
  justify-content:center;
  margin:20px 0;
  padding:0;
}

/* CARD (list) */
.cc-card{
  background: linear-gradient(180deg,var(--card),#26262a);
  border-radius:14px;
  overflow:hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  transition:transform .28s ease,box-shadow .28s ease;
  display:flex;
  flex-direction:column;
}
.cc-card:hover{ transform:translateY(-6px); box-shadow:0 22px 50px rgba(0,0,0,0.6); }

.cc-card-image{ position:relative; width:100%; height:280px; overflow:hidden; background:#333;}
.cc-card-image img{ width:100%; height:100%; object-fit:cover !important; display:block; transition:transform .45s ease; }
.cc-card:hover .cc-card-image img{ transform:scale(1.08); }

.cc-badge{ position:absolute; left:12px; bottom:12px; background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:var(--white); padding:6px 12px; border-radius:20px; font-weight:700; font-size:0.82rem; box-shadow: 0 6px 18px rgba(0,180,255,0.12); }

.cc-card-body{ padding:18px; display:flex; flex-direction:column; gap:10px; color:var(--white); }
.cc-card-title{ margin:0; font-size:1.1rem; font-weight:800; line-height:1.2; color:var(--white); }
.cc-card-title a{ color:inherit; text-decoration:none; }
.cc-card-meta{ display:flex; flex-direction:column; gap:6px; color:var(--muted); font-size:0.92rem; }
.cc-meta-item{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.02); padding:6px 10px; border-radius:10px; }
.cc-meta-item i{ color:var(--accent1); min-width:18px; text-align:center; }

.cc-gallery{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.cc-gallery img{ width:70px; height:56px; object-fit:cover; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.35); transition:transform .25s ease; cursor:pointer; }
.cc-gallery img:hover{ transform:scale(1.08); box-shadow:0 10px 26px rgba(0,180,255,0.18); }

.cc-card-footer{ margin-top:12px; display:flex; }
.cc-btn{ width:100%; display:inline-block; padding:10px 14px; border-radius:10px; text-align:center; background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:var(--white); font-weight:700; text-decoration:none; box-shadow:0 8px 28px rgba(0,180,255,0.12); transition:transform .2s ease; }
.cc-btn:hover{ transform:translateY(-3px); }

/* SINGLE page (hero + info + gallery + content) */
.cc-single-card, .cc-single{ width:100%; background:transparent; margin:0; padding:0; }

.cc-single-hero{ position:relative; height:420px; width:100%; background-size:cover; background-position:center; display:block; border-radius:0; overflow:hidden; }
.cc-single-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(0,0,0,0.25),rgba(0,0,0,0.7)); }
.cc-single-hero img{ width:100%; height:420px; object-fit:cover; display:block; }
.cc-single-hero-content{ position:absolute; left:48px; bottom:32px; z-index:3; color:var(--white); max-width:70%; }
.cc-single-hero-content .cc-badge{ margin-bottom:12px; display:inline-block; }
.cc-single-title{ font-size:2.4rem; margin:0 0 6px 0; font-weight:900; line-height:1.05; color:var(--white); text-shadow:0 6px 22px rgba(0,0,0,0.5); }

/* single body */
.cc-single-body{ max-width:1100px; margin:-60px auto 60px; background: linear-gradient(180deg,#0f0f10,#151517); border-radius:14px; padding:26px; box-shadow:0 18px 60px rgba(0,0,0,0.6); color:var(--white); }

.cc-info-grid{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.cc-info-box{ background:rgba(255,255,255,0.02); padding:12px 16px; border-radius:12px; display:flex; gap:12px; align-items:center; min-width:180px; box-shadow:0 6px 20px rgba(0,0,0,0.35); }
.cc-info-box i{ color:var(--accent1); font-size:1.1rem; }
.cc-info-label{ color:var(--white); font-weight:700; }

.cc-desc-full{ margin-top:18px; color:#dfe8ee; line-height:1.7; font-size:1rem; }

/* SINGLE gallery grid */
.cc-single-gallery{ margin-top:18px; display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.cc-single-gallery a{ display:block; border-radius:12px; overflow:hidden; }
.cc-single-gallery img{ width:100%; height:160px; object-fit:cover; transition:transform .28s ease, box-shadow .28s ease; border-radius:12px; }
.cc-single-gallery a:hover img{ transform:scale(1.05); box-shadow:0 18px 46px rgba(0,180,255,0.14); }

/* CTA */
.cc-single-footer{ margin-top:20px; display:flex; justify-content:center; }
.cc-cta{ display:inline-block; padding:14px 36px; border-radius:12px; background:linear-gradient(90deg,var(--accent1),var(--accent2)); color:var(--white); font-weight:800; text-decoration:none; box-shadow:0 12px 40px rgba(0,180,255,0.12); }

/* LIGHTBOX */
.cc-lightbox-overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.9); z-index:99999; opacity:0; visibility:hidden; transition:opacity .22s ease; }
.cc-lightbox-overlay.active{ opacity:1; visibility:visible; }
.cc-lightbox-overlay img{ max-width:92%; max-height:86%; border-radius:10px; box-shadow:0 18px 60px rgba(0,0,0,0.6); }

/* RESPONSIVE */
@media (max-width: 1024px){
  .cc-single-hero{ height:360px; }
  .cc-single-hero img{ height:360px; }
  .cc-single-hero-content{ left:28px; bottom:22px; }
  .cc-single-title{ font-size:2rem; }
}
@media (max-width:768px){
  .cc-cards-grid{ grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap:18px; }
  .cc-card-image{ height:220px; }
  .cc-single-hero{ height:220px; }
  .cc-single-hero img{ height:220px; }
  .cc-single-body{ margin: -40px 16px 30px; padding:18px; }
  .cc-single-title{ font-size:1.6rem; }
  .cc-single-gallery img{ height:140px; }
}