/* ==========================================================================
   SECTION 8 — LANGUAGES
   Light section. Compact bilingual capability display.
   ========================================================================== */

.languages__wrap {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  margin-top: var(--space-7);
}
.languages__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.lang-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  min-width: 220px;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.lang-card:hover { border-color: rgba(197, 157, 95, 0.45); transform: translateY(-2px); }
.lang-card__flagmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold-100); color: var(--accent-strong);
  border: 1px solid rgba(197, 157, 95, 0.25);
}
.lang-card__flagmark svg { width: 22px; height: 22px; }
.lang-card__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.125rem; color: var(--fg); }
.lang-card__level { font-size: var(--fs-body-sm); color: var(--fg-muted); }

@media (min-width: 760px) {
  .languages__wrap { grid-template-columns: 1fr auto; }
}