/* Componente "Cura del capo".
   ---------------------------------------------------------------------------
   Copia fedele del CSS che vive dentro care_label.html (il template Jinja del
   modulo etichetta), estratto senza modifiche.

   Perche' NON attinge da ogigia-tokens.css, pur potendo:
   il componente ha gia' una sua palette --ogigia-*, e di quei valori solo due
   coincidono davvero coi token (--ogigia-cream = --og-cream = #F4F1EE,
   --ogigia-blue = --og-blue = #3085EE). Gli altri sono una variante piu' calda
   e deliberata: --ogigia-ink #2B2B28 contro --og-dark #2A2E35, --ogigia-card
   #EFEAE3 contro --og-cream #F4F1EE.
   Soprattutto: questo componente e' gia' in produzione dentro ogigia-api
   (care_instructions.py, con i suoi test). Agganciarlo ai token del sito lo
   farebbe divergere dalla versione dell'API alla prima modifica di palette.
   Tenendolo identico, resta un componente solo con un contratto solo: il
   giorno che si vuole unificare, e' una riga.

   Caricato solo dai template che includono partials/care-label.html.twig. */

.care-label {
  --ogigia-cream: #F4F1EE;
  --ogigia-blue: #3085EE;
  --ogigia-blue-soft: rgba(48, 133, 238, 0.10);
  --ogigia-ink: #2B2B28;
  --ogigia-ink-soft: rgba(43, 43, 40, 0.62);
  --ogigia-line: rgba(43, 43, 40, 0.12);
  --ogigia-card: #EFEAE3;
  --ogigia-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Se il tema Grav "quark" espone una variabile font (es. var(--font-body)),
     sostituire --ogigia-font con quella per allineare la tipografia al sito. */

  max-width: 520px;
  margin: 1.75rem 0;
  padding: 1.25rem 1.35rem 1.1rem;
  background: var(--ogigia-card);
  border: 1px solid var(--ogigia-line);
  border-radius: 14px;
  font-family: var(--ogigia-font);
  color: var(--ogigia-ink);
}

.care-label__title {
  margin: 0 0 0.9rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.care-label__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1rem;
}

.care-label__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 5.6rem;
}

.care-label__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--ogigia-blue-soft);
  color: var(--ogigia-blue);
  margin-bottom: 0.4rem;
}

.care-label__icon svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: currentColor;
}

.care-label__text {
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--ogigia-ink);
}

.care-label__treatments {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--ogigia-line);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.1rem;
}

.care-label__treatment {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.care-label__icon--treatment {
  width: 2.1rem;
  height: 2.1rem;
  background: rgba(90, 138, 100, 0.12);
  color: #5A8A64;
}

.care-label__icon--treatment svg {
  width: 1.2rem;
  height: 1.2rem;
}

.care-label__treatment .care-label__text {
  font-size: 0.8rem;
  text-align: left;
}

.care-label__eol {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--ogigia-line);
}

.care-label__eol-line {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}

.care-label__eol-line + .care-label__eol-line {
  margin-top: 0.3rem;
}

.care-label__note {
  margin: 1.1rem 0 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--ogigia-line);
  font-size: 0.72rem;
  font-style: italic;
  color: var(--ogigia-ink-soft);
  line-height: 1.4;
}

@media (max-width: 420px) {
  .care-label__list {
    justify-content: space-between;
  }
  .care-label__item {
    width: 4.6rem;
  }
}