/* ==========================================================================
   AM Sprachschule — student-services.css
   Page-specific styles for student-services.html. Built on top of the
   tokens and reset already defined in style.css — no new colors or fonts
   introduced. Card grids and the timeline reuse existing site components
   (.features-grid / .feature-card, .progress-timeline) as-is.
   ========================================================================== */

/* ---------- Hero ---------- */
.services-hero {
  background: var(--surface-alt);
  padding: 3.5rem 0 3rem;
}

.services-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.2rem;
  margin: 2rem auto 0;
  justify-content: center;
}
.highlight-chip {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-label);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: .65rem 1.1rem;
  border-radius: var(--radius-sm);
}
.highlight-chip .chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cobalt);
  flex-shrink: 0;
}
.highlight-chip:nth-child(2) .chip-dot { background: var(--gold); }
.highlight-chip:nth-child(3) .chip-dot { background: var(--signal-red); }

/* ---------- Detail section ---------- */
.services-detail { background: var(--surface); }

/* ---------- How it works (steps) ---------- */
.services-steps { background: var(--surface-alt); }

/* ---------- Contact / support band ---------- */
.services-support {
  background: var(--cobalt-deep);
}
.services-support-inner {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2.5rem;
  align-items: center;
}
.services-support h2 { color: #fff; margin-bottom: .8rem; }
.services-support .section-eyebrow { color: #a9c1f0; }
.services-support .section-eyebrow::before { background: var(--gold); }
.services-support p { color: rgba(255,255,255,.82); max-width: 46ch; }

.services-support-actions {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  align-items: flex-start;
}
.services-support-actions address {
  color: rgba(255,255,255,.85);
  font-size: .92rem;
  line-height: 1.7;
}
.services-support-actions address a { color: #fff; text-decoration: underline; }
.services-support-actions .btn-group {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: .4rem;
}
.services-support .btn-primary { background: #fff; color: var(--cobalt-deep); }
.services-support .btn-primary:hover { background: var(--cobalt-tint); box-shadow: var(--shadow-md); }
.services-support .btn-outline { color: #fff; border-color: rgba(255,255,255,.55); }
.services-support .btn-outline:hover { border-color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .services-support-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .services-highlights { flex-direction: column; align-items: stretch; }
  .highlight-chip { justify-content: center; }
}