// ─────────────────────────────────────────────────────────────────────────────
// Page: Languages Intel  (.ln-* layout)
// File: src/scss/pages/_languages.scss
//
// STRUCTURAL LAYOUT ONLY — zero colors, zero typography here.
// Visual rules live in components/_languages.scss.
// ─────────────────────────────────────────────────────────────────────────────

// ── Stat chips row ────────────────────────────────────────────────────────────

.ln-stats-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.ln-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  min-width: 7rem;
  flex: 1;
}

// ── Language list ─────────────────────────────────────────────────────────────

.ln-list {
  margin-top: 0.5rem;
}

.ln-list-hd {
  display: grid;
  grid-template-columns: 8rem 1fr 5rem 16rem;
  gap: 0 0.75rem;
  padding: 0.35rem 0.75rem;
  align-items: center;

  @media (max-width: 700px) {
    grid-template-columns: 7rem 1fr 4rem;
    .ln-hd-syms { display: none; }
  }
}

.ln-row {
  display: grid;
  grid-template-columns: 8rem 1fr 5rem 16rem;
  gap: 0 0.75rem;
  padding: 0.6rem 0.75rem;
  align-items: start;

  @media (max-width: 700px) {
    grid-template-columns: 7rem 1fr 4rem;
    .ln-syms-cell { display: none; }
  }
}

// ── Bar cell ──────────────────────────────────────────────────────────────────

.ln-bar-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

// ── Symbols cell ──────────────────────────────────────────────────────────────

.ln-syms-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}