/* ===========================
   Cremeria Scirocco – gelati.css
   - Griglia responsive (4 → 3 → 2 → 1 colonna)
   - Tipografia coerente mobile/desktop
   - Header colorati per categorie
   - Descrizioni (notes) come testo secondario
   =========================== */

:root {
  --font: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --bg:#f5f6fa; --text:#1e1f23; --muted:#747680;
  --yellow:#ffe082; --green:#b9f6ca; --blue:#90caf9; --gray:#eceff1; --cyan:#b2ebf2;
  --card:#fff; --shadow:0 6px 18px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }

/* Blocca l'autosizing dei browser mobile (Chrome/Brave/Safari) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: 16px; /* base tipografica */
}

body {
  line-height: 1.45;
  margin: 0;
  padding: 16px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}

h1 {
  margin: 0 0 16px;
  font-size: 1.4rem;
}

/* ====== Griglia ====== */
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr); /* Desktop grande */
}

/* Laptop */
@media (max-width: 1280px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tablet orizzontale / laptop piccolo */
@media (max-width: 1100px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Telefoni: UNA colonna + leggibilità migliore */
/* Telefoni e tablet verticali: UNA colonna + leggibilità migliore */
@media (max-width: 1024px) {
  .grid { grid-template-columns: 1fr; }

  /* base */
  html { font-size: 17px; }
  body { padding: 16px; line-height: 1.5; }

  /* card */
  .col  { border-radius: 14px; }

  /* intestazione colonna */
  .head { font-size: 1.05rem; }

  /* titoli gusti */
  .title { font-size: 1.1rem; }  /* ~17.6px */
  
  /* descrizione */
  .desc  { 
    font-size: 1rem;             /* 16px, invece di 0.98 */
    line-height: 1.45; 
    color: #555;                 /* più contrastato del grigio attuale */
  }

  /* spaziatura verticale tra i gusti */
  .task  { margin: 10px 0; }

  /* padding interno maggiore nelle card */
  .body  { padding: 18px 20px; }
  
  .row-title{
    align-items:flex-start;
  }

  .allergene-icon{
    display:none;         /* mobile: nascondo icone */
  }

  .allergene-text{
    display:inline;
    font-style: italic;
    color: var(--muted);
    font-size: 0.95rem;
  }
  
  /* separatore tra allergeni */
  .allergene:not(:last-child) .allergene-text::after{
    content: " · ";
    font-style: normal;
    opacity: .7;
  }
}

@media (max-width: 480px) {
  .desc { max-width: 100%; }
  .allergeni { gap: 4px; }
}

/* Ulteriore guardrail: se è un device touch, forziamo 1 colonna comunque */
@media (hover: none) and (pointer: coarse) {
  .grid { grid-template-columns: 1fr; }
}

/* Se vuoi ridurre ulteriormente su telefoni molto piccoli, abilita:
@media (max-width: 700px) {
  .title { font-size: 1rem; }
  .desc  { font-size: 0.9rem; }
}
*/

/* ====== Card/Colonne ====== */
.col {
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.head {
  padding: 14px 18px;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  display:flex;
  align-items:center;
  gap:12px;
}

.head-emoji{
  font-size: 1.15rem;
  line-height: 1;
}

.head-title{
  font-weight: 900;          /* grassetto vero */
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 1.05rem;
}

.head-count{
  font-weight: 700;
  opacity: 0.7;
  font-size: 1rem;
}

.head small {
  font-weight: 600;
  opacity: 0.7;
}

/* Header per categoria */
.h-yellow { background: var(--yellow); } /* SI LATTE • SI UOVA   */
.h-green  { background: var(--green); }  /* SI LATTE • NO UOVA   */
.h-blue   { background: var(--blue); }   /* NO LATTE • NO UOVA   */
.h-gray   { background: var(--gray); }   /* eventuale neutro     */
.h-cyan   { background: var(--cyan); }   /* GRANITE (richiesto)  */

.body { padding: 12px 14px; }

/* ====== Liste ====== */
ul { list-style: none; margin: 0; padding: 0; }

.task {
  /*padding-bottom: 14px;*/
  margin-bottom: 18px;
  border-bottom: 1px dashed #eee;
}

/* eventuali sotto-voci (se usi parent/child nei task) */
.task ul {
  margin-left: 16px;
  padding-left: 10px;
  border-left: 2px solid #eef1f4;
}

/* Titolo + data scadenza (se usata) */
.task .row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.task:hover {
  background: rgba(0,0,0,0.015);
  border-radius: 10px;
}

.title { 
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* descrizione/notes: “secondary text” */
.desc {
  margin-top: 4px;
  margin-bottom: 6px;
  font-size: 0.95rem;  /* ~14.7px */
  line-height: 1.45;
  color: var(--muted);
  font-family: var(--font-secondary, var(--font));
  max-width: 70ch;     /* evita righe troppo lunghe */
  word-break: break-word;
}

/* note extra */
.due   { color:#007aff; margin-left: 6px; }
.notes { color: var(--muted); }
.empty { color: var(--muted); font-style: italic; margin: 6px 0; }

/* evidenziazioni scadenze (se usi "due") */
.due.overdue { color:#d32f2f; font-weight: 700; }
.due.today   { color:#ff8f00; font-weight: 700; }

/* ====== Font secondario opzionale ======
   Se hai anche il grassetto separato, aggiungi un secondo @font-face per 700. */
@font-face {
  font-family: "InterDisplay";
  src: url("https://cdn.readytgo.com/scirocco/InterDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root { --font-secondary: "InterDisplay", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* Troncamento descrizione (se vuoi) */
.desc.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.allergeni-row {
  margin-top: 6px;
}

.allergeni{
	display:flex;
	gap:0px;
	flex-wrap:wrap;
	margin-top:6px
}

/* ===== Allergeni inline a destra del titolo ===== */
.row-title{
  display:flex;
  align-items:flex-star;
  justify-content:space-between;
  gap:12px;
}

.allergeni.inline{
  display:flex;
  flex-wrap:wrap;
  align-items: center;
  margin-top:2px;           /* annulla margin che avevi per layout sotto */
}

/* Desktop: solo icone, niente pill */
.allergene{
  background:none;
  width:auto;
  height:auto;
  border-radius:0;
  padding:0;
}

.allergene-icon{
  width:26px;
  height:26px;
  object-fit:contain;
  display:inline-block;
}

.allergene-text{
  display:none;           /* desktop: nascondo testo */
}