/* ==================================================
   OFFERTE — STILE RITUALE (SAFE / COERENTE THEME)
   Isolato · Simbolico · Non invasivo
   - usa solo: --accent, --gold-dark, --text-muted
   - NO gold giallo (201,162,77)
================================================== */


/* ==================================================
   ROOT
================================================== */

.necrologio-offerte,
.offerte{
  margin-top: var(--space-lg);
  text-align: center;
}

/* Titolo: non aggressivo (no dropcap / no uppercase) */
.offerte h2{
  font-size: 1.35rem;
  margin: 0 0 1.2rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-main);
  text-shadow: none;
}

/* evita capolettera globale */
.offerte h2::first-letter{
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
}


/* ==================================================
   GRID
================================================== */

.offerte-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 128px));
  justify-content: center;
  gap: 18px;
  margin: 0 auto;
}


/* ==================================================
   OFFERTA (CARD)
================================================== */

.offerta{
  position: relative;
  width: 128px;
  height: 128px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 14px;
  cursor: pointer;

  /* “glass” premium coerente */
  background:
    radial-gradient(420px 120px at 50% -20%, rgba(139,107,46,.10), transparent 60%),
    rgba(255,255,255,.78);

  border: 1px solid rgba(92,71,25,.22);
  backdrop-filter: blur(6px);

  box-shadow:
    0 6px 18px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.65);

  transition:
    transform .22s ease,
    box-shadow .24s ease,
    border-color .24s ease,
    filter .24s ease,
    opacity .18s ease;
}

/* evita eredità link */
.offerta,
.offerta *{
  text-decoration: none !important;
  color: inherit !important;
}


/* ==================================================
   ICONA
================================================== */

.offerta img{
  max-width: 100%;
  max-height: 100%;
  pointer-events: none;
  user-select: none;
  filter: contrast(1.03) saturate(1.03);
  transition: transform .22s ease, filter .22s ease;
}


/* ==================================================
   HOVER (rituale: lift + glow darkgold)
================================================== */

.offerta:hover{
  transform: translateY(-3px);
  border-color: rgba(139,107,46,.45);

  box-shadow:
    0 16px 40px rgba(0,0,0,.28),
    0 0 20px rgba(139,107,46,.32);
  filter: brightness(1.02);
}

.offerta:hover img{
  transform: scale(1.03);
  filter: contrast(1.06) saturate(1.06);
}


/* ==================================================
   STATO PRESENTE (persistente)
================================================== */

.offerta.is-present{
  border-color: rgba(139,107,46,.55);

  box-shadow:
    0 0 0 1px rgba(139,107,46,.50),
    0 0 26px rgba(139,107,46,.32),
    0 14px 34px rgba(0,0,0,.26);
}


/* ==================================================
   CONTATORE (sigillo)
================================================== */

.offerta-count{
  position: absolute;
  bottom: 6px;
  right: 8px;

  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .02em;

  padding: 3px 7px;
  border-radius: 10px;

  /* blu medioevale + darkgold */
  background: radial-gradient(
    circle at top,
    rgba(255,155,46,.85),   /* --gold-medieval */
    rgba(139,107,46,.85)   /* --gold-dark */
  );

  color: #fff;

  box-shadow:
    0 0 12px rgba(31,79,163,.40),
    0 2px 6px rgba(0,0,0,.35);
}


/* ==================================================
   CLICK FEEDBACK
================================================== */

.offerta.is-active{
  transform: scale(0.96);
  opacity: .92;
}


/* ==================================================
   ACCESSIBILITY
================================================== */

.offerta:focus-visible{
  outline: none;
  border-color: rgba(139,107,46,.65);

  box-shadow:
    0 0 0 3px rgba(139,107,46,.24),
    0 0 18px rgba(139,107,46,.30),
    0 14px 34px rgba(0,0,0,.22);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 480px){
  .offerte-grid{ gap: 20px; }
}