/*
 * Overrides propios del proyecto (post-migración EE -> CI4). Se carga
 * DESPUÉS de style.css (ver app/Views/public/ee/layout.php), así que gana
 * con la misma especificidad por orden de aparición.
 */

/* ============================================================
 * Alineación de indicadores de perfil sensorial (Dulzor/Sweetness,
 * Amargor/Bitterness, Acidez/Acidity, Astringencia/Astringency).
 *
 * Usado en: crear-ensamblaje (resultado de simulación), vinos
 * fundamentales, y las cards de "Mi perfil" (historial/favoritos).
 * Markup común: .traits > .traits__item > (.traits__label + .traits__levels)
 *
 * Problema: .traits__item (flex + justify-content:space-between) hacía que
 * los puntos de cada fila arrancaran justo después del ANCHO DEL LABEL de
 * esa fila. Al traducir a EN/PT los labels quedan con largos distintos
 * entre sí (ej. "Astringency" es más largo que "Acidity"), así que los
 * puntos de cada fila terminaban en una X distinta -> se veían "corridos"
 * en vez de alineados en columna, como en una tabla.
 *
 * Fix: .traits pasa a ser un grid de 2 columnas (label | indicadores)
 * COMPARTIDO por todas las filas. .traits__item se vuelve "display:
 * contents" para que sus dos hijos entren directo al grid del padre. Así
 * la columna de indicadores arranca siempre en la misma X (el ancho de la
 * columna 1 se autoajusta al label más largo de TODOS los idiomas), sin
 * necesidad de anchos fijos en px. Se conserva el orden original de las
 * filas y el layout apilado (label arriba, puntos abajo) en pantallas muy
 * angostas (<380px).
 * ============================================================ */
.traits {
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr;
  column-gap: 1.5rem;
  row-gap: 0.625rem;
  align-items: center;
}
.traits__item {
  display: contents;
}
.traits__label {
  grid-column: 1;
  text-align: left;
}
.traits__levels {
  grid-column: 2;
  flex-basis: auto;
  align-self: center;
  justify-content: flex-start;
}

@media screen and (max-width: 380px) {
  .traits {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }
  .traits__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }
  .traits__label,
  .traits__levels {
    grid-column: auto;
  }
  .traits__levels {
    align-self: flex-start;
    justify-content: flex-start;
  }
}