/*
Styling for the "Menu Category" ACF block (gutenberg/acf/menu-category.php).

This is a plain, hand-written CSS file loaded independently from the
webpack/node-sass build (see inc/enqueue.php). The same rules also live in
assets/sass/blocks/_custom.sass as the long-term source — once `npm run
build` works again in this environment, app.css will include them too and
this file can be removed from the enqueue (or deleted).
*/

.acf-block-menu-category {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  margin-top: var(--groupSpacing);
}

.acf-block-menu-category__label i {
  display: block;
  margin-top: 0.25rem;
}

.acf-block-menu-category__items .menu-item:not(:last-of-type) {
  margin-bottom: 1rem;
}

.acf-block-menu-category .menu-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.acf-block-menu-category .menu-item__name {
  flex: 1 1 auto;
  min-width: 0;
}

.acf-block-menu-category .menu-item__price {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .acf-block-menu-category {
    grid-template-columns: 1fr;
  }
}