/* ============================================
   Zebra Services Grid — block-specific styles
   ============================================ */

.services{
  padding:var(--section-pad) 0;
}

/* ---- Header ---------------------------------------------------------- */
.services-head{
  margin-bottom:var(--xxl);
}
.services-head--split{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:var(--xxl);
  align-items:end;
}
.services-head--centered{
  display:block;
  text-align:center;
  max-width:880px;
  margin-left:auto;
  margin-right:auto;
}
.services-head__main .eyebrow{display:block;margin-bottom:var(--md)}
.services-head--split .services-head__main h2{max-width:14ch}
.services-head--centered .services-head__main h2{margin:0 auto var(--md)}
.services-head .pitch{
  color:#222;
  font-size:var(--fs-body-lg);
  margin:0;
}

/* ---- Grid ------------------------------------------------------------ */
.services-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--c-line);
}

.service{
  background:#fff;
  padding:var(--xl) var(--lg);
  min-height:320px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  position:relative;
  transition:background .25s ease;
}
.service--linked{cursor:pointer}
.service:hover{background:var(--c-primary)}

.service__body{display:block}

.svc-icon{
  width:84px;height:84px;
  display:grid;place-items:center;
  margin-bottom:var(--md);
  transition:transform .3s ease;
}
.svc-icon img{
  max-width:100%;
  max-height:100%;
  display:block;
}
.service:hover .svc-icon{
  transform:translateY(-4px) rotate(-3deg);
}

.service .idx{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  letter-spacing:.18em;
  color:var(--c-muted);
}

.service h3{
  font-family:var(--ff-display);
  font-size:30px;
  font-weight:400;
  line-height:1;
  letter-spacing:.025em;
  text-transform:uppercase;
  margin:var(--lg) 0 var(--md);
  color:#000;
}

.service p{
  color:#333;
  margin:0;
  font-size:14px;
}

.service .example{
  margin-top:var(--md);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--c-muted);
}
.service:hover .example{color:#000}

/* ---- Footer / "more" link ------------------------------------------- */
.service .more{
  margin-top:var(--lg);
  font-weight:600;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:10px;
  color:#000;
  text-decoration:none;
}
.service a.more:hover{
  color:#000;
}
.service .more svg{
  width:24px;
  height:12px;
  transition:transform .25s ease;
}
.service:hover .more svg{transform:translateX(6px)}
.service a.more:focus-visible{
  outline:2px solid var(--c-primary);
  outline-offset:3px;
}

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 980px){
  .services-head--split{
    grid-template-columns:1fr;
    gap:var(--xl);
  }
  .services-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

@media (max-width: 640px){
  /* minmax(0, 1fr) statt 1fr: `1fr` ist `minmax(auto, 1fr)` und kann nicht
   * unter die Min-Content-Breite der Karte schrumpfen. Die Ueberschrift
   * "Personalisierung & Recommendations" blies die Spur auf gemessene
   * 395px in einem 372px-Container. `overflow-wrap` im body hilft hier
   * NICHT: break-word erlaubt den Zeilenumbruch, geht aber nicht in die
   * Min-Content-Berechnung eines Grid-Tracks ein. */
  .services-grid{grid-template-columns:minmax(0, 1fr)}

  /* Karten-Innenabstand auf schmalen Displays reduzieren.
   *
   * Mit --lg (28px auf Mobil) begannen die Texte 48px vom Viewport-Rand
   * (20px Container-Gutter + 28px Karte) und damit sichtbar weiter rechts
   * als die Ueberschrift der Sektion, die direkt am Gutter sitzt.
   * Mit --sm sind es 36px — die Karte bleibt als Flaeche erkennbar,
   * der Sprung zur Ueberschrift faellt aber kaum noch auf. */
  .service{
    padding-left:var(--sm);
    padding-right:var(--sm);
  }
}

/* ---- Background colour variants ------------------------------------- */

/* SOFT */
.services--bg-soft { background: var(--c-soft-bg); }
.services--bg-soft .services-grid { background: var(--c-line); }
.services--bg-soft .service { background: var(--c-soft-bg); }
.services--bg-soft .service:hover { background: var(--c-primary); }

/* BLACK */
.services--bg-black .services-head .pitch { color: #aaa; }
.services--bg-black .services-head__main .eyebrow { color: var(--c-primary); }
.services--bg-black .services-head__main h2 { color: #fff; }
.services--bg-black .services-grid { background: #333; }
.services--bg-black .service { background: #111; }
.services--bg-black .service:hover { background: var(--c-primary); }
.services--bg-black .service .idx { color: var(--c-primary); }
.services--bg-black .service h3 { color: #fff; }
.services--bg-black .service p { color: #aaa; }
.services--bg-black .service .example { color: var(--c-primary); }
.services--bg-black .service:hover h3,
.services--bg-black .service:hover p,
.services--bg-black .service:hover .idx,
.services--bg-black .service:hover .example { color: #000; }
.services--bg-black .service .more { color: #fff; }
.services--bg-black .service:hover .more { color: #000; }

/* YELLOW */
.services--bg-yellow .services-head__main h2 { color: #000; }
.services--bg-yellow .services-head .pitch { color: #333; }
.services--bg-yellow .services-grid { background: rgba(0,0,0,.15); }
.services--bg-yellow .service { background: #fff; }
.services--bg-yellow .service:hover { background: #000; }
.services--bg-yellow .service:hover h3,
.services--bg-yellow .service:hover p,
.services--bg-yellow .service:hover .example { color: #fff; }
.services--bg-yellow .service:hover .more { color: #fff; }