/* =========================================================
   phrases/phrases.css
   Minimal additional styles for the /phrases/ phrasebook pages.
   Everything else on these pages reuses existing main.css classes
   (.hero, .prose-block, .lang-table, .phrase-card, .dish-risk-table,
   .related-articles, .cta-inline, .tool-bubble, .disclaimer-block,
   .review-block). Generated by scripts/generate-phrase-pages.js —
   hand-edit here is fine, this file is not overwritten by the script.
   ========================================================= */

.phrase-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.phrase-hub-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--white);
  padding: 1.1rem 1.25rem;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.phrase-hub-card:hover {
  border-color: var(--clay);
}

.phrase-hub-card__native {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--bark);
  margin: 0 0 0.2rem;
}

.phrase-hub-card__en {
  font-size: 0.85rem;
  color: var(--soil);
  margin: 0 0 0.5rem;
}

.phrase-hub-card__meta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dust);
  margin: 0;
}