/* =========================================================
   Core Food Groups — Fixed 2x2 Grid (Isolated)
   ========================================================= */

:root {
  --white:#fff;
  --text:#192168;
  --blue:#192168;
  --red:#AF1E2D;
  --muted:#555;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,0.18);
}

/* ---------- Grid Layout ---------- */
.foodgroup-grid {
  max-width: 1100px;
  margin: 3rem auto;
  padding: 0 1.25rem;

  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 🔒 2 × 2 grid */
  gap: 22px;

  align-items: stretch;
}

/* ---------- Card ---------- */
.foodgroup-card {
  background: var(--white);
  border: 2px solid var(--red);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover */
.foodgroup-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
}

/* ---------- Title ---------- */
.foodgroup-card strong {
  font-size: 1.3rem;
  color: var(--text);
  font-weight: 800;
}

/* ---------- Text ---------- */
.foodgroup-card p {
  margin-top: 10px;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ---------- Tablet ---------- */
@media (max-width: 900px) {
  .foodgroup-grid {
    grid-template-columns: 1fr;
  }
}