/*
 * .c-public-fields: "what becomes public", read only. What a listing always shows, and the fields the
 * owner chooses one by one. Used by the home's FAQ and by /negocios/ (api/src/views/partials/publicFields.js),
 * and built from form-config, so the words here are the words of the registro.
 *
 *   <div class="c-public-fields">
 *     <div class="c-public-fields__group">
 *       <p class="c-public-fields__title">Siempre se ve</p>
 *       <ul class="c-public-fields__list"><li class="c-public-fields__item">Nombre del negocio</li> ...</ul>
 *     </div>
 *     <div class="c-public-fields__group">
 *       <p class="c-public-fields__title">Lo eliges tú</p>
 *       <ul class="c-public-fields__list">
 *         <li class="c-public-fields__item c-public-fields__item--choice">
 *           <span class="c-public-fields__label">WhatsApp del negocio</span>
 *           <span class="c-public-fields__tag">Tú decides</span></li> ...</ul>
 *     </div>
 *   </div>
 *
 * The choice is carried by the words "Tú decides", never by color alone. Two columns from 40em.
 */
.c-public-fields {
  display: grid;
  gap: var(--md-space-5);
}

@media (min-width: 40em) {
  .c-public-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--md-space-6);
  }
}

.c-public-fields__title {
  margin-block-end: var(--md-space-3);
  font-size: var(--md-font-size-sm);
  font-weight: var(--md-weight-bold);
  color: var(--md-color-ink-soft);
}

.c-public-fields__list {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-2);
}

.c-public-fields__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--md-space-2) var(--md-space-3);
  min-block-size: 2.5rem;
  overflow-wrap: anywhere;
}

/* The ".pro" point as a bullet, in the accent green (non-text UI, 3.3:1 or better on both grounds). */
.c-public-fields__item::before {
  content: '';
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: var(--md-radius-full);
  background: var(--md-color-accent);
}

.c-public-fields__label {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.c-public-fields__tag {
  flex: none;
  padding: var(--md-space-1) var(--md-space-3);
  border-radius: var(--md-radius-full);
  background: var(--md-color-tint-primary);
  font-size: var(--md-font-size-sm);
  font-weight: var(--md-weight-bold);
  line-height: 1.2;
}