/* ==== Variables & shared tokens ==== */
:root{
  --prod-card-h: 380px;                 /* total card height (desktop) */
  --prod-media-pad: 22px;               /* white padding around product image */
  --prod-radius: 16px;
  --prod-shadow: 0 12px 28px rgba(8,18,44,.12);
  --prod-shadow-hover: 0 18px 36px rgba(8,18,44,.18);
  --prod-text: var(--kc-navy, #0f113a);
  --prod-accent: var(--kc-accent, #ff7a00);
}

/* Responsive card height (optional) */
@media (max-width: 1024px){
  :root{ --prod-card-h: 340px; }
}
@media (max-width: 640px){
  :root{ --prod-card-h: 300px; }
}

/* ===== Products page heading — match site style ===== */
#products > h2{
  font-weight: 800;                     /* bold */
  color: var(--prod-text);              /* site heading color */
  letter-spacing: .5px;                 /* subtle tracking */
  margin: 0 0 16px;                     /* tidy spacing */
  line-height: 1.15;
}
@media (min-width: 640px){
  #products > h2{
    font-size: clamp(1.6rem, 3vw, 2.2rem);
  }
}


/* ==== Grid (3 / 2 / 1) ==== */
.prod-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 28px;
  align-items: stretch;                 /* ensures equal height usage */
}
@media (max-width:1024px){ .prod-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){  .prod-grid{ grid-template-columns: 1fr; } }

/* ==== Card (full-card link, equal height, rounded, shadow, lift) ==== */
.prod-card{
  display: grid;
  grid-template-rows: auto 1fr;         /* media on top, body fills remaining */
  background: #fff;
  border-radius: var(--prod-radius);
  overflow: hidden;                     /* round image corners too */
  text-decoration: none;                /* whole card is a link */
  color: var(--prod-text);
  box-shadow: var(--prod-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  block-size: var(--prod-card-h);       /* 👈 equal height for all cards */
  will-change: transform, box-shadow;   /* smoother hover on some GPUs */
}
.prod-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--prod-shadow-hover);
}
.prod-card:active{
  transform: translateY(0);
  box-shadow: var(--prod-shadow);
}
.prod-card:focus-visible{
  outline: 3px solid var(--prod-accent);
  outline-offset: 3px;
  border-radius: calc(var(--prod-radius) + 3px);
}

/* Media: fixed area, centered content */
.prod-media{
  aspect-ratio: 16/9;            /* uniform media height */
  background: #fff;
  display: flex;                  /* center children */
  align-items: center;            /* vertical center */
  justify-content: center;        /* horizontal center */
  padding: var(--prod-media-pad); /* use container padding, not img */
}

/* Image: scale down, keep aspect, stay centered */
.prod-media img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;            /* don’t crop */
  object-position: center center; /* ensure true centering */
  display: block;
}


/* ==== Body (title + description) ==== */
.prod-body{
  padding: 18px 20px;
  display: grid;
  align-content: start;
  gap: 6px;
}
.prod-body h3{
  margin: 0;
  font-weight: 800;
  letter-spacing: .5px;

  /* keep titles to 2 lines to avoid vertical jitter */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-body p{
  margin: 0;
  color: #3a475a;
  font-weight: 500;
}

/* ==== Products heading styled like "Infrastructure" ==== */
#products > h2{
  position: relative;
  margin: 0 0 16px;
  padding-left: 28px;                  /* room for the blue bars */
  line-height: 1.15;
  font-weight: 800;
  color: var(--kc-accent, #ff7a00);    /* same orange as site accent */
  letter-spacing: .5px;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

/* twin blue accent bars */
#products > h2::before,
#products > h2::after{
  content: "";
  position: absolute;
  left: 0;
  top: .08em;                          /* align with cap height */
  bottom: .08em;
  border-radius: 3px;
}

#products > h2::before{
  width: 6px;
  background: var(--kc-blue-700, #1f6aff);  /* primary blue bar */
}

#products > h2::after{
  left: 10px;                          /* small gap between bars */
  width: 4px;
  background: var(--kc-blue-400, #4ea3ff);  /* lighter blue bar */
}