/* =========================================
   MINIATURE OCCHIO SECCO / CAUSE
   stessi nomi classe, layout molto più ordinato
========================================= */

/* colonne miniature: più aria e allineamento */
.riga-presentazione .row > [class*="col-"]{
  margin-bottom: 18px;
}

/* contenitore singola miniatura */
.miniature_occhio_secco{
  height: 100%;
  min-height: 210px;
  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;

  padding: 16px 12px 14px;
  border-radius: 22px;

  background: linear-gradient(180deg, #ffffff 0%, #faf8fd 100%);
  border: 1px solid rgba(92, 59, 153, 0.10);

  box-shadow:
    0 14px 34px rgba(31, 41, 55, 0.07),
    0 4px 12px rgba(31, 41, 55, 0.04);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.miniature_occhio_secco:hover{
  transform: translateY(-2px);
  border-color: rgba(92, 59, 153, 0.18);
  box-shadow:
    0 18px 42px rgba(31, 41, 55, 0.10),
    0 6px 16px rgba(31, 41, 55, 0.05);
}

/* icona/immagine */
.miniature_occhio_secco img{
  display: block;
  margin: 0 auto;
  width: 92px;
  height: 92px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 10px 22px rgba(92, 59, 153, 0.08),
    inset 0 1px 0 rgba(255,255,255,.75);
  border: 1px solid rgba(92, 59, 153, 0.08);
  padding: 8px;
  flex: 0 0 auto;
}

/* titolo miniatura */
.miniature_occhio_secco h3,
.miniature_occhio_secco figcaption{
  margin: 0;
  min-height: 48px;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  font-size: 0.96rem;
  line-height: 1.3;
  font-weight: 600;
  color: #2f2150;
  text-align: center;

  max-width: 16ch;
}

/* blocco sintomi laterale */
.col-lg-4 > h2{
  margin-bottom: 18px;
}

/* sezione cause: colonne più strette, miniature un po' più compatte */
.riga-presentazione .col-md-2 .miniature_occhio_secco{
  min-height: 198px;
  padding: 14px 10px 12px;
}

.riga-presentazione .col-md-2 .miniature_occhio_secco img{
  width: 82px;
  height: 82px;
}

.riga-presentazione .col-md-2 .miniature_occhio_secco h3{
  min-height: 56px;
  font-size: 0.88rem;
  line-height: 1.25;
  max-width: 15ch;
}

/* tablet */
@media (max-width: 991.98px){
  .miniature_occhio_secco{
    min-height: 196px;
    padding: 14px 10px 12px;
    border-radius: 18px;
  }

  .miniature_occhio_secco img{
    width: 82px;
    height: 82px;
  }

  .miniature_occhio_secco h3,
  .miniature_occhio_secco figcaption{
    font-size: 0.88rem;
    min-height: 52px;
    max-width: 15ch;
  }
}

/* mobile */
@media (max-width: 575.98px){
  .riga-presentazione .row > [class*="col-"]{
    margin-bottom: 12px;
  }

  .miniature_occhio_secco{
    min-height: 168px;
    gap: 10px;
    padding: 12px 8px 10px;
    border-radius: 16px;
    box-shadow:
      0 10px 24px rgba(31, 41, 55, 0.07),
      0 3px 10px rgba(31, 41, 55, 0.04);
  }

  .miniature_occhio_secco img{
    width: 68px;
    height: 68px;
    padding: 6px;
  }

  .miniature_occhio_secco h3,
  .miniature_occhio_secco figcaption{
    font-size: 0.78rem;
    line-height: 1.2;
    min-height: 42px;
    max-width: 13ch;
  }

  .btn-info{
    width: 100% !important;
    margin-top: 10px;
    box-shadow: none !important;
    border: 1px solid #ededed;
  }
}