/* css/promo-blog.css — 21 settembre 2026
   I due riquadri grandi delle guide: a sinistra chi cerca un artigiano,
   a destra chi ha un'impresa e si vuole registrare.

   Perche' sta in un file a parte: i riquadri sono uguali su tutte le guide.
   Cosi' per cambiare colore o testo si tocca un file solo, non trenta.

   Come si usa (dentro la pagina):
     <div class="ti-promo"> ... </div>
*/

.ti-promo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin:26px 0 30px;
}

.ti-promo-c{
  border-radius:18px;
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  text-align:center;
}

/* Sinistra: il cliente che cerca */
.ti-promo-cli{ background:#eaf2ff; border:2px solid #b9d2ff; }
/* Destra: l'impresa che si iscrive */
.ti-promo-imp{ background:#eaf7ee; border:2px solid #b4e0c2; }

.ti-promo-t{
  font-size:25px;
  font-weight:800;
  line-height:1.25;
  margin:0 0 8px;
}
.ti-promo-cli .ti-promo-t{ color:#0047b3; }
.ti-promo-imp .ti-promo-t{ color:#116631; }

.ti-promo-s{
  font-size:17px;
  line-height:1.5;
  color:#42546b;
  margin:0 0 20px;
  flex:1;
}

.ti-promo-b{
  display:block;
  text-decoration:none;
  font-weight:800;
  font-size:20px;
  line-height:1.3;
  padding:18px 20px;
  border-radius:14px;
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.14);
  transition:background .15s;
}
.ti-promo-b1{ background:#ff8800; }
.ti-promo-b1:hover{ background:#e67a00; }
.ti-promo-b2{ background:#15803d; }
.ti-promo-b2:hover{ background:#116631; }

.ti-promo-n{
  display:block;
  margin-top:12px;
  font-size:14.5px;
  color:#6b7b8c;
}

/* Telefono: uno sotto l'altro, pulsanti a tutta larghezza */
@media (max-width:760px){
  .ti-promo{ grid-template-columns:1fr; gap:14px; margin:20px 0 24px; }
  .ti-promo-c{ padding:22px 18px; }
  .ti-promo-t{ font-size:22px; }
  .ti-promo-s{ font-size:16.5px; margin-bottom:16px; }
  .ti-promo-b{ font-size:19px; padding:17px 16px; }
}

/* --- Il logo grande sotto la barra, come nella home --- */
.ti-logo-grande{
  background:#fff;
  text-align:center;
  padding:22px 20px 20px;
  border-bottom:1px solid #eef2f7;
}
.ti-logo-grande img{
  max-width:340px;
  width:72%;
  height:auto;
  display:block;
  margin:0 auto;
}
@media (max-width:760px){
  .ti-logo-grande{ padding:16px 16px 14px; }
  .ti-logo-grande img{ max-width:240px; width:80%; }
}

/* --- La striscia a meta' articolo: piu' bassa, per non spezzare la lettura --- */
.ti-riga{
  background:#fff7ed;
  border:2px solid #ffd9a0;
  border-radius:16px;
  padding:20px 22px;
  margin:34px 0;
  text-align:center;
}
.ti-riga-t{
  font-size:19px;
  line-height:1.4;
  color:#0a2a4d;
  font-weight:800;
  margin:0 0 14px;
}
.ti-riga-btns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.ti-riga-btns a{
  background:#ff8800;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:17.5px;
  padding:15px 18px;
  border-radius:12px;
  display:block;
}
.ti-riga-btns a:hover{ background:#e67a00; }
.ti-riga-btns a.verde{ background:#15803d; }
.ti-riga-btns a.verde:hover{ background:#116631; }

@media (max-width:760px){
  .ti-riga{ padding:18px 16px; }
  .ti-riga-t{ font-size:18px; }
  .ti-riga-btns{ grid-template-columns:1fr; gap:10px; }
}