/* =============================================================================
   builder_front.css
   Stile RESPONSIVE per l'HTML generato da builder_render.php (front pubblico).
   Includere UNA volta nella pagina pubblica. Prefisso classi: .bld-*
   I breakpoint: tablet <= 1024px, mobile <= 768px.
   ========================================================================== */

.bld-canvas { width: 100%; overflow-x: hidden; }

/* --- Sezione (riga) e boxed ---------------------------------------------- */
.bld-section { width: 100%; box-sizing: border-box; }
.bld-row-boxed { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* --- Riga / colonne (flex) ----------------------------------------------- */
.bld-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bld-gap, 24px);
  align-items: stretch;
}
.bld-col {
  flex: 1 1 var(--bld-col-basis, 100%);
  max-width: var(--bld-col-basis, 100%);
  min-width: 0;
  box-sizing: border-box;
}

/* tablet: due colonne max per riga */
@media (max-width: 1024px) {
  .bld-row:not(.bld-row--no-stack) > .bld-col {
    flex-basis: calc(50% - (var(--bld-gap, 24px) / 2));
    max-width: calc(50% - (var(--bld-gap, 24px) / 2));
  }
  /* eccezione: se la riga ha una sola colonna, resta piena */
  .bld-row:not(.bld-row--no-stack) > .bld-col:only-child {
    flex-basis: 100%;
    max-width: 100%;
  }
}
/* mobile: impila tutto a meno di --no-stack */
@media (max-width: 768px) {
  .bld-row:not(.bld-row--no-stack) > .bld-col {
    flex-basis: 100%;
    max-width: 100%;
  }
  /* ordine inverso su mobile: serve flex-direction esplicito + no-wrap,
     altrimenti column-reverse con flex-wrap non inverte in modo affidabile */
  .bld-row--reverse-mobile:not(.bld-row--no-stack) {
    flex-wrap: nowrap;
    flex-direction: column-reverse;
  }
}

/* --- Heading / testo ------------------------------------------------------ */
.bld-heading { margin: 0 0 .5em; line-height: 1.2; }
.bld-text { line-height: 1.6; }
.bld-text ul, .bld-text ol { padding-left: 1.4em; }

/* --- Immagine ------------------------------------------------------------- */
.bld-img { max-width: 100%; height: auto; display: inline-block; }
.bld-image a { display: inline-block; }

/* --- Galleria ------------------------------------------------------------- */
.bld-gallery {
  display: grid;
  grid-template-columns: repeat(var(--bld-gallery-cols, 3), 1fr);
  gap: 12px;
}
.bld-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 4px; }
@media (max-width: 768px) { .bld-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .bld-gallery { grid-template-columns: 1fr; } }

/* --- Video (ratio 16:9) --------------------------------------------------- */
.bld-video-ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.bld-video-ratio > iframe,
.bld-video-ratio > video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* --- Divisore / spaziatore ------------------------------------------------ */
.bld-divider { width: 100%; }
.bld-spacer { width: 100%; }

/* --- Citazione ------------------------------------------------------------ */
.bld-quote {
  margin: 0;
  padding: 1em 1.5em;
  border-left: 4px solid currentColor;
  font-style: italic;
}
.bld-quote-author { display: block; margin-top: .5em; font-style: normal; font-weight: bold; opacity: .8; }

/* --- Card ----------------------------------------------------------------- */
.bld-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  height: 100%;
}
.bld-card-img img { width: 100%; height: auto; display: block; }
.bld-card-body { padding: 1rem; }
.bld-card-title { margin: 0 0 .5rem; }
.bld-card-text { line-height: 1.5; }
.bld-card-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: .5rem 1rem;
  background: #5AACC0;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

/* --- Pulsanti ------------------------------------------------------------- */
.bld-btn {
  display: inline-block;
  padding: .7em 1.6em;
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity .2s;
  font-weight: 500;
}
.bld-btn:hover { opacity: .85; }
.bld-btn--filled  { background: #5AACC0; color: #fff; }
.bld-btn--outline { background: transparent; border: 2px solid #5AACC0; color: #5AACC0; }
.bld-btn--text    { background: transparent; color: #5AACC0; padding-left: 0; padding-right: 0; }

/* --- Visibilita' per device ---------------------------------------------- */
@media (min-width: 1025px) { .bld-hide-desktop { display: none !important; } }
@media (min-width: 769px) and (max-width: 1024px) { .bld-hide-tablet { display: none !important; } }
@media (max-width: 768px) { .bld-hide-mobile { display: none !important; } }

/* --- Lightbox galleria (markup creato da builder_render.php) -------------- */
#bld-lb{position:fixed;inset:0;background:rgba(10,15,20,.92);display:none;
  align-items:center;justify-content:center;z-index:99999}
#bld-lb.on{display:flex}
#bld-lb img{max-width:92vw;max-height:88vh;box-shadow:0 10px 40px rgba(0,0,0,.5);border-radius:4px}
#bld-lb button{position:absolute;background:none;border:none;color:#fff;
  font-size:34px;cursor:pointer;opacity:.8;padding:10px;line-height:1}
#bld-lb button:hover{opacity:1}
#bld-lb .bld-lb-x{top:12px;right:18px;font-size:44px}
#bld-lb .bld-lb-p{left:10px;top:50%;transform:translateY(-50%)}
#bld-lb .bld-lb-n{right:10px;top:50%;transform:translateY(-50%)}

/* --- Carosello ------------------------------------------------------------ */
.bld-carousel { position: relative; }
.bld-car-viewport { overflow: hidden; width: 100%; }
.bld-car-track { display: flex; will-change: transform; }
.bld-car-slide { flex: 0 0 auto; box-sizing: border-box; padding: 0 10px; min-width: 0; }
.bld-car-slide img { max-width: 100%; height: auto; display: block; }
.bld-car-arrow { position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(43,58,69,.55); color: #fff; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 2;
  transition: background .15s; }
.bld-car-arrow:hover { background: rgba(43,58,69,.85); }
.bld-car-prev { left: 6px; }
.bld-car-next { right: 6px; }
.bld-car-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.bld-car-dot { width: 10px; height: 10px; border-radius: 50%; border: none; cursor: pointer;
  background: #c7d2da; padding: 0; transition: background .15s, transform .15s; }
.bld-car-dot.on { background: #5AACC0; transform: scale(1.2); }
@media (max-width: 768px) {
  .bld-car-arrow { width: 32px; height: 32px; font-size: 13px; }
}