/*
  Core Microsystems Inc.
  File: /css/services.css
  Version: v0.5
  Updated: 2026-01-19
*/

/* ===== Hero ===== */
.services-hero {
  background: var(--hero-bg);
  background: -webkit-gradient(linear, left top, right bottom, 
    from(var(--blue-900)), 
    to(var(--blue-500)));
  /* Keep the complex one above → Safari will use the last one it understands */
color: #ffffff;
 position: relative;
  z-index: auto; /* keep hero in normal stacking */
}
.services-hero-bg{
  position: absolute;
  inset: 0;
  z-index: 0;          /* force it behind everything in the hero */
  pointer-events: none;  /* cannot steal clicks */
}

/* Make sure titles/subtitle inside hero also stay white */
.services-hero h1,
.services-hero h2,
.services-hero p {
  color: inherit !important;
}



/* Services list */
.services-list{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  max-width: 1600px;
}


/* Card row */
.service-row{
  display:grid;
  grid-template-columns: 0.95fr 1.05fr; /* image | content */
  background:#fff;
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
  min-height: 280px; /* smaller cards */
}

/* Image */
.service-image img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
/* ===== Hover interactions ===== */

/* Make card lift a bit on hover */
.service-row{
  transition: transform 220ms ease, box-shadow 220ms ease;
  will-change: transform;
} 

.service-row:hover{
 /* transform: translateY(-4px);
  box-shadow: var(--shadow);*/
  box-shadow: 0 20px 50px rgba(2, 6, 23, 0.22);
}

/* Ensure image can zoom cleanly */
.service-image{
  overflow: hidden; /* important: keeps zoom inside rounded card */
}

/* Smooth image zoom */
.service-image img{
  transition: transform 320ms ease;
  transform: scale(1);
  will-change: transform;
}

/* Zoom image when hovering the card */
.service-row:hover .service-image img{
  transform: scale(1.06);
}

/* ----- "View Details →" arrow nudge ----- */

/* Make the link act like a controllable inline element */
.card-link{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* Wrap/target the arrow using pseudo-element so we can animate it */
.card-link::after{
  content: "→";
  display: inline-block;
  transition: transform 200ms ease;
}

/* If your HTML already includes the arrow character, remove it from the link text
   (or leave it; you'll just see two arrows). Prefer removing it from HTML. */

/* Move arrow on link hover */
.card-link:hover::after{
  transform: translateX(6px);
}

/* Optional: also move arrow when hovering the whole card */
.service-row:hover .card-link::after{
  transform: translateX(6px);
}


/* Content */
.service-content{
  padding: 1.8rem 2rem;
}
.service-content h3{
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: .45rem;
}
.service-content p{
  color: var(--muted);
  font-size: .85rem;
  margin-bottom: .9rem;
}
.service-content h4{
  font-size: .9rem;
  letter-spacing:.08em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.service-content ul{
  padding-left: 1.1rem;
  margin-bottom: 1.4rem;
  color: var(--muted);
}
.service-content li{
  margin-bottom: .35rem;
}

/* Responsive */
@media (max-width: 980px){
  .services-list{
    grid-template-columns: 1fr;
  }

  .service-row{
    grid-template-columns: 1fr;
  }

  .service-image{
    height: 220px;
  }
}