/* ==========================================================================
   photo-hover.css — v1.87.2
   Effetto uniforme su TUTTE le foto del sito al passaggio del mouse, IDENTICO
   a quello delle foto magazine: la foto fa zoom (scale 1.06), si alza e
   aumenta l'ombra.

   NOTA SPECIFICITÀ: lo scroll-reveal marca ogni <img> in #site-main con
   .rei-reveal e da visibile impone `transform: none` (.rei-reveal.rei-is-visible).
   Quel CSS si carica dopo questo, quindi qui i selettori sono prefissati con
   `body ` per avere precedenza e non farsi azzerare lo zoom. Nelle transizioni
   includiamo anche `opacity` per non rompere la dissolvenza d'entrata del reveal.
   Hover semplice (niente @media hover/pointer/reduced-motion), come il magazine.
   ========================================================================== */

/* ---- 1) Foto "libere" (hero, offerte, Efficienza, pattern, placeholder demo) ---- */
body .rei-photo,
body .rei-hero__photo,
body .rei-efficienza__tetto-media img,
body .rei-pattern-hero__photo img,
body .rei-pattern-offerta__photo img,
body .rei-hero__media .rei-photo-placeholder,
body .rei-offer__media .rei-photo-placeholder,
body .rei-chiamate__media .rei-photo-placeholder,
body .rei-app-section__media .rei-photo-placeholder {
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease,
              opacity .75s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
body .rei-photo:hover,
body .rei-hero__photo:hover,
body .rei-efficienza__tetto-media img:hover,
body .rei-pattern-hero__photo img:hover,
body .rei-pattern-offerta__photo img:hover,
body .rei-hero__media .rei-photo-placeholder:hover,
body .rei-offer__media .rei-photo-placeholder:hover,
body .rei-chiamate__media .rei-photo-placeholder:hover,
body .rei-app-section__media .rei-photo-placeholder:hover {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 34px 64px rgba(0, 0, 0, .36), 0 12px 24px rgba(0, 0, 0, .18) !important;
}

/* ---- 2) Immagini nel contenuto di pagine/articoli ---- */
body .rei-single__content img,
body .rei-page__content img,
body .wp-block-image img {
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease,
              opacity .75s cubic-bezier(.22, .61, .36, 1);
}
body .rei-single__content img:hover,
body .rei-page__content img:hover,
body .wp-block-image img:hover {
  transform: translateY(-5px) scale(1.045);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .20);
}

/* ---- 3) Foto in cornice con overflow:hidden (immagine in evidenza) ----
   La cornice si alza con più ombra e l'immagine fa zoom DENTRO (come il magazine). */
body .rei-page__thumb,
body .rei-single__feature {
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
}
body .rei-page__thumb img,
body .rei-single__feature img,
body .rei-single__feature-img {
  transition: transform .5s cubic-bezier(.2, .7, .2, 1),
              opacity .75s cubic-bezier(.22, .61, .36, 1);
}
body .rei-page__thumb:hover,
body .rei-single__feature:hover {
  transform: translateY(-8px);
  box-shadow: 0 38px 70px rgba(0, 0, 0, .30);
}
body .rei-page__thumb:hover img,
body .rei-single__feature:hover img,
body .rei-single__feature:hover .rei-single__feature-img {
  transform: scale(1.06);
}

/* ---- 4) Card articoli (home + archivi): card sollevata con più ombra + zoom
   immagine. 'body' davanti per precedenza sulle regole :hover già presenti. ---- */
body .rei-magazine-card,
body .rei-mag-card,
body .rei-com-card,
body .rei-archive__card {
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
}
body .rei-magazine-card:hover,
body .rei-mag-card:hover,
body .rei-com-card:hover,
body .rei-archive__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 50px rgba(0, 0, 0, .22);
}
body .rei-magazine-card:hover .rei-magazine-card__image img,
body .rei-mag-card:hover .rei-mag-card__thumb img,
body .rei-com-card:hover .rei-com-card__thumb img,
body .rei-archive__card:hover .rei-archive__card-thumb img {
  transform: scale(1.06);
}

/* ---- 5) Badge circolari (es. "ATTIVA in 3 minuti"): stesso effetto delle foto.
   La rotazione è esposta dalla funzione come --rei-badge-rotate e va preservata.
   !important per superare transform e box-shadow inline/!important del badge. ---- */
body .rei-badge-circle {
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
  will-change: transform;
}
body .rei-badge-circle:hover {
  transform: rotate(var(--rei-badge-rotate, 0deg)) translateY(-6px) scale(1.06) !important;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .42) !important;
}

/* ---- 6) Card prezzo/costo (rei-price-card: luce/gas, box grande e piccolo):
   stesso effetto delle foto. !important sull'ombra per battere il box-shadow
   con !important già presente su .rei-price-card. ---- */
body .rei-price-card {
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease;
}
body .rei-price-card:hover {
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 26px 50px rgba(0, 0, 0, .30) !important;
}