/* BS3 -> BS5 compat per il tema Studio Roberto Falcone (OSINT 7564 / 7764).
   Ri-aggiunge le classi/comportamenti che Bootstrap 5 ha rimosso e che il tema usa. */

/* Media object (rimosso in BS5) - immagine a sinistra + testo a destra */
.media { display: flex; align-items: flex-start; }
.media-body { flex: 1 1 auto; }

/* .sr-only (BS3) -> equivalente di .visually-hidden (BS5) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== NAVBAR: ripristino estetica BS3 sotto BS5 ===== */
/* BS5 (reboot) sottolinea i link e non stila piu' .navbar-toggle/.icon-bar. */
#main-menu .navbar-brand, #main-menu .navbar-brand:hover,
#main-menu .navbar-nav > li > a, #main-menu .navbar-nav > li > a:hover,
#main-menu .navbar-nav > li > a:focus { text-decoration: none; }
.navbar-toggle { display: inline-block; padding: 9px 10px; background: transparent; border: 1px solid #ccc; border-radius: 4px; cursor: pointer; line-height: 1; }
.navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; background: #555; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
@media (min-width: 768px) { .navbar-toggle { display: none; } }
/* spazio tra le voci del menu desktop (main.css mette solo padding verticale) */
@media (min-width: 768px) { #main-menu .navbar-nav > li > a { padding-left: 14px; padding-right: 14px; } }
@media (max-width: 767.98px) {
  #main-menu.navbar { padding: 0; background: rgba(255,255,255,0.97); box-shadow: 0 0 3px rgba(0,0,0,.1); }
  #main-menu .container { display: flex; flex-wrap: wrap; align-items: center; }
  #main-menu .navbar-header { display: flex; align-items: center; justify-content: space-between; width: 100%; }
  #main-menu .navbar-header .navbar-brand { order: 1; padding: 8px 15px; margin: 0; }
  #main-menu .navbar-header .navbar-toggle { order: 2; margin: 8px 15px 8px 0; }
  #main-menu .navbar-brand img { display: block; height: 44px; width: auto; }
  #main-menu .navbar-collapse { width: 100%; }
  #main-menu .navbar-nav { flex-direction: column; width: 100%; margin: 0; padding: 0; }
  #main-menu .navbar-nav > li { width: 100%; }
  #main-menu .navbar-nav > li > a { display: block; padding: 12px 15px; color: #333; border-top: 1px solid #eee; font-size: 16px; }
  #main-menu .navbar-nav > li.active > a { color: #45aed6; }
}

/* Tab ".main-tab": stato attivo sull'<a> (BS5), distribuzione equa, testo centrato,
   senza sottolineatura, grassetto, 15px. */
.nav.main-tab { flex-wrap: nowrap; }
.nav.main-tab > li { flex: 1 1 0; }
.nav.main-tab > li > a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 72px; text-decoration: none; font-weight: 700; font-size: 15px;
}
.nav.main-tab > li > a:hover,
.nav.main-tab > li > a:focus { text-decoration: none; }
.nav.main-tab > li > a.active { background: #222534; color: #45aed6; }

/* ===== Griglia "Attivita' dello Studio" ===== */
/* >=1200px: 3 colonne, immagine a sinistra + titolo a destra (aspetto originale). */
.features { display: flex; flex-wrap: wrap; }
.features > a { flex: 0 0 100%; max-width: 100%; padding: 6px; }
@media (min-width: 576px) { .features > a { flex-basis: 50%; max-width: 50%; } }
@media (min-width: 768px) { .features > a { flex-basis: 33.3333%; max-width: 33.3333%; } }
.features > a > .col-md-4,
.features > a > .col-sm-6 { width: 100%; max-width: 100%; float: none; }
.media.service-box { align-items: center; padding: 0; }
.media.service-box .media-heading { margin: 0 8px 0 0; line-height: 1.1; font-size: 16px; }

/* <1200px: 4 COLONNE, card impilate. Immagine sopra full-width (a filo: azzero padding/bordo che
   main.css mette sul box), ingrandita 130% con overflow nascosto per coprire il taglio obliquo,
   ritagliata orizzontale 16/10; titolo bianco sotto su azzurro. Card stessa altezza per riga e piene
   nella colonna (BS5 mette flex:0 0 auto sui .col-* -> serve flex:1 1 auto). <576px: 2 colonne. */
@media (max-width: 1199.98px) {
  .features > a { flex-basis: 25%; max-width: 25%; padding: 6px; display: flex; flex-direction: column; }
  .features > a > .col-md-4,
  .features > a > .col-sm-6 {
    flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important;
    float: none; display: flex; flex-direction: column;
  }
  .media.service-box {
    flex: 1 1 auto; width: 100%; display: flex; flex-direction: column;
    overflow: hidden; padding: 0; border: 0;
  }
  .media.service-box > .pull-left { float: none; width: 100%; margin: 0; overflow: hidden; flex: 0 0 auto; }
  .media.service-box > .pull-left img {
    width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; display: block; transform: scale(1.3);
  }
  .media.service-box > .media-body {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px;
  }
  .media.service-box .media-heading { margin: 0; line-height: 1.2; font-size: 15px; }
}
@media (max-width: 575.98px) {
  .features > a { flex-basis: 50%; max-width: 50%; }
}