/**
 * @file
 * Stili per il form di approvazione materiali.
 * 
 * Questo file contiene tutti gli stili specifici per il form di approvazione
 * dei materiali nel modulo visato_module.
 */

/* Stili per gli elementi materiale nel form di approvazione */
.materiali-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gin-spacing-m, 1rem);
  margin-bottom: 1rem;
}

.materiale-item {
  border: 1px solid var(--gin-border-color-form-element);
  border-radius: var(--gin-border-radius-s, 4px);
  padding: var(--gin-spacing-m, 1rem);
  background-color: var(--gin-bg-layer);
  transition: var(--gin-transition);
}

.materiale-item:hover {
  border-color: var(--gin-color-text);
  box-shadow: var(--gin-shadow-s, 0 2px 4px rgba(0, 0, 0, 0.1));
}

.materiale-info {
  margin-bottom: 0.75rem;
}

.materiale-titolo {
  color: var(--gin-color-text-light);
  font-size: 0.875rem;
}

.materiale-nome {
  color: var(--gin-color-text);
  font-size: 1rem;
}

.materiale-valore {
  margin-top: 0.5rem;
}

/* Layout responsive per dispositivi più piccoli */
@media (max-width: 768px) {
  .materiali-container {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1200px) {
  .materiali-container {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}