/* ==========================================================================
   B.DESIGN Landing Kit - CSS di supporto per il template Elementor
   Gestisce solo ciò che Elementor non può fare da pannello:
   griglie CSS, aspect-ratio, clamp() dei titoli, hover e fade-in-up.
   Colori e tipografia restano modificabili da Elementor.
   ========================================================================== */

:root {
  --bd-accent: #C2410C;
  --bd-accent-dark: #9A3412;
  --bd-accent-light: #FB923C;
  --bd-ink: #18181b;
  --bd-paper: #fafafa;
}

html { scroll-behavior: smooth; }

/* Le ancore non finiscono sotto l'header sticky */
.bd-section { scroll-margin-top: 90px; }

/* ---------- Header sticky con sfocatura ---------- */
.bd-header {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  z-index: 999;
}

/* ---------- Titoli giganti fluidi ---------- */
.elementor .bd-hero-title .elementor-heading-title {
  font-size: clamp(2.9rem, 1.4rem + 4.6vw, 5.5rem) !important;
  line-height: .98 !important;
  letter-spacing: -.03em !important;
}
.elementor .bd-cta-title .elementor-heading-title {
  font-size: clamp(2.9rem, 1.2rem + 7.2vw, 6.5rem) !important;
  line-height: .98 !important;
  letter-spacing: -.03em !important;
}
.elementor .bd-email .elementor-heading-title {
  font-size: clamp(1.4rem, .8rem + 2.6vw, 2.5rem) !important;
  word-break: break-word;
}
.elementor .bd-email a {
  text-decoration: underline;
  text-decoration-color: #52525b;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  transition: color .2s, text-decoration-color .2s;
}
.elementor .bd-email a:hover { color: var(--bd-accent-light); text-decoration-color: var(--bd-accent-light); }

/* ---------- Griglie ---------- */
.elementor .bd-grid-3,
.elementor .bd-grid-2,
.elementor .bd-split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
}
/* Smartphone: 1 colonna. Tablet: servizi a 2 colonne, portfolio a 2. Desktop: 3 colonne */
@media (min-width: 768px) {
  .elementor .bd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .elementor .bd-grid-3.bd-tablet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1025px) {
  .elementor .bd-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .elementor .bd-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.elementor .bd-grid-3 > *,
.elementor .bd-grid-2 > *,
.elementor .bd-split > * { width: auto; max-width: 100%; }

/* ---------- Card "I miei plus": hover sollevamento ---------- */
.elementor .bd-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.elementor .bd-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -24px rgba(24, 24, 27, .25);
}
.elementor .bd-card:hover .elementor-icon {
  background-color: var(--bd-accent) !important;
}

/* ---------- Servizi: titolo e numero cambiano colore all'hover ---------- */
.elementor .bd-service .elementor-heading-title,
.elementor .bd-service .bd-num { transition: color .25s ease; }
.elementor .bd-service:hover .elementor-heading-title,
.elementor .bd-service:hover .bd-num { color: var(--bd-accent) !important; }

/* ---------- Portfolio: placeholder 4/3 (puoi aggiungere uno sfondo immagine da Elementor) ---------- */
.elementor .bd-placeholder {
  aspect-ratio: 4 / 3;
  width: 100%;
  min-height: 0 !important;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: background-color .3s ease;
}
.elementor .bd-placeholder:hover { background-color: #d4d4d8; }
.elementor .bd-work:hover .elementor-heading-title { color: var(--bd-accent) !important; }
.elementor .bd-work .elementor-heading-title { transition: color .25s ease; }

/* ---------- Fade-in-up allo scroll ----------
   La classe .bd-js viene aggiunta dallo script solo fuori dall'editor Elementor,
   così nell'editor tutto resta sempre visibile e modificabile. */
.bd-js .bd-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s ease-out, transform .7s ease-out;
  transition-delay: var(--bd-delay, 0ms);
}
.bd-js .bd-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .bd-js .bd-reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Larghezze massime per testi lunghi ---------- */
.elementor .bd-narrow { max-width: 760px; }
.elementor .bd-narrow-sm { max-width: 680px; }

/* ---------- Hero con foto ----------
   Smartphone/tablet: testo sopra, foto sotto. Desktop: testo 7/12 + foto 5/12.
   La foto si inserisce da Elementor: contenitore .bd-photo -> Stile -> Sfondo -> Immagine. */
.elementor .bd-hero-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 1025px) {
  .elementor .bd-hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.elementor .bd-hero-grid > * { width: auto; max-width: 100%; }
.elementor .bd-photo {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 460px;
  min-height: 0 !important;
  margin-inline: auto;
  background-size: cover;
  background-position: center;
}
@media (min-width: 1025px) { .elementor .bd-photo { max-width: none; } }