/* GG Explore Courses - frontend styles */
.ggec-grid{
  display:grid;
  gap:18px;
}
.ggec-cols-1{grid-template-columns:1fr;}
.ggec-cols-2{grid-template-columns:repeat(2,1fr);}
.ggec-cols-3{grid-template-columns:repeat(3,1fr);}
.ggec-cols-4{grid-template-columns:repeat(4,1fr);}

@media (max-width: 1024px){
  .ggec-cols-4,.ggec-cols-3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 640px){
  .ggec-cols-4,.ggec-cols-3,.ggec-cols-2{grid-template-columns:1fr;}
}

.ggec-card{
  background:#fff;
  border:1px solid #e6ecf2;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 100%;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ggec-card:hover{
  transform: translateY(-4px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.ggec-image{
  aspect-ratio: 16 / 10;
  overflow:hidden;
  background:#f4f7fb;
}
.ggec-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform: scale(1);
  transition: transform .35s ease;
}
.ggec-card:hover .ggec-image img{
  transform: scale(1.06); /* hover zoom */
}

.ggec-body{
  padding:14px 16px 8px 16px;
  flex:1;
}
.ggec-subtitle{
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  text-transform:none;
  margin-bottom:6px;
}
.ggec-title{
  font-size:18px;
  line-height:1.25;
  margin:0 0 8px 0;
  font-weight:800;
}
.ggec-desc{
  color:#51606f;
  font-size:14px;
  margin:0 0 14px 0;
}

.ggec-cta{
  padding:0 16px 16px 16px;
}
.ggec-btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px; /* fully rounded */
  color:#fff;
  text-decoration:none;
  font-weight:700;
  transition: filter .2s ease, transform .05s ease;
}
.ggec-btn:hover{ filter:brightness(1.05); }
.ggec-btn:active{ transform: scale(0.98); }

/* empty */
.ggec-empty{
  border:1px dashed #cfd8e3;
  border-radius:12px;
  padding:16px;
  color:#51606f;
}
/* ===== Explore Courses button color fix ===== */
:root{
  --gg-purple:#3C0D73;        /* base */
  --gg-purple-strong:#4B0D8C; /* hover */
}

.ggec-card .ggec-btn,
.ggec-card .ggec-btn:visited{
  background: var(--gg-purple) !important;
  border: 1px solid var(--gg-purple) !important;
  color:#fff !important;
}

.ggec-card .ggec-btn:hover,
.ggec-card .ggec-btn:focus{
  background: var(--gg-purple-strong) !important;
  border-color: var(--gg-purple-strong) !important;
  filter: brightness(1.04);
}