/* ==========================================================================
 * GS Manutenzioni 360° — override grafici per il wall recensioni Taggbox
 * (piano free: niente Custom CSS lato Taggbox → stilizziamo dal nostro sito;
 *  l'embed Litecode renderizza nel nostro DOM, quindi queste regole valgono).
 * NOTA: il selettore #taggbox-wrap + !important serve a vincere sia i fogli
 * di stile Taggbox (iniettati dopo i nostri) sia i loro stili inline.
 * La barra "Powered by Taggbox" resta invariata (richiesta dal piano free).
 * Classi verificate sul DOM reale del widget 335726 (Chrome headless, 09/2026).
 * ========================================================================== */

/* Base: font del sito su tutto il wall (icone escluse: usano un font dedicato) */
#taggbox-wrap .tb_app_container,
#taggbox-wrap .tb_mc_contant_wrapper,
#taggbox-wrap .tb_mc_author_info,
#taggbox-wrap .tb_rv_banner_wrap,
#taggbox-wrap .tb_rv_banner_btn {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* ---------- Banner riepilogo Taggbox ----------
   Nascosto di proposito: riporta solo le recensioni raccolte dal widget
   ("8 reviews") e non il totale reale del profilo (52). Totale, media e link
   sono già mostrati dal nostro badge GBP sopra il wall. La barra
   "Powered by Taggbox" resta visibile (richiesta dal piano free). ---------- */
#taggbox-wrap .tb_rv_banner_wrap {
  display: none !important;
}
#taggbox-wrap .tb_rv_review_count {
  font-family: 'Archivo', 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 26px !important;
  color: #0A0F1E !important;
  letter-spacing: -.02em !important;
}
#taggbox-wrap .tb_rv_review_total_post {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #5B6478 !important;
}
#taggbox-wrap .tb_rv_banner_btn {
  background-color: #0ABAB5 !important;
  color: #0A0F1E !important;
  border-radius: 999px !important;
  padding: 13px 26px !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  border: 0 !important;
}
#taggbox-wrap .tb_rv_banner_btn:hover {
  background-color: #066E6A !important;
  /* Testo bianco su hover: ink su Tiffany-dark sarebbe 2.2:1 (illeggibile) */
  color: #fff !important;
}

/* ---------- Card recensione ---------- */
#taggbox-wrap .tb_mc_post_wrap_in,
#taggbox-wrap .tb_mc_post_in {
  background: #fff !important;
  border: 1.5px solid #E8E6DE !important;
  border-radius: 22px !important;
  color: #0A0F1E !important;
}
#taggbox-wrap .tb_mc_contant_wrapper {
  padding: 18px !important;
}
#taggbox-wrap .tb_content_text {
  text-align: left !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #0A0F1E !important;
  /* Testi lunghi troncati a 6 righe per card uniformi */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 6 !important;
  line-clamp: 6 !important;
  overflow: hidden !important;
}
#taggbox-wrap .tb_mc_authorname {
  font-family: 'Archivo', 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #0A0F1E !important;
}
#taggbox-wrap .tb_mc_username,
#taggbox-wrap .tb_mc_time {
  font-size: 12.5px !important;
  color: #5B6478 !important;
}
#taggbox-wrap .tb_mc_author_profile img {
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

/* Link dentro le card: Tiffany del sito, mai blu standard */
#taggbox-wrap .tb_mc_contant_wrapper a {
  color: #066E6A !important;
  font-weight: 700 !important;
}

/* ---------- Desktop/tablet: masonry → griglia precisa ----------
   Le colonne masonry vengono appiattite (display:contents) così le card
   diventano celle dirette della griglia: 2 per riga su tablet, 4 per riga
   su desktop, altezze uniformi (stretch). Solo CSS, React-safe. */
@media (min-width: 760px) {
  #taggbox-wrap .my-masonry-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 4px 2px 8px !important;
  }
  #taggbox-wrap .my-masonry-grid > div {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
  #taggbox-wrap .tb_mc_post_wrapper {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #taggbox-wrap .tb_mc_post_wrap_in,
  #taggbox-wrap .tb_mc_post_in {
    height: 100% !important;
  }
}
@media (min-width: 1024px) {
  #taggbox-wrap .my-masonry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ---------- Mobile: wall → carosello orizzontale ----------
   La colonna masonry (unica su mobile) diventa track scroll-snap.
   Nessuno spostamento di nodi: React-safe, solo CSS. */
@media (max-width: 759.98px) {
  #taggbox-wrap .my-masonry-grid {
    display: block !important;
    overflow: visible !important;
  }
  #taggbox-wrap .my-masonry-grid > div {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
    padding: 8px 14px 16px !important;
    margin: 0 -14px !important;
    scrollbar-width: none !important;
  }
  #taggbox-wrap .my-masonry-grid > div::-webkit-scrollbar {
    display: none !important;
  }
  #taggbox-wrap .tb_mc_post_wrapper {
    flex: 0 0 82% !important;
    width: auto !important;
    max-width: 82% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }
  /* Dots solo mobile, sempre scopati sotto #taggbox-wrap */
  #taggbox-wrap .tb-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin: 2px 0 6px;
  }
  #taggbox-wrap .tb-dots button {
    box-sizing: border-box;
    width: 44px;
    height: 44px;
    padding: 18px;
    border-radius: 50%;
    border: 0;
    background-color: #C9C4B8;
    background-clip: content-box;
    cursor: pointer;
    transition: .25s;
  }
  #taggbox-wrap .tb-dots button.on {
    background-color: #0ABAB5;
    width: 62px;
    border-radius: 999px;
  }
  #taggbox-wrap .tb_mc_contant_wrapper {
    padding: 16px !important;
  }
  #taggbox-wrap .tb_content_text {
    font-size: 14px !important;
  }
}
/* Utenti sensibili al movimento: niente transizioni né scroll animati nel wall */
@media (prefers-reduced-motion: reduce) {
  #taggbox-wrap *, #taggbox-wrap *::before, #taggbox-wrap *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}