/* Hide the badge in the article list */
.article-list .article .featured-article-badge {
  display: none;
  visibility: hidden;
}

/* Hide the badge in a single article view */
.article-details .featured-article-badge {
  display: none;
  visibility: hidden;
}

/* --- GRIGLIA GENERALE --- */

.grid {
  display: grid;
  grid-template-columns: 1fr; /* default */
  gap: 15px;
  padding-top: 20px;
}

/* Mobile → 2 colonne */
@media (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop → 3 colonne */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- ITEM --- */

.item {
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 25px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  background: #fff;
}

/* Icona */
.item .icon img {
  width: 80px;
  height: auto;
  display: block;
}

/* Contenuto */
.item .content {
  flex: 1;
}

.item .content p {
  font-size: 18px;
  margin: 0 0 15px;
  font-weight: 600;
}

/* Pulsante */
.item .content .btn {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid #00558c;   /* bordo blu */
  text-decoration: none;
  color: #00558c;              /* testo blu */
  font-size: 16px;
}

/* Hover */
.item .content .btn:hover {
  background: #00558c;         /* sfondo blu */
  color: #fff;                 /* testo bianco */
}

/* --- MOBILE: icona sopra + contenuto sotto --- */

/* --- MOBILE: icona sopra, pulsante in basso --- */
@media (max-width: 480px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .item {
    flex-direction: column;   /* icona sopra */
    text-align: center;
    align-items: center;
    gap: 20px;
    padding: 15px;
  }

  /* il contenitore del testo diventa una colonna */
  .item .content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  /* il pulsante va SEMPRE in basso */
  .item .content .btn {
    margin-top: auto;
    padding: 7px 12px;
  }

  .item .icon img {
    width: 60px;
  }
}