/**
 * CodeNova Services — self-contained front-end styles.
 * Works on ANY theme (not just the CodeNova theme) since the plugin
 * should never depend on a specific theme being active. If the CodeNova
 * theme IS active, its own style.css loads after this file and simply
 * takes over these same class names with its fuller design system —
 * no conflict either way.
 */

:root{
  --cnsvc-navy:        #0A1628;
  --cnsvc-navy-mid:    #0D1F3C;
  --cnsvc-navy-card:   #0E1B35;
  --cnsvc-blue:        #1A3A6B;
  --cnsvc-cyan:        #00D4FF;
  --cnsvc-white:       #FFFFFF;
  --cnsvc-muted:       rgba(170,187,204,0.75);
  --cnsvc-border:      rgba(30,77,155,0.35);
  --cnsvc-radius:      8px;
  --cnsvc-transition:  0.3s cubic-bezier(0.4,0,0.2,1);
  --cnsvc-font-head:   'Raleway', Georgia, serif;
  --cnsvc-font-body:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --cnsvc-font-mono:   'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

.cn-svc-outer,
.cn-svc-outer-carousel{
  box-sizing:border-box;
}
.cn-svc-outer *,
.cn-svc-outer-carousel *{
  box-sizing:border-box;
}

/* ---- Grid layout ---- */
.cn-services-grid{
  display:grid;
  grid-template-columns:repeat(var(--cn-svc-cols,4),1fr);
  gap:20px;
  margin:0;padding:0;list-style:none;
}

/* ---- Carousel layout ---- */
.cn-svc-carousel{
  display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0;list-style:none;
}
.cn-svc-carousel::-webkit-scrollbar{display:none}
.cn-svc-slide{
  flex:0 0 calc(25% - 15px);
  scroll-snap-align:start;
}
.cn-svc-carousel-nav{
  display:flex;gap:10px;justify-content:center;margin-top:28px;
}
.cn-svc-carousel-nav .cn-about-nav-btn{
  width:36px;height:36px;border-radius:50%;
  background:var(--cnsvc-navy-mid);border:1px solid var(--cnsvc-cyan);
  color:var(--cnsvc-white);font-size:16px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--cnsvc-transition);
}
.cn-svc-carousel-nav .cn-about-nav-btn:hover{background:var(--cnsvc-cyan);color:var(--cnsvc-navy)}

/* ---- Card ---- */
.cn-svc-card{
  background:var(--cnsvc-navy-card);
  border:1px solid var(--cnsvc-border);
  border-radius:var(--cnsvc-radius);
  overflow:hidden;
  transition:all var(--cnsvc-transition);
  cursor:default;
  display:flex;
  flex-direction:column;
  height:420px;
  position:relative;
  font-family:var(--cnsvc-font-body);
}
.cn-svc-card:hover{
  border-color:var(--cnsvc-cyan);
  transform:translateY(-6px);
  box-shadow:0 12px 40px rgba(0,212,255,0.15);
}

.cn-svc-img{
  height:190px;flex-shrink:0;overflow:hidden;position:relative;
  background:var(--cnsvc-blue);
}
.cn-svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;display:block;margin:0;}
.cn-svc-card:hover .cn-svc-img img{transform:scale(1.06)}
.cn-svc-ph{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;font-size:64px;
  background:var(--cnsvc-blue);
}

.cn-svc-body{padding:18px 20px;flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;}
.cn-svc-name{
  font-family:var(--cnsvc-font-head);font-size:15px;font-weight:700;
  color:var(--cnsvc-white);margin:0 0 8px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cn-svc-card:hover .cn-svc-name{color:var(--cnsvc-cyan)}
.cn-svc-desc{
  font-size:12px;color:var(--cnsvc-muted);line-height:1.7;margin:0;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---- Per-card image gallery (2+ images) ---- */
.cn-svc-gallery{position:relative;width:100%;height:100%}
.cn-svc-gimg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .6s ease;margin:0;
}
.cn-svc-gimg.active{opacity:1}
.cn-svc-gdots{
  position:absolute;bottom:10px;left:0;right:0;
  display:flex;justify-content:center;gap:6px;z-index:2;
}
.cn-svc-gdot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,0.4);cursor:pointer;
  transition:background var(--cnsvc-transition);
}
.cn-svc-gdot.active{background:var(--cnsvc-cyan)}

/* ---- Responsive ---- */
@media(max-width:1024px){
  .cn-services-grid{grid-template-columns:repeat(2,1fr)!important}
  .cn-svc-card{height:auto!important;min-height:380px}
  .cn-svc-slide{flex:0 0 calc(50% - 10px)}
}
@media(max-width:640px){
  .cn-services-grid{grid-template-columns:1fr!important}
  .cn-svc-slide{flex:0 0 85%}
}