/* Blocco testo-immagine */

/* Split storico: col-md-6 + col-md-6, gutter 30px */
.b-ti__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
}

.b-ti__inner--img-sx .b-ti__media {
  order: -1;
}

/* Senza media: banda di solo testo centrato (es. "Garanzie" storica) */
.b-ti__inner--solo {
  display: block;
  text-align: center;
}

/* Solo mappa: a tutta larghezza, 500px come la #contatti storica */
.b-ti__inner--mappa-full {
  display: block;
}

.b-ti__inner--mappa-full .b-ti__map {
  aspect-ratio: auto;
  height: 500px;
}

@media (max-width: 47.999rem) {
  .b-ti__inner--mappa-full .b-ti__map {
    height: 360px;
  }
}

.b-ti__inner--solo .b-ti__text {
  max-width: 70ch;
  margin-inline: auto;
}

@media (max-width: 63.999rem) {
  .b-ti__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }

  .b-ti__inner--img-sx .b-ti__media {
    order: 0;
  }
}

/* Occhiello: la .small storica */
.b-ti__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-primary-dark);
  margin-bottom: 10px;
}

.b-ti.bg-primary .b-ti__eyebrow {
  color: #fff;
}

.b-ti.bg-primary .prose,
.b-ti.bg-primary .prose li::marker,
.b-ti.bg-primary .prose p {
  color: #fff;
}

.b-ti.bg-primary .prose a {
  color: #fff;
  text-decoration: underline;
}

/* Paragrafi: lo stile storico (16px/400, lh 24, grigio, mb 30) */
.b-ti__content .prose p {
  font-size: 1rem;
  color: var(--c-text-muted);
  line-height: 1.5;
  margin-bottom: 1.875rem;
}

.b-ti__cta {
  margin-top: var(--sp-6);
}

/* Le immagini rendono alla dimensione naturale (mai upscale né crop:
   lo storico le mostrava intere), centrate nella colonna. */
.b-ti__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 5px; /* radius-5 storico */
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.1); /* shadow-grey storica */
}

/* PNG trasparenti (collage circolari storici): niente card rettangolare,
   l'ombra segue il contorno del soggetto. */
.b-ti__img--trasparente,
.b-ti__img[src*=".png"] {
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 12px 18px rgb(0 0 0 / 0.18));
}

/* Facade mappa: nessuna richiesta a Google finché non si clicca.
   Il fondo è una mappa stilizzata disegnata in CSS (strade, parco,
   acqua) — nessuna immagine, nessuna richiesta di rete. */
.b-ti__map {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* base celeste del brand */
  background-color: var(--c-primary-light);
  background-image:
    /* specchio d'acqua appena più intenso (basso a sinistra) */
    radial-gradient(120% 80% at 6% 110%, rgb(0 128 235 / 0.14) 0 22%, transparent 24%),
    /* area verde / parco delicata (alto a destra) */
    radial-gradient(70% 60% at 94% 2%, rgb(0 128 235 / 0.08) 0 30%, transparent 32%),
    /* due arterie principali diagonali, bianche e morbide */
    linear-gradient(58deg, transparent calc(50% - 4px), rgb(255 255 255 / 0.9) calc(50% - 4px) calc(50% + 4px), transparent calc(50% + 4px)),
    linear-gradient(-42deg, transparent calc(72% - 3px), rgb(255 255 255 / 0.75) calc(72% - 3px) calc(72% + 3px), transparent calc(72% + 3px)),
    /* reticolo di strade secondarie, bianco tenue */
    repeating-linear-gradient(0deg, transparent 0 44px, rgb(255 255 255 / 0.45) 44px 46px),
    repeating-linear-gradient(90deg, transparent 0 54px, rgb(255 255 255 / 0.45) 54px 56px);
}

.b-ti__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.b-ti__map-facade {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  text-align: center;
  /* velo chiaro al centro: la mappa resta visibile ai bordi ma
     testo e pulsanti restano leggibili */
  background: radial-gradient(75% 65% at 50% 50%, rgb(255 255 255 / 0.6) 0 50%, transparent 100%);
}

.b-ti__map-pin {
  color: var(--c-primary);
  /* alone bianco: il pin sembra piantato sulla mappa */
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.28));
}

.b-ti__map-address {
  font-weight: 600;
  color: var(--c-text-strong);
  margin: 0;
}