/* Mosaici delle quattro sezioni: struttura senza tabelle. */
.section-mosaic {
  display: grid;
  width: 812px;
  max-width: 100%;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  grid-auto-rows: 75px;
  row-gap: 18px;
  list-style: none;
  box-sizing: content-box;
  margin: 0 auto;
  padding: 1px 0;
}

.section-mosaic-cell {
  min-width: 0;
}

.section-mosaic-cell > img,
.section-mosaic-cell > a > img {
  display: block;
  width: 75px;
  height: 75px;
}

.section-mosaic-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 75px;
  height: 75px;
  text-align: center;
  background: #ff9966;
}

.section-mosaic-tile p {
  margin: 0;
}

.section-mosaic-cell--contact {
  grid-column: span 3;
  padding: 0;
  text-align: center;
  font: 700 10px Verdana, Arial, Helvetica, sans-serif;
}

.section-mosaic-cell--contact p {
  margin: 10px 0;
}

.section-mosaic-cell--contact img {
  max-width: none;
  height: auto;
}

.section-mosaic-cell a img {
  transition: opacity .2s;
}

.section-mosaic-cell a:hover img {
  opacity: .88;
}

/* Link scuri anche dopo la visita. */
.site-shell a:link,
.site-shell a:visited,
.site-shell a:active {
  color: #333;
  text-decoration: none;
}

.site-shell a:hover,
.site-shell a:focus-visible {
  color: #333;
  text-decoration: underline;
  text-decoration-color: #333;
}

.site-shell a.text-link {
  border-bottom: 0;
}

/* Allineamenti della composizione desktop originale. */
.section-offset-1  { padding-left: 7.312px; }
.section-offset-2  { padding-left: 6.109px; }
.section-offset-3  { padding-left: 7.828px; }
.section-offset-4  { padding-left: 7.875px; }
.section-offset-5  { padding-left: 6.188px; }
.section-offset-6  { padding-left: 6.172px; }
.section-offset-7  { padding-left: 6px; }
.section-offset-8  { padding-left: 11.5px; }
.section-offset-9  { padding-left: 6.5px; }
.section-offset-10 { padding-left: 7.75px; }
.section-offset-11 { padding-left: 6.125px; }
.section-offset-12 { padding-left: 7.484px; }
.section-offset-13 { padding-left: 8px; }
.section-offset-14 { padding-left: 8.047px; }
.section-offset-15 { padding-left: 6.203px; }

.section-type-1 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  color: #fff;
}

.section-type-2 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  color: #333;
}

.section-type-3 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  font-style: normal;
  color: #333;
}

.section-type-4 {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  color: #333;
}

.section-mosaic--fotografia {
  grid-template-columns:
    89.640625fr 89.640625fr 89.640625fr
    90.671875fr 89.640625fr 90.671875fr
    90.671875fr 90.671875fr 90.75fr;
  grid-template-rows: 75px 75px 75px 75px 75px;
}

.section-mosaic--muro {
  grid-template-columns:
    98fr 88fr 88fr 88fr 88fr 88fr 88fr 88fr 98fr;
  grid-template-rows: 75px 75px 75px 75px 75px;
}

.section-mosaic--contatti {
  grid-template-columns:
    90.5fr 90.5fr 90.5fr 90.5fr 88fr
    90.5fr 90.5fr 90.5fr 90.5fr;
  grid-template-rows: 75px 75px 75px minmax(75px, auto) 75px;
}

.section-mosaic--portfolio {
  grid-template-columns:
    89.984375fr 89.984375fr 89.984375fr
    91.015625fr 89.984375fr 89.984375fr
    89.984375fr 89.984375fr 91.09375fr;
  grid-template-rows: 75px 75px 75px 75px 75px;
}

/* Mobile: tre colonne, stesso ordine di lettura.
   Il blocco contatti occupa una riga completa. */
@media (max-width: 900px) {
  .section-mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(75px, auto);
    gap: 18px 6px;
    width: 360px;
  }

  .section-mosaic .section-mosaic-cell {
    padding-left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .section-mosaic-cell--contact {
    grid-column: 1 / -1;
  }
}