/* FILE: assets/css/services.css */
/* ============================================================
   Energiephase · Services (Leistungen)
   Dark glass cards: Photovoltaik, Wärmepumpe, Batteriespeicher,
   Wallbox, Energieberatung. Icon tile + hover lift + corner glow.
   ============================================================ */

.services{position:relative;overflow:hidden}
.services__glow{width:520px;height:520px;top:10%;left:-180px}

.services__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.5rem);
}

.service-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:var(--ep-space-3);
  padding:clamp(1.6rem,2.5vw,2.2rem);
  border-radius:var(--ep-radius-lg);
  background:var(--ep-glass);
  background-image:var(--ep-glass-gradient);
  border:1px solid var(--ep-glass-border);
  box-shadow:var(--ep-shadow),var(--ep-shadow-inset);
  transition:transform var(--ep-dur) var(--ep-ease),
             border-color var(--ep-dur) var(--ep-ease),
             box-shadow var(--ep-dur) var(--ep-ease);
}
.service-card:hover{
  transform:translateY(-6px);
  border-color:var(--ep-glass-border-hi);
  box-shadow:var(--ep-shadow-lg),var(--ep-shadow-inset);
}

/* corner glow blob */
.service-card::before{
  content:"";
  position:absolute;
  width:220px;height:220px;
  top:-120px;right:-120px;
  border-radius:50%;
  background:rgba(81,163,86,.12);
  filter:blur(10px);
  transition:transform var(--ep-dur-slow) var(--ep-ease);
  pointer-events:none;
}
.service-card:hover::before{transform:scale(1.35)}

.service-card__icon{
  position:relative;
  z-index:1;
  width:60px;height:60px;
  display:grid;place-items:center;
  border-radius:var(--ep-radius);
  background:rgba(81,163,86,.12);
  border:1px solid rgba(81,163,86,.25);
  color:var(--ep-yellow);
}
.service-card__icon svg{width:30px;height:30px}

.service-card__title{
  position:relative;z-index:1;
  font-size:var(--ep-fs-h3);
}
.service-card__text{
  position:relative;z-index:1;
  color:var(--ep-text-muted);
  font-size:1rem;
  line-height:var(--ep-lh-body);
}

.service-card__link{
  position:relative;z-index:1;
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--ep-font-display);
  font-weight:600;
  font-size:.95rem;
  color:var(--ep-yellow);
  padding-top:var(--ep-space-2);
}
.service-card__link svg{width:18px;height:18px;transition:transform var(--ep-dur) var(--ep-ease)}
.service-card__link:hover svg{transform:translateX(4px)}

/* Make the 5-card set balanced: first two span wider on 6-col grid */
@media (min-width:961px){
  .services__grid{grid-template-columns:repeat(6,1fr)}
  .service-card{grid-column:span 2}
  /* last two cards center: 5 items -> rows of 3 + 2 (centered) */
  .service-card:nth-child(4){grid-column:2 / span 2}
  .service-card:nth-child(5){grid-column:4 / span 2}
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .services__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .services__grid{grid-template-columns:1fr}
}