/* ============================================================
   PERLA NERA — pages/prive.css
   Privé & Occasioni: tre occasioni + come funziona.
   ============================================================ */

/* ---------- Tre occasioni ---------- */
.occasions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 900px) { .occasions__grid { grid-template-columns: 1fr; } }

.occasions__item { display: grid; gap: 1rem; align-content: start; }
.occasions__media { aspect-ratio: 4 / 5; }
.occasions__media img {
  filter: grayscale(1);
  transition: filter var(--dur-med) var(--ease-out-expo);
}
.occasions__item:hover .occasions__media img { filter: grayscale(0.3); }
.occasions__item p { font-size: 0.92rem; }

/* ---------- Come funziona ---------- */
.prive-how { border-top: 1px solid var(--linea); }
.prive-how .indexed { margin-bottom: 1.6rem; }
.prive-how__inner {
  max-width: 68ch;
  display: grid; gap: 1.4rem;
}
.prive-how__list {
  display: grid; gap: 0.7rem;
  padding-left: 1.2rem;
  color: var(--argento);
  font-size: 0.95rem;
}
.prive-how__list li { position: relative; }
.prive-how__list li::before {
  content: "";
  position: absolute; left: -1.2rem; top: 0.75em;
  width: 0.45rem; height: 1px;
  background: var(--argento);
}