/* =====================================================================
   ARREDO BAGNO
   ===================================================================== */

/* ---- Palette ---- */
.let-ab-hero,
.let-ab-intro,
.let-ab-why,
.let-ab-sol,
.let-ab-goal {
  --ab-orange: #f48221;
  --ab-on-orange: #5a2a00;
  --ab-primary: #964900;
  --ab-bluegrey: #4b626c;
  --ab-celeste: #94afbb;
  --ab-azzurro: #cbe3f0;
  --ab-text: #1c1c1a;
  --ab-text-muted: #564336;
  --ab-cream: #fcf9f5;
  --ab-cream-low: #f6f3ef;
  --ab-border: #ddc1b0;
  --ab-near-black: #1c1c1a;

  --ab-container-max: 1500px;
  --ab-gutter: 30px;
  --ab-section-pad: clamp(56px, 8vw, 100px);

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ab-text);
  -webkit-font-smoothing: antialiased;
}

/* ---- Reset margini sugli elementi nativi usati ---- */
.let-ab-hero .fusion-title-heading,
.let-ab-intro .fusion-title-heading,
.let-ab-why .fusion-title-heading,
.let-ab-sol .fusion-title-heading,
.let-ab-goal .fusion-title-heading { margin: 0; }
.let-ab-intro .fusion-text p,
.let-ab-why .fusion-text p,
.let-ab-sol .fusion-text p,
.let-ab-goal .fusion-text p { margin: 0; }

/* ---- Larghezza contenuto: la row interna di Avada (1500 + gutter) ---- */
.let-ab-intro > .fusion-builder-row,
.let-ab-why > .fusion-builder-row,
.let-ab-sol > .fusion-builder-row,
.let-ab-goal > .fusion-builder-row {
  max-width: var(--ab-container-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--ab-gutter) !important;
  padding-right: var(--ab-gutter) !important;
}

/* ---- Padding verticale di sezione ---- */
.let-ab-intro,
.let-ab-why,
.let-ab-sol {
  padding-top: var(--ab-section-pad) !important;
  padding-bottom: var(--ab-section-pad) !important;
}

/* =====================================================================
   1. HERO
   ===================================================================== */
.let-ab-hero {
  position: relative;
  min-height: 560px;
  display: flex !important;
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  /* allineamento verticale/orizzontale del contenuto: ora dal BUILDER
     (come Legna e Pellet) — niente più centratura forzata via CSS */
}
@media (min-width: 1025px) { .let-ab-hero { min-height: 100vh; } }

/* overlay scuro (sopra l'immagine, sotto al contenuto) */
.let-ab-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.38) 50%, rgba(0,0,0,.72) 100%);
}
.let-ab-hero > .fusion-builder-row { position: relative; z-index: 2; }
/* Posizione/allineamento del contenuto hero: ora gestiti dal BUILDER
   (Riga: alto/centro/basso · Colonna: allineamento contenuto · Titolo: sinistra/centro),
   come su Legna e Pellet. Resta solo la larghezza massima leggibile. */
.let-ab-hero__inner .fusion-column-wrapper { max-width: 880px; padding: 0 var(--ab-gutter); }

.let-ab-hero__title .fusion-title-heading {
  color: #ffffff !important;       /* leggibilità sull'overlay scuro (resta) */
  text-transform: none;
  margin: 0 0 14px !important;
  /* dimensione / peso / interlinea / font: ora gestiti dal BUILDER (sbloccati),
     come su Legna e Pellet. Su mobile ci pensa la tipografia responsive di Avada. */
}
.let-ab-hero__sub .fusion-title-heading {
  color: #ffffff !important;
  font-size: clamp(18px, 1.9vw, 24px) !important;
  font-weight: 600;
  opacity: .94;
  margin: 0 !important;
}
/* sottotitolo: stacco più ampio dal bottone "Guarda i dettagli" */
.let-ab-hero__sub { margin-bottom: clamp(40px, 4.5vw, 56px) !important; }
/* bottone hero: niente centratura forzata (segue l'allineamento dal Builder) */
.let-ab-hero__inner .fusion-button.let-ab-hero__btn { display: inline-flex !important; }

/* =====================================================================
   2. INTRO
   ===================================================================== */
.let-ab-intro { background: var(--ab-cream); text-align: center; }
.let-ab-intro__box .fusion-column-wrapper { max-width: 820px; margin: 0 auto; }
.let-ab-intro__h .fusion-title-heading {
  font-size: clamp(28px, 3.6vw, 46px) !important;
  line-height: 1.2 !important;
  font-weight: 800;
  color: var(--ab-text) !important;
  margin: 0 0 28px !important;
  text-align: center;
}
.let-ab-intro__text { text-align: center; }
.let-ab-intro__text p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--ab-bluegrey);
  margin: 0 0 22px !important;
}
.let-ab-intro__text p.let-ab-intro__lead {
  color: var(--ab-text);
  font-weight: 700;
  margin-bottom: 0 !important;
}

/* =====================================================================
   Badge (etichette di sezione)
   Il colore + padding stanno sul WRAPPER .let-ab-badge (dimensionato al
   testo). Avada azzera il padding sul .fusion-title-heading interno, perciò
   il box colorato si baserebbe solo sul testo (troppo piccolo): lo evitiamo
   colorando e imbottendo il wrapper, reso inline-block (hugs text).
   ===================================================================== */
.let-ab-badge {
  display: inline-block !important;
  align-self: flex-start;          /* non stirare in colonna flex */
  width: auto !important;
  max-width: max-content;
  padding: 14px 30px !important;   /* UNIFORME su tutti i badge */
  margin-bottom: 28px !important;
  line-height: 0;                  /* evita extra height attorno all'heading */
}
.let-ab-badge .fusion-title-heading {
  display: inline-block;
  color: #ffffff !important;
  font-size: clamp(18px, 1.5vw, 22px) !important;  /* UNIFORME su tutti i badge */
  font-weight: 700;
  line-height: 1.25;
  padding: 0 !important;
  background: transparent !important;
}
.let-ab-badge--secondary { background: var(--ab-bluegrey); }   /* blu-grigio */
.let-ab-badge--dark      { background: var(--ab-near-black); }  /* quasi nero */
.let-ab-badge--brand     { background: var(--ab-celeste); }    /* celeste brand */

/* =====================================================================
   3. PERCHÉ SCEGLIERE (2 colonne, sfondo crema)
   ===================================================================== */
.let-ab-why { background: var(--ab-cream-low); }
.let-ab-why > .fusion-builder-row { align-items: center; }
.let-ab-why__text { padding-right: clamp(0px, 2vw, 28px); }

/* frase introduttiva ben staccata dall'elenco sotto */
.let-ab-why__lead p {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--ab-text);
}
.let-ab-why__lead { margin-bottom: clamp(48px, 6vh, 80px) !important; }

/* elenco con icona check (arancio) — voci VICINE tra loro come l'originale */
.let-ab-checklist .let-ab-check {
  position: relative;
  padding-left: 40px;
  margin: 0 0 8px !important;
  line-height: 1.3;
}
.let-ab-checklist .let-ab-check:last-child { margin-bottom: 0 !important; }
.let-ab-checklist .let-ab-check::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f48221' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-4.8'/%3E%3C/svg%3E");
}
.let-ab-checklist .let-ab-check strong {
  display: block;
  font-weight: 700;
  font-size: clamp(16px, 1.2vw, 18px);
  color: var(--ab-text);
  margin-bottom: 3px;
}
/* descrizione = stessa dimensione dell'etichetta */
.let-ab-checklist .let-ab-check span {
  display: block;
  font-weight: 400;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.55;
  color: var(--ab-bluegrey);
}

/* riquadro citazione con bordo sinistro arancio */
.let-ab-quote {
  margin-top: 36px !important;
  border-left: 4px solid var(--ab-orange);
  padding: 4px 0 4px 24px;
}
.let-ab-quote p {
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.45;
  font-style: italic;
  color: var(--ab-text);
}
.let-ab-quote p strong { font-weight: 700; font-style: italic; }
.let-ab-quote p span { font-weight: 400; font-style: italic; color: var(--ab-bluegrey); }

/* immagine destra */
.let-ab-why__img { display: flex; }
.let-ab-why__imgframe,
.let-ab-why__imgframe .fusion-imageframe,
.let-ab-why__imgframe a { display: block; width: 100%; height: 100%; }
.let-ab-why__imgframe img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 20px 44px rgba(0,0,0,.16);
}

/* =====================================================================
   4. LE NOSTRE SOLUZIONI
   ===================================================================== */
.let-ab-sol { background: var(--ab-cream); }

/* Le DUE row Fusion devono IMPILARSI (intro in cima, poi la fila di 4 foto):
   il container .let-ab-sol è un flex-container Avada che metterebbe le due
   row affiancate → forziamo la direzione a colonna così si impilano. */
.let-ab-sol.fusion-flex-container,
.let-ab-sol {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
.let-ab-sol > .fusion-builder-row {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* intro centrata: la colonna Fusion è flex-column → centriamo i figli */
.let-ab-sol__intro { text-align: center; align-items: center !important; }
.let-ab-sol__intro > .fusion-column-wrapper { max-width: 900px; margin: 0 auto; }
/* badge centrato (annulla l'align-self:flex-start del badge) */
.let-ab-sol__intro .let-ab-badge { align-self: center !important; margin-left: auto; margin-right: auto; }
.let-ab-sol__sub, .let-ab-sol__list { width: 100%; }

.let-ab-sol__sub p {
  font-size: clamp(16px, 1.2vw, 18px);
  color: var(--ab-bluegrey);
  margin: 0 auto 30px !important;
  max-width: 640px;
}

/* elenco 5 voci, quadratino arancio, 2 colonne centrate, voci allineate a SINISTRA */
.let-ab-sol__list {
  display: inline-grid;
  grid-template-columns: repeat(2, max-content);
  gap: 16px 64px;
  justify-content: center;
  justify-items: start;
  text-align: left !important;
  margin: 0 auto !important;
}
.let-ab-sol__list .let-ab-sol__item {
  position: relative;
  padding-left: 22px;
  width: 100%;
  margin: 0 !important;
  text-align: left !important;
  font-weight: 700;
  font-size: clamp(16px, 1.2vw, 18px);
  color: var(--ab-text);
  line-height: 1.4;
}
.let-ab-sol__list .let-ab-sol__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 9px;
  height: 9px;
  background: var(--ab-orange);
}

/* fila di 4 foto verticali (aspect-ratio 3/4) con didascalia sotto */
.let-ab-sol > .fusion-builder-row:nth-of-type(2) { margin-top: clamp(64px, 7vw, 104px); }
.let-ab-card { text-align: left; }
.let-ab-card__img,
.let-ab-card__img .fusion-imageframe,
.let-ab-card__img a { display: block; width: 100%; }
.let-ab-card__img img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 4 !important;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.let-ab-card__cap { margin-top: 12px !important; }
.let-ab-card__cap .fusion-title-heading {
  font-size: 14px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ab-bluegrey) !important;
}
/* stacco orizzontale tra le 4 foto (gap ~28px), a filo coi bordi sezione.
   IMPORTANTE: tutte le card hanno lo STESSO padding orizzontale (14px+14px)
   così la larghezza del box immagine è IDENTICA su tutte e 4 (e di conseguenza
   l'altezza, via aspect-ratio 3/4). La fila viene "allargata" con un margine
   negativo pari al padding, così le foto esterne restano a filo dei bordi. */
.let-ab-sol > .fusion-builder-row:nth-of-type(2) > .fusion-builder-row-inner,
.let-ab-sol > .fusion-builder-row:nth-of-type(2) .fusion-row {
  margin-left: -14px !important;
  margin-right: -14px !important;
}
.let-ab-sol > .fusion-builder-row:nth-of-type(2) .let-ab-card {
  padding-left: 14px !important;
  padding-right: 14px !important;
  box-sizing: border-box !important;
}

/* =====================================================================
   5. IL NOSTRO OBIETTIVO
   ===================================================================== */
.let-ab-goal {
  background: var(--ab-cream);
  text-align: center;
  border-top: 1px solid var(--ab-border);
  padding-top: clamp(72px, 9vw, 120px) !important;
  padding-bottom: clamp(72px, 9vw, 120px) !important;
}
/* la colonna Fusion è flex: centriamo il wrapper (justify-content) e i figli */
.let-ab-goal__inner { text-align: center; align-items: center !important; justify-content: center !important; }
.let-ab-goal__inner > .fusion-column-wrapper { max-width: 1000px !important; margin-left: auto !important; margin-right: auto !important; }
/* badge celeste CENTRATO (annulla l'align-self:flex-start del badge).
   Azzeriamo il margin-bottom del badge: lo spazio sopra il testo è gestito
   interamente dal wrapper .let-ab-goal__text, così il testo resta
   verticalmente EQUILIBRATO tra badge e bottone. */
.let-ab-goal .let-ab-badge { align-self: center !important; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; }
.let-ab-goal__text { width: 100%; }

/* Spazio EQUILIBRATO sopra e sotto il testo (gestito sul wrapper, non sul <p>,
   perché .fusion-text crea un contesto che tratterrebbe i margini del <p>).
   Il testo "Realizzare bagni…" resta centrato verticalmente tra il badge
   "Il nostro obiettivo" e il bottone "Richiedi consulenza". */
.let-ab-goal__text {
  margin-top: clamp(40px, 5vh, 64px) !important;
  margin-bottom: clamp(40px, 5vh, 64px) !important;
}
.let-ab-goal__text p {
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.5;
  font-weight: 700;
  color: var(--ab-text);
  margin: 0 auto !important;
}
@media (min-width: 1025px) { .let-ab-goal__text p { white-space: nowrap; font-size: 20px; } }

/* bottone "Richiedi consulenza" CENTRATO (wrapper nativo ha text-align:left inline) */
.let-ab-goal__inner [style*="text-align"] { text-align: center !important; }
.let-ab-goal__inner .fusion-button.let-ab-goal__btn {
  display: inline-flex !important;
  align-items: center;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* =====================================================================
   Bottoni (arancio, testo scuro, border-radius 50px) — element nativo
   ===================================================================== */
.let-ab-hero__btn.fusion-button,
.let-ab-goal__btn.fusion-button {
  background: #f78b1f !important;          /* arancio della homepage */
  background-image: none !important;
  border: 0 !important;
  border-radius: 50px; /* niente !important: così è modificabile dall'elemento Avada */
  color: #3b3c3f !important;               /* testo grigio scuro come homepage */
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  font-size: 14px !important;
  padding: 16px 44px !important;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.let-ab-hero__btn.fusion-button .fusion-button-text,
.let-ab-goal__btn.fusion-button .fusion-button-text {
  color: #3b3c3f !important;               /* testo grigio scuro come homepage */
}
.let-ab-hero__btn.fusion-button:hover,
.let-ab-goal__btn.fusion-button:hover {
  background: #d9760f !important;          /* arancio più scuro (hover) */
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.let-ab-hero__btn.fusion-button:hover .fusion-button-text,
.let-ab-goal__btn.fusion-button:hover .fusion-button-text { color: #ffffff !important; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
/* foto soluzioni: 4 → 2 → 1 */
@media (max-width: 1100px) {
  .let-ab-sol > .fusion-builder-row:nth-of-type(2) .let-ab-card { width: 50% !important; }
}
@media (max-width: 640px) {
  .let-ab-sol > .fusion-builder-row:nth-of-type(2) .let-ab-card { width: 100% !important; }
  .let-ab-sol__list { grid-template-columns: 1fr; }
}

/* perché scegliere: 1 colonna, immagine sopra il testo */
@media (max-width: 800px) {
  .let-ab-why__text { padding-right: 0; }
  .let-ab-why__img { order: -1; margin-bottom: 28px; }
  .let-ab-goal__text p { white-space: normal !important; }
}

/* =====================================================================
   MOBILE (≤768px): testi allineati a SINISTRA (il centrato si legge male
   su schermo stretto). I badge restano in alto a sinistra, i bottoni
   restano a piena larghezza/centrati come gruppo. Su desktop nulla cambia.
   ===================================================================== */
@media (max-width: 768px) {

  /* ---- HERO ---- */
  .let-ab-hero { text-align: left; }
  .let-ab-hero__inner,
  .let-ab-hero__inner > .fusion-column-wrapper { text-align: left !important; }
  .let-ab-hero__inner { align-items: flex-start !important; }
  .let-ab-hero__inner .fusion-column-wrapper { margin: 0; }
  /* mantieni uno stacco ampio sub→bottone anche su mobile: serve specificità
     extra per battere le regole responsive .fusion-title di Avada (!important) */
  .let-ab-hero .let-ab-hero__sub.fusion-title { margin-bottom: 40px !important; }
  .let-ab-hero__title .fusion-title-heading,
  .let-ab-hero__sub .fusion-title-heading { text-align: left !important; }
  .let-ab-hero__inner .fusion-button.let-ab-hero__btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .let-ab-hero__inner [style*="text-align"] { text-align: left !important; }

  /* ---- INTRO ---- */
  .let-ab-intro { text-align: left; }
  .let-ab-intro__h .fusion-title-heading { text-align: left !important; }
  .let-ab-intro__text,
  .let-ab-intro__text p { text-align: left !important; }

  /* ---- LE NOSTRE SOLUZIONI (intro) ---- */
  .let-ab-sol__intro { text-align: left; align-items: flex-start !important; }
  .let-ab-sol__intro > .fusion-column-wrapper { margin: 0; }
  .let-ab-sol__intro .let-ab-badge {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .let-ab-sol__sub p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* elenco voci: una colonna allineata a sinistra (no centratura del grid) */
  .let-ab-sol__list {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: start;
    margin-left: 0 !important;
    text-align: left !important;
  }

  /* ---- IL NOSTRO OBIETTIVO ---- */
  .let-ab-goal { text-align: left; }
  .let-ab-goal__inner {
    text-align: left;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  .let-ab-goal__inner > .fusion-column-wrapper { margin-left: 0 !important; margin-right: 0 !important; }
  .let-ab-goal .let-ab-badge {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .let-ab-goal__text p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .let-ab-goal__inner [style*="text-align"] { text-align: left !important; }
  .let-ab-goal__inner .fusion-button.let-ab-goal__btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =====================================================================
   HERO Arredo Bagno: titolo in BASSO a SINISTRA (come Legna e Pellet).
   Contenuto spinto in fondo (container + colonna) e allineato a sinistra.
   ===================================================================== */
/* SOLO MOBILE: il titolo 100px non entra nel banner corto (282px) e finiva
   "sparato in alto". Alziamo la hero come su Legna e Pellet e spingiamo il
   contenuto in BASSO a SINISTRA. Il desktop resta invariato. */
@media (max-width: 640px) {
  .let-page-arredo-bagno .let-ab-hero {
    height: auto !important;
    min-height: 58vh !important;
    align-items: flex-end !important;
    padding-bottom: 28px !important;
  }
  .let-page-arredo-bagno .let-ab-hero__inner { justify-content: flex-end !important; }
  .let-page-arredo-bagno .let-ab-hero__inner .fusion-column-wrapper {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .let-page-arredo-bagno .let-ab-hero__title .fusion-title-heading,
  .let-page-arredo-bagno .let-ab-hero__sub .fusion-title-heading { text-align: left !important; }
  .let-page-arredo-bagno .let-ab-hero__inner .fusion-button.let-ab-hero__btn {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =====================================================================
   HERO Arredo Bagno (struttura STAGING) — la hero è .fusion-builder-row-1
   (NON .let-ab-hero). Le classi flex per il basso ci sono già, ma la COLONNA
   interna cresce solo all'altezza del contenuto (~69px) invece di riempire la
   row → il "flex-end" non spinge nulla. Forziamo la colonna a riempire la row,
   così il titolo va davvero in BASSO a SINISTRA (come Legna e Pellet).
   ===================================================================== */
.let-page-arredo-bagno .fusion-builder-row-1 .fusion-layout-column {
  min-height: 282px !important;
}
.let-page-arredo-bagno .fusion-builder-row-1 .fusion-column-wrapper {
  justify-content: flex-end !important;
  min-height: 100% !important;
  flex: 1 1 auto !important;
}
@media (max-width: 640px) {
  .let-page-arredo-bagno .fusion-builder-row-1 .fusion-layout-column {
    min-height: 220px !important;
  }
}