/* Integrazioni Building: recensioni Google + feed Instagram. Stile coerente col sito. */

.bld-notice {
  background: rgba(232, 132, 43, 0.12);
  border: 1px dashed rgba(232, 132, 43, 0.5);
  color: #e8842b;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-family: 'Manrope', system-ui, sans-serif;
}

/* Stelle */
.bld-stars { color: #e8842b; letter-spacing: 2px; font-size: 15px; }
.bld-stars__off { color: rgba(255, 255, 255, 0.22); }

/* ---- Recensioni ---- */
.bld-reviews { font-family: 'Manrope', system-ui, sans-serif; color: #cdd7e2; }
.bld-reviews__summary {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.bld-reviews__score { font-size: 40px; font-weight: 800; color: #fff; line-height: 1; }
.bld-reviews__count { font-size: 14px; color: #9fb0c4; }
.bld-reviews__grid {
  display: grid;
  /* Colonne larghe almeno 320px: con 5 recensioni si dispongono 3 + 2
     invece di schiacciarsi tutte su una riga. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
}
.bld-review {
  background: #16233a;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 24px;
}
.bld-review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bld-review__ph { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.bld-review__author { display: block; font-weight: 700; color: #fff; }
.bld-review__when { display: block; font-size: 12px; color: #9fb0c4; }
.bld-review__text {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: #cdd7e2;
  overflow-wrap: anywhere;   /* nessuna parola lunga esce dalla card */
  hyphens: auto;
}
.bld-review { min-width: 0; }
.bld-review__author { overflow-wrap: anywhere; }

/* ---- Instagram ---- */
.bld-ig {
  display: grid;
  /* Base di sicurezza: se Elementor non emette un valore per tablet/telefono
     le tessere si dispongono comunque da sole senza schiacciarsi. Il controllo
     "Colonne" del widget sovrascrive questa regola quando è impostato. */
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 10px;
}
.bld-ig__item {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 12px;
  background: #16233a;
}
/* Un logo trasparente caricato a mano sta meglio contenuto, non ritagliato. */
.bld-ig-head__avatar--custom { object-fit: contain; padding: 6px; }
.bld-ig__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.bld-ig__item:hover img { transform: scale(1.06); }
.bld-ig__badge {
  position: absolute;
  top: 10px;
  right: 12px;
  color: #fff;
  font-size: 13px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.bld-ig__ov {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  background: linear-gradient(0deg, rgba(15, 26, 43, 0.88), transparent 62%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.bld-ig__item:hover .bld-ig__ov,
.bld-ig__item:focus-visible .bld-ig__ov { opacity: 1; }
.bld-ig__stats { display: flex; gap: 16px; font-weight: 700; }
.bld-ig__stats > span,
.bld-box__stats > span { display: inline-flex; align-items: center; gap: 6px; }
.bld-ic { flex: none; }
.bld-ig__cap {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Su schermi che non hanno l'hover (telefoni) l'overlay resta sempre leggibile. */
@media (hover: none) {
  .bld-ig__ov { opacity: 1; background: linear-gradient(0deg, rgba(15, 26, 43, 0.8), transparent 55%); }
  .bld-ig__cap { -webkit-line-clamp: 2; }
}

/* ---- Intestazione del profilo ---- */
.bld-ig-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  font-family: 'Manrope', system-ui, sans-serif;
}
.bld-ig-head__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(232, 132, 43, 0.85);
  flex: none;
  /* La foto profilo che restituisce Meta è un JPEG: l'eventuale trasparenza
     dell'originale è già appiattita su nero nel file. Se al posto di quella
     si carica un PNG trasparente dalla libreria, questo fondo lo integra
     col resto della sezione invece di lasciarlo su un buco nero. */
  background: #16233a;
}
.bld-ig-head__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bld-ig-head__user {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.bld-ig-head__user:hover { color: #e8842b; }
.bld-ig-head__name { font-size: 14px; color: #9fb0c4; }
.bld-ig-head__stats { font-size: 14px; color: #cdd7e2; margin-top: 4px; }
.bld-ig-head__stats strong { color: #fff; }
.bld-ig-head__cta {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  background: #e8842b;
  color: #16233a;
  font-weight: 700;
  font-size: 15px;
  padding: 11px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.bld-ig-head__cta:hover { filter: brightness(1.06); transform: translateY(-2px); color: #16233a; }

/* ---- Lightbox ---- */
body.bld-box-aperta { overflow: hidden; }
.bld-box {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Manrope', system-ui, sans-serif;
}
.bld-box[hidden] { display: none; }
.bld-box__sfondo {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 22, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.bld-box__pannello {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  background: #16233a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  overflow: hidden;
}
/* L'area del media NON deve essere comprimibile: se il blocco della didascalia
   la schiaccia, il video resta della sua altezza e sborda sopra e sotto.
   Con `flex: none` l'area si adatta al contenuto, e il limite di altezza sta
   sul media stesso: così il rapporto d'aspetto è rispettato senza sbordare. */
.bld-box__media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0b1421;
  flex: none;
  overflow: hidden;
}
.bld-box__media img,
.bld-box__media video {
  display: block;
  max-width: 100%;
  max-height: min(58vh, 540px);
  width: auto;
  height: auto;
  object-fit: contain;
}
/* È la didascalia a cedere spazio e a scorrere, non il media.
   Contatori, data e link restano sempre visibili in fondo al pannello. */
/* Copertina dei reel che Meta non lascia riprodurre nel sito. */
.bld-box__cop { position: relative; display: flex; }
.bld-box__cop img { display: block; max-width: 100%; max-height: min(58vh, 540px); width: auto; height: auto; }
.bld-box__cop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(11, 20, 33, 0.75), rgba(11, 20, 33, 0.15) 55%);
}
.bld-box__play {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  background: #e8842b;
  color: #16233a;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.bld-box__play:hover {
  color: #16233a;
  filter: brightness(1.06);
  transform: translateX(-50%) translateY(-2px);
}
.bld-box__play-ico { font-size: 12px; }
@media (max-width: 640px) {
  .bld-box__cop img { max-height: 52vh; }
  .bld-box__play { font-size: 14px; padding: 11px 18px; bottom: 16px; }
}

.bld-box__info {
  display: flex;
  flex-direction: column;
  padding: 20px 24px 22px;
  flex: 0 1 auto;
  min-height: 0;
}
.bld-box__cap {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0 0 12px;
  color: #cdd7e2;
  font-size: 15px;
  line-height: 1.65;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.bld-box__cap[hidden] { display: none; }
.bld-box__meta {
  flex: none;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: #9fb0c4;
  /* Riga di separazione: quando la didascalia è lunga e scorre, il taglio
     sopra i contatori si legge come una divisione voluta, non come un testo
     troncato per errore. */
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 14px;
  margin-bottom: 14px;
}
.bld-box__stats { display: inline-flex; gap: 18px; color: #fff; font-weight: 700; }
/* Prima l'unico segnale al passaggio del mouse era la sottolineatura, quasi
   invisibile sul fondo scuro: ora diventa un pulsante pieno. */
.bld-box__link {
  flex: none;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(232, 132, 43, 0.55);
  border-radius: 999px;
  color: #e8842b;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bld-box__link:hover,
.bld-box__link:focus-visible {
  background: #e8842b;
  border-color: #e8842b;
  color: #16233a;
  text-decoration: none;
}
.bld-box__link span { transition: transform 0.25s ease; }
.bld-box__link:hover span { transform: translateX(4px); }
/* I selettori partono da `.bld-box` di proposito: il tema definisce
   `[type="button"]:hover, [type="button"]:focus { background: #cc3366 }`
   con la stessa specificità delle nostre regole, quindi a seconda dell'ordine
   di caricamento la X diventava magenta. Con un livello in più vinciamo
   sempre, senza ricorrere a !important. */
.bld-box .bld-box__x,
.bld-box .bld-box__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(11, 20, 33, 0.72);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease;
}
.bld-box .bld-box__x:hover,
.bld-box .bld-box__x:focus,
.bld-box .bld-box__x:active,
.bld-box .bld-box__nav:hover,
.bld-box .bld-box__nav:focus,
.bld-box .bld-box__nav:active {
  background: rgba(232, 132, 43, 0.95);
  color: #16233a;
}
.bld-box .bld-box__x:focus-visible,
.bld-box .bld-box__nav:focus-visible {
  outline: 2px solid #e8842b;
  outline-offset: 2px;
}
.bld-box__x { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 26px; line-height: 1; }
.bld-box__nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 30px; line-height: 1; }
.bld-box__nav--prec { left: 12px; }
.bld-box__nav--succ { right: 12px; }
.bld-box__nav[hidden] { display: none; }

@media (max-width: 640px) {
  .bld-box { padding: 0; }
  .bld-box__pannello { width: 100%; max-height: 100dvh; border-radius: 0; border: none; }
  .bld-box__media img,
  .bld-box__media video { max-height: 52vh; }
  .bld-box__info { padding: 16px 18px 20px; }
  .bld-box__nav { width: 38px; height: 38px; font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .bld-ig__item img,
  .bld-ig__ov,
  .bld-ig-head__cta { transition: none; }
}

/* Link alla scheda Google (quando i testi delle recensioni non sono disponibili) */
.bld-reviews__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #e8842b;
  text-decoration: none;
}
.bld-reviews__cta em { font-style: normal; transition: transform 0.25s ease; }
.bld-reviews__cta:hover em { transform: translateX(5px); }

/* Pulsante "vedi tutte le recensioni" */
.bld-reviews__actions { margin-top: 28px; }
.bld-reviews__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #e8842b;
  color: #16233a;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.bld-reviews__btn:hover { filter: brightness(1.06); transform: translateY(-2px); color: #16233a; }
.bld-reviews__btn em { font-style: normal; transition: transform 0.25s ease; }
.bld-reviews__btn:hover em { transform: translateX(4px); }