/* ==============================
   [JINTO] Menu Piatti – Griglia
   ============================== */

.jinto-menu-piatti {
  width: 100%;
}

.jinto-menu-piatti--empty {
  text-align: center;
  font-style: italic;
}

/* Griglia piatti */
/* 4 per riga da desktop, centrati anche quando la riga non è piena */
.jinto-menu-piatti__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* <-- centra anche l'ultima riga se ha meno di 4 piatti */
  gap: 40px;
  margin-bottom: 32px;
}

/* Card singolo piatto */
.jinto-menu-item {
  box-sizing: border-box;
  flex: 0 0 calc(25% - 40px);
  min-width: calc(25% - 40px);
  max-width: calc(25% - 40px);
/* width: calc(25% - 40px); */
/* 	flex-shrink: 0; */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  padding-left: 24px;
  border-left: 1px solid #FBFBFB;
  border-radius: 0px;
  background-color: transparent;
}

/* Titolo piatto */
.jinto-menu-item__title {
	margin: 0;
	color: #FBFBFB;
	line-height: 1em!important;
}

/* Descrizione breve */
.jinto-menu-item__description {
  margin: 0 0 8px 0;
  color: #FBFBFB;
}

/* Prezzo */
.jinto-menu-item__price {
  color: #FBFBFB;
  margin: 0 0 8px 0;
}

/* Contenitore icone allergeni */
.jinto-menu-item__allergens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

/* Contenitore "interattivo" dell'icona */
.jinto-allergen-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 2px;
  border: none;
  background: #ffffff;
  cursor: pointer;
  border-radius: 100%;
}

/* L'SVG come background (qualsiasi URL: SVG, PNG, ecc.) */
.jinto-allergen-icon__svg {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background-image: var(--jinto-allergen-icon-url);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* bubble */
.jinto-allergen-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -8px);
  min-width: 120px;
  max-width: 220px;
  padding: 6px 8px;
  background: #ffffff;
  color: #161615;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  border-radius: 4px;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  z-index: 20;
/*   box-shadow: 0 4px 10px rgba(0,0,0,0.25); */
  text-align: left;
  white-space: normal;
}

/* triangolino sotto il balloon */
.jinto-allergen-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 2px);
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  z-index: 19;
}

/* Mostra tooltip su hover (desktop) */
.jinto-allergen-icon:hover::after,
.jinto-allergen-icon:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Mostra tooltip quando è "attivo" (mobile / click) */
.jinto-allergen-icon.is-active::after,
.jinto-allergen-icon.is-active::before {
  opacity: 1;
  visibility: visible;
}

/* Accessibilità: testo solo per screen reader */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==============================
   Responsività
   ============================== */

@media(max-width: 1400px){
	.jinto-menu-item {
  flex: 0 0 calc(33.33% - 40px);
  min-width: calc(33.33% - 40px);
  max-width: calc(33.33% - 40px);
}
}

/* Tablet: 2 piatti per riga */
@media (max-width: 1024px) {
  .jinto-menu-item {
    flex: 0 0 calc(50% - 24px);
	min-width: calc(50% - 24px);
    max-width: calc(50% - 24px);
  }
 	.jinto-menu-piatti__grid
	{
		gap: 24px;
	}
}

/* Mobile: 1 piatto per riga */
@media (max-width: 767px) {
  .jinto-menu-item {
    flex: 0 0 100%;
	min-width: 100%;
    max-width: 100%;
  }
}