/* ==========================================================================
   ASYNC PATCHES — Artigiano del Lusso
   Include (non distruttivo):
   - Tilt Mobile Patch (3D + overlay non bloccante)
   - Card Contrast Fix (overlay più scuro, text-shadow, oro solo desktop)
   - Image-aware Darkening (filtri su <img> reali)
   ========================================================================== */

/* --- Tilt Mobile Patch / 3D --- */
.interactive-card { transform-style: preserve-3d; will-change: transform; perspective: 1200px; }
.interactive-card__figure { position: absolute; inset: 0; z-index: 1; }
.interactive-card__overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.interactive-card__content { position: relative; z-index: 3; transform: translateZ(40px); }

/* --- Card Contrast Fix (overlay base) --- */
.interactive-card__overlay {
  background: linear-gradient(to top,
    rgba(10, 35, 66, 0.95) 8%,
    rgba(10, 35, 66, 0.88) 38%,
    rgba(10, 35, 66, 0.70) 70%,
    rgba(10, 35, 66, 0.45) 100%
  );
}

@media (max-width: 992px) {
  .interactive-card__overlay {
    background: linear-gradient(to top,
      rgba(10, 35, 66, 0.98) 5%,
      rgba(10, 35, 66, 0.92) 45%,
      rgba(10, 35, 66, 0.86) 100%
    );
  }
}

/* --- Image-aware Darkening: agiamo sulle <img> reali --- */
.interactive-card__figure .interactive-card__image,
.service-card .card__media img,
.home-card .card__media img {
  filter: brightness(.62) contrast(1.08) saturate(1.05);
  transition: filter .25s ease;
  will-change: filter;
}

@media (max-width: 992px) {
  .interactive-card__figure .interactive-card__image,
  .service-card .card__media img,
  .home-card .card__media img {
    filter: brightness(.54) contrast(1.12) saturate(1.05);
  }
}

@media (hover:hover) and (pointer:fine) {
  .interactive-card:hover .interactive-card__image,
  .service-card:hover .card__media img,
  .home-card:hover .card__media img {
    filter: brightness(.68) contrast(1.08) saturate(1.05);
  }
}

/* Se supportato, miglioriamo l’impatto dell’overlay sulle foto reali */
@supports (mix-blend-mode: multiply) {
  .interactive-card__overlay {
    background: linear-gradient(to top,
      rgba(20, 30, 50, .95) 8%,
      rgba(20, 30, 50, .88) 38%,
      rgba(20, 30, 50, .70) 70%,
      rgba(20, 30, 50, .45) 100%);
    mix-blend-mode: multiply;
  }
}

/* --- Testo SEMPRE leggibile --- */
.interactive-card__title,
.interactive-card__description {
  color: #ffffff;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.75);
}

.interactive-card__description { font-weight: 500; line-height: 1.5; }

/* Oro solo su device con hover (desktop), mobile resta bianco */
@media (hover: hover) and (pointer: fine) {
  .interactive-card__title {
    color: #ffffff;
    background-image: linear-gradient(#caa765, #caa765);
  }
  .interactive-card__title:hover {
    color: #caa765;
    background-size: 100% 2px;
  }
}

@media (hover: none) {
  .interactive-card__title { color: #ffffff; background-image: none; }
}

/* --- Copertura card legacy (archivi/servizi/home vecchie) --- */
.card__title,.card__text,
.service-card .card__title,.service-card .card__text,
.home-card .card__title,.home-card .card__text {
  color: #ffffff;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.75);
}

/* Micro-tuning spacing mobile */
@media (max-width: 576px) {
  .interactive-card__content { padding: 1.25rem 1.25rem 1.5rem; }
  .interactive-card__title { margin-bottom: 0.4rem; }
  .interactive-card__description { font-size: 0.975rem; }
}

/* Accessibilità: contrasto elevato */
@media (prefers-contrast: more) {
  .interactive-card__overlay {
    background: linear-gradient(to top,
      rgba(0, 0, 0, 0.85) 10%,
      rgba(0, 0, 0, 0.80) 50%,
      rgba(0, 0, 0, 0.75) 100%);
  }
  .interactive-card__figure .interactive-card__image,
  .service-card .card__media img,
  .home-card .card__media img {
    filter: brightness(.45) contrast(1.2);
  }
}
/* ====== Immagini: meno scure (si devono vedere!) ====== */
.interactive-card__figure .interactive-card__image,
.service-card .card__media img,
.home-card .card__media img {
  filter: brightness(.88) contrast(1.03) saturate(1.02); /* prima più pesante */
  transition: filter .25s ease;
}

/* Overlay più soft, spinto solo sotto al testo */
.interactive-card__overlay {
  background: linear-gradient(to top,
    rgba(10,35,66,.45) 0%,
    rgba(10,35,66,.20) 40%,
    rgba(10,35,66,0) 100%);
  mix-blend-mode: multiply;
}

/* ====== Titoli: bianco + alone blu “spray” + micro-stroke ====== */
.interactive-card__title,
.service-card .card__title,
.home-card .card__title {
  color: #ffffff;
  position: relative;
  text-shadow:
    0 0 1px #fff,
    0 0 6px rgba(10,35,66,.55),
    0 2px 14px rgba(10,35,66,.45),
    0 2px 22px rgba(0,0,0,.35);
  -webkit-text-stroke: .4px rgba(10,35,66,.65); /* contorno sottilissimo blu */
}

/* Effetto “evidenziatore blu” sotto al titolo (spray) */
.interactive-card__title::after,
.service-card .card__title::after,
.home-card .card__title::after {
  content: "";
  position: absolute;
  left: -.15em; right: -.15em;
  bottom: -.1em;
  height: .6em;
  background: radial-gradient(ellipse at center,
              rgba(10,35,66,.40) 0%,
              rgba(10,35,66,.25) 60%,
              rgba(10,35,66,0) 100%);
  filter: blur(6px);
  z-index: -1; /* dietro al testo */
}

/* ====== Descrizioni: chiaro con glow blu leggero ====== */
.interactive-card__description,
.service-card .card__text,
.home-card .card__text {
  color: #F5F7FA;
  text-shadow:
    0 0 4px rgba(10,35,66,.50),
    0 1px 10px rgba(0,0,0,.35);
}

/* Desktop: l’oro resta ma mantiene le ombre (mobile resta bianco) */
@media (hover:hover) and (pointer:fine){
  .interactive-card__title:hover { color: #caa765; }
}