/* ==================================================
   UX CLICK 1 — Ponderano Informa / sito candidato
   Regola visiva:
   - card cliccabile = azione chiara
   - card non cliccabile = informazione chiara
   ================================================== */

.ux-clickable-card,
a.ux-clickable-card,
a.card,
a.tile,
a.box,
a[href].card,
a[href].tile,
a[href].box {
  position: relative;
  display: block;
  text-decoration: none !important;
  cursor: pointer;
  border-width: 2px !important;
  transform: translateY(0);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.ux-clickable-card::after,
a.ux-clickable-card::after,
a[href].card::after,
a[href].tile::after,
a[href].box::after {
  content: "Apri →";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-top: .85rem;
  padding: .42rem .78rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: #8a4b00;
  box-shadow: 0 4px 12px rgba(138,75,0,.18);
}

.ux-clickable-card:hover,
a.ux-clickable-card:hover,
a[href].card:hover,
a[href].tile:hover,
a[href].box:hover {
  transform: translateY(-2px);
  border-color: #b8731a !important;
  box-shadow: 0 10px 26px rgba(90,55,10,.16);
}

.ux-clickable-card:focus-visible,
a.ux-clickable-card:focus-visible,
a[href].card:focus-visible,
a[href].tile:focus-visible,
a[href].box:focus-visible {
  outline: 3px solid #b8731a;
  outline-offset: 4px;
}

/* Card informative: devono sembrare dati, non bottoni */
.ux-info-card {
  cursor: default !important;
  transform: none !important;
  box-shadow: none;
}

.ux-info-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: inherit !important;
}

.ux-info-card::after {
  content: "Informazione";
  display: inline-flex;
  width: fit-content;
  margin-top: .75rem;
  padding: .28rem .62rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 700;
  color: #6f5a36;
  background: rgba(111,90,54,.10);
}

/* Se una card informativa contiene già link interni, non blocchiamo quei link */
.ux-info-card a {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Piccola legenda opzionale generata via JS */
.ux-click-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: .75rem 0 1rem;
  font-size: .86rem;
  color: #66563f;
}

.ux-click-legend span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .58rem;
  border-radius: 999px;
  background: rgba(138,75,0,.08);
}

/* Mobile: il bottone deve essere ancora più evidente */
@media (max-width: 700px) {
  .ux-clickable-card::after,
  a.ux-clickable-card::after,
  a[href].card::after,
  a[href].tile::after,
  a[href].box::after {
    width: 100%;
    padding: .62rem .8rem;
    font-size: .95rem;
  }

  .ux-info-card::after {
    font-size: .78rem;
  }
}