/* ==========================================================================
   Centro Medico Apollonia - stili del sito (dopo Bootstrap 5.3)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font (Roboto in locale, subset latin)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-300-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/roboto-latin-700-normal.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Variabili
   -------------------------------------------------------------------------- */
:root {
  /* Palette: l'azzurro originale (#66a5d1) ha contrasto 2,7:1 sul bianco, quindi
     si usa solo per elementi decorativi; testi e fondi con testo bianco usano --cma-blu (5,1:1). */
  --cma-azzurro: #66a5d1;
  --cma-blu: #3073a1;
  --cma-blu-rgb: 48, 115, 161;
  --cma-blu-scuro: #245a80;
  --cma-blu-scuro-rgb: 36, 90, 128;
  --cma-grigio-chiaro: #f2f3f5;
  --cma-bordo: #e6e6e6;
  --cma-testo: #333;
  --cma-testo-secondario: #595959;
  --cma-ombra-testata: 42px;

  /* Bootstrap */
  --bs-body-font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --bs-body-font-size: 1.0625rem;
  --bs-body-font-weight: 300;
  --bs-body-line-height: 1.6;
  --bs-body-color: var(--cma-testo);
  --bs-body-color-rgb: 51, 51, 51;
  --bs-primary: var(--cma-blu);
  --bs-primary-rgb: var(--cma-blu-rgb);
  --bs-link-color: var(--cma-blu);
  --bs-link-color-rgb: var(--cma-blu-rgb);
  --bs-link-hover-color: var(--cma-blu-scuro);
  --bs-link-hover-color-rgb: var(--cma-blu-scuro-rgb);
  --bs-border-color: var(--cma-bordo);
  --bs-focus-ring-color: rgba(var(--cma-blu-rgb), .5);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
img {
  max-width: 100%;
  height: auto;
}

strong,
b {
  font-weight: 500;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.25;
}

h3,
h5 {
  color: var(--cma-blu);
}

:focus-visible {
  outline: 3px solid var(--cma-blu);
  outline-offset: 2px;
}

.btn-primary {
  --bs-btn-bg: var(--cma-blu);
  --bs-btn-border-color: var(--cma-blu);
  --bs-btn-hover-bg: var(--cma-blu-scuro);
  --bs-btn-hover-border-color: var(--cma-blu-scuro);
  --bs-btn-active-bg: var(--cma-blu-scuro);
  --bs-btn-active-border-color: var(--cma-blu-scuro);
  --bs-btn-disabled-bg: var(--cma-blu);
  --bs-btn-disabled-border-color: var(--cma-blu);
  --bs-btn-focus-shadow-rgb: var(--cma-blu-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--cma-blu);
  --bs-btn-border-color: var(--cma-blu);
  --bs-btn-hover-bg: var(--cma-blu);
  --bs-btn-hover-border-color: var(--cma-blu);
  --bs-btn-active-bg: var(--cma-blu-scuro);
  --bs-btn-active-border-color: var(--cma-blu-scuro);
  --bs-btn-focus-shadow-rgb: var(--cma-blu-rgb);
}

.btn {
  font-weight: 400;
}

.skip-link {
  position: absolute;
  top: .5rem;
  left: .5rem;
  z-index: 2000;
  padding: .5rem 1rem;
  background: var(--cma-blu);
  color: #fff;
}

.skip-link:focus {
  color: #fff;
}

/* --------------------------------------------------------------------------
   Testata e menu principale
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  z-index: 1020;
  background: #fff;
}

/* Ombra curva sotto la testata, come nel sito originale */
.site-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--cma-ombra-testata);
  background: url("/assets/img/ombra-testata.png") no-repeat center top / min(1001px, 100%) 100%;
  pointer-events: none;
}

.site-header .navbar {
  --bs-navbar-padding-y: .75rem;
  --bs-navbar-color: #1a1a1a;
  --bs-navbar-hover-color: var(--cma-blu);
  --bs-navbar-active-color: var(--cma-blu);
  --bs-navbar-nav-link-padding-x: .625rem;
}

.site-header .navbar-brand {
  padding: 0;
}

.site-header .navbar-brand img {
  width: 150px;
}

.site-header .nav-link {
  font-weight: 400;
}

.site-header .navbar-toggler {
  border-color: var(--cma-bordo);
}

/* Voce con sottomenu: link alla pagina + pulsante che apre il sottomenu */
.site-header .nav-item.dropdown {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.site-header .nav-item.dropdown > a.nav-link {
  flex: 1 1 auto;
}

.site-header .dropdown-toggle {
  padding-inline: .5rem;
  background: none;
  border: 0;
}

.site-header .dropdown-menu {
  --bs-dropdown-border-radius: 0;
  --bs-dropdown-border-width: 0;
  --bs-dropdown-font-size: .9375rem;
  --bs-dropdown-link-color: var(--cma-testo);
  --bs-dropdown-link-hover-color: var(--cma-blu);
  --bs-dropdown-link-hover-bg: var(--cma-grigio-chiaro);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: var(--cma-blu);
  flex-basis: 100%;
  border-top: 3px solid var(--cma-azzurro);
}

.site-header .dropdown-item {
  white-space: normal;
}

@media (max-width: 991.98px) {
  .site-header .navbar-collapse {
    margin-top: .75rem;
    border-top: 1px solid var(--cma-bordo);
  }

  .site-header .navbar-nav .nav-link {
    padding-block: .625rem;
  }

  .site-header .dropdown-toggle {
    min-width: 2.75rem;
  }

  .site-header .dropdown-menu {
    margin-bottom: .5rem;
    background: var(--cma-grigio-chiaro);
  }
}

@media (min-width: 992px) {
  .site-header .navbar {
    --bs-navbar-padding-y: 1rem;
  }

  .site-header .navbar-brand img {
    width: 216px;
  }

  .site-header .nav-item.dropdown {
    flex-wrap: nowrap;
  }

  .site-header .navbar-nav .nav-link {
    border-bottom: 1px solid transparent;
  }

  .site-header .navbar-nav .nav-link.active {
    border-bottom-color: var(--cma-blu);
  }

  .site-header .nav-item.dropdown > a.nav-link {
    padding-right: .25rem;
  }

  .site-header .navbar-nav .dropdown-toggle {
    padding-inline: .125rem .25rem;
  }

  .site-header .dropdown-menu {
    top: 100%;
    right: 0;
    left: auto;
    min-width: 17rem;
    margin-top: 0;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
  }

  /* Apertura al passaggio del mouse; da tastiera e touch si usa il pulsante */
  @media (hover: hover) {
    .site-header .nav-item.dropdown:hover > .dropdown-menu {
      display: block;
    }
  }
}

@media (min-width: 1200px) {
  .site-header .navbar-nav .nav-link {
    font-size: 1.1875rem;
  }

  .site-header .navbar {
    --bs-navbar-nav-link-padding-x: .75rem;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  padding: 2.5rem 0 1.5rem;
  background: var(--cma-blu);
  border-top: 1px solid var(--cma-blu-scuro);
  color: #fff;
}

.site-footer a {
  color: #fff;
}

.site-footer :focus-visible {
  outline-color: #fff;
}

.footer-title {
  margin-bottom: .75rem;
  font-size: 1.125rem;
  font-weight: 500;
  text-transform: uppercase;
}

.footer-menu {
  margin: 0;
  font-size: .8125rem;
  text-transform: uppercase;
}

.footer-menu li + li {
  margin-top: .25rem;
}

.footer-menu a {
  text-decoration: none;
}

.footer-menu a:hover,
.footer-menu a[aria-current] {
  text-decoration: underline;
}

.footer-legal {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .35);
  font-size: .8125rem;
  line-height: 1.5;
  text-align: center;
}


/* --------------------------------------------------------------------------
   Contenuti esterni caricati solo su richiesta (mappe, video)
   -------------------------------------------------------------------------- */
.consent-embed {
  position: relative;
  overflow: hidden;
  background: var(--cma-grigio-chiaro);
}

.consent-embed > img {
  object-fit: cover;
}

.consent-embed:not(.is-loaded) {
  border: 1px solid var(--cma-bordo);
}

.consent-embed__overlay {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-size: .875rem;
  text-align: center;
}

/* Velo chiaro solo quando sotto c'è un'immagine di anteprima */
.consent-embed > img + .consent-embed__overlay {
  background: rgba(255, 255, 255, .85);
}

/* Icona "play" sopra il messaggio */
.consent-embed__overlay::before {
  content: "";
  width: 3.5rem;
  height: 3.5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='28' r='28' fill='%2366a5d1'/%3E%3Cpath d='M22 17l18 11-18 11z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
}

.consent-embed__overlay p {
  max-width: 32rem;
  margin: 0;
}

.consent-embed iframe {
  border: 0;
}

/* --------------------------------------------------------------------------
   Fasce di pagina
   -------------------------------------------------------------------------- */
.band-primary {
  position: relative;
  z-index: 1;
  padding: 2rem 0;
  background: var(--cma-blu);
  border-top: 1px solid var(--cma-blu-scuro);
  color: #fff;
  text-align: center;
}

.band-primary__title {
  margin: 0;
  font-size: clamp(1.25rem, .9rem + 1.6vw, 2.125rem);
  font-weight: 300;
  text-transform: uppercase;
}

/* Freccia verso il basso sotto la fascia, come nel sito originale */
.band-primary--arrow::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top: 37px solid var(--cma-blu);
  border-right: 37px solid transparent;
  border-left: 37px solid transparent;
}

.band-light,
.band-white {
  padding: 3.5rem 0;
}

.band-light {
  background: var(--cma-grigio-chiaro);
}

.band-primary--arrow + .band-light {
  padding-top: calc(3.5rem + 37px);
}

@media (min-width: 992px) {
  .band-light,
  .band-white {
    padding: 5rem 0;
  }

  .band-primary--arrow + .band-light {
    padding-top: calc(5rem + 37px);
  }
}

/* --------------------------------------------------------------------------
   Home: carousel
   -------------------------------------------------------------------------- */
.hero {
  --hero-height: clamp(200px, 26vw, 496px);
  background: var(--cma-grigio-chiaro);
}

.hero__img {
  display: block;
  width: 100%;
  height: var(--hero-height);
  object-fit: cover;
}

.hero__caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: .625rem 1rem;
  background: rgba(255, 255, 255, .92);
}

.hero__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.25;
}

.hero__title a {
  color: var(--cma-blu);
  text-decoration: none;
}

.hero__title a:hover {
  text-decoration: underline;
}

.hero__text {
  display: none;
  margin: .5rem 0 0;
  font-size: .9375rem;
  line-height: 1.4;
}

.hero .carousel-indicators {
  display: none;
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  height: var(--hero-height);
  width: 4.5rem;
  opacity: 1;
}

.hero .carousel-control-prev-icon,
.hero .carousel-control-next-icon {
  width: 2.75rem;
  height: 2.75rem;
  background-color: rgba(0, 0, 0, .5);
  background-size: 50%;
  border-radius: 50%;
}

.hero__pause {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: rgba(0, 0, 0, .5);
  border: 0;
  border-radius: 50%;
}

.hero__pause:focus-visible,
.hero .carousel-control-prev:focus-visible,
.hero .carousel-control-next:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -3px;
}

/* Icona pausa: due barre; in pausa diventa un triangolo "riproduci" */
.hero__pause-icon {
  width: 12px;
  height: 14px;
  border-right: 4px solid #fff;
  border-left: 4px solid #fff;
}

.hero__pause[data-paused] .hero__pause-icon {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-top: 8px solid transparent;
  border-right: 0;
  border-bottom: 8px solid transparent;
  border-left: 13px solid #fff;
}

@media (min-width: 768px) {
  /* La didascalia si ferma prima della freccia "successiva" */
  .hero__caption {
    right: 4.5rem;
    left: auto;
    width: 45%;
    padding: 1rem 1.5rem;
    background: #fff;
  }

  .hero__title {
    font-size: 1.375rem;
  }

  .hero .carousel-indicators {
    display: flex;
    justify-content: flex-start;
    margin-left: 1.5rem;
  }
}

@media (min-width: 992px) {
  .hero__caption {
    padding: 1.25rem 1.5rem 1.5rem;
  }

  .hero__title {
    font-size: 1.75rem;
  }

  .hero__text {
    display: block;
  }
}

@media (min-width: 1200px) {
  .hero__title {
    font-size: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Home: card con immagine circolare
   -------------------------------------------------------------------------- */
.feature-card {
  position: relative;
  text-align: center;
}

.feature-card__img {
  width: 100%;
  max-width: 293px;
  padding: 4px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  transition: border-color .2s;
}

.feature-card:hover .feature-card__img {
  border-color: var(--cma-azzurro);
}

.feature-card__title {
  margin: 1.25rem 0 0;
  font-size: 1.3125rem;
  font-weight: 300;
}

.feature-card__title a {
  color: var(--cma-blu);
  text-decoration: none;
}

.feature-card:hover .feature-card__title a {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Home: fascia con la foto della dottoressa
   -------------------------------------------------------------------------- */
.band-doctor {
  padding-bottom: 3.5rem;
}

.band-doctor::before {
  content: "";
  display: block;
  height: clamp(200px, 55vw, 380px);
  margin-bottom: 2rem;
  background: url("/assets/img/dottoressa_home.jpg") 78% 20% / cover no-repeat;
}

.band-doctor__title {
  margin-bottom: .25rem;
  color: #1a1a1a;
  font-size: 1.625rem;
  font-weight: 500;
}

.band-doctor__subtitle {
  margin-bottom: 1.5rem;
  font-size: 1.375rem;
  font-weight: 300;
}

@media (min-width: 992px) {
  .band-doctor {
    padding: 4.5rem 0;
    background:
      linear-gradient(90deg, rgba(255, 255, 255, .92) 0, rgba(255, 255, 255, .85) 52%, rgba(255, 255, 255, 0) 64%),
      url("/assets/img/dottoressa_home.jpg") center top / cover no-repeat;
  }

  .band-doctor::before {
    content: none;
  }

  .band-doctor__text {
    max-width: 56%;
  }

  .band-doctor__columns {
    column-count: 2;
    column-gap: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Home: blocchi di approfondimento
   -------------------------------------------------------------------------- */
.teaser {
  font-size: .9375rem;
}

.teaser__media {
  margin-bottom: 1rem;
}

.teaser__media > img {
  object-fit: cover;
}

.teaser__title {
  margin: 0 0 .5rem;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 500;
}

.teaser__title a {
  color: var(--cma-blu);
  text-decoration: none;
}

.teaser__title a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Pagine interne: testata, titolo e briciole di pane
   -------------------------------------------------------------------------- */
.page-banner img {
  display: block;
  width: 100%;
  height: clamp(140px, 24vw, 420px);
  object-fit: cover;
}

.page-heading {
  padding: 1.5rem 0 1.25rem;
  background: var(--cma-blu);
  color: #fff;
}

.page-heading__title {
  margin-bottom: 0;
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 300;
  text-transform: uppercase;
}

.page-heading .breadcrumb {
  --bs-breadcrumb-divider-color: rgba(255, 255, 255, .8);
  --bs-breadcrumb-item-active-color: #fff;
  margin: 0 0 .375rem;
  font-size: .875rem;
}

.page-heading .breadcrumb a {
  color: #fff;
}

.page-heading :focus-visible {
  outline-color: #fff;
}

@media (min-width: 992px) {
  .page-heading {
    padding: 1.75rem 0 2rem;
  }
}

.page-body {
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 992px) {
  .page-body {
    padding-top: 3.5rem;
    padding-bottom: 5rem;
  }
}

/* --------------------------------------------------------------------------
   Pagine interne: testo
   -------------------------------------------------------------------------- */
.content .lead {
  margin-bottom: 1.25rem;
  color: #444;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.5;
}

.content h2 {
  margin: 2.25rem 0 .75rem;
  color: var(--cma-blu);
  font-size: 1.375rem;
}

.content h3 {
  margin: 1.75rem 0 .5rem;
  font-size: 1.1875rem;
}

.content__img {
  display: block;
  margin: 1.75rem 0;
  border-radius: 8px;
}

/* Prestazioni collegate */
.related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cma-bordo);
}

.related__title {
  margin-bottom: 1.5rem;
  color: var(--cma-blu);
  font-size: 1.375rem;
  font-weight: 500;
  text-transform: uppercase;
}

.related-card {
  position: relative;
  height: 100%;
}

.related-card__img {
  width: 100%;
  border-radius: 8px;
  transition: opacity .2s;
}

.related-card:hover .related-card__img {
  opacity: .85;
}

.related-card__title {
  margin: .875rem 0 .375rem;
  font-size: 1.1875rem;
  font-weight: 400;
}

.related-card__title a {
  color: var(--cma-blu);
  text-decoration: none;
}

.related-card:hover .related-card__title a {
  text-decoration: underline;
}

.related-card__text {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Pagine interne: colonna "Cosa facciamo"
   -------------------------------------------------------------------------- */
.service-nav__title {
  margin-bottom: 0;
  padding-bottom: .625rem;
  border-bottom: 2px solid var(--cma-azzurro);
  color: var(--cma-testo-secondario);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
}

.service-nav__list,
.service-nav__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-nav__item {
  border-bottom: 1px solid var(--cma-bordo);
}

.service-nav__link {
  position: relative;
  display: block;
  padding: .625rem 0 .625rem 1.25rem;
  color: var(--cma-testo-secondario);
  font-size: .875rem;
  font-weight: 400;
  text-decoration: none;
  text-transform: uppercase;
}

/* Freccia a sinistra di ogni voce */
.service-nav__link::before {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: .125rem;
  width: .4rem;
  height: .4rem;
  border-top: 2px solid var(--cma-azzurro);
  border-right: 2px solid var(--cma-azzurro);
  transform: rotate(45deg);
}

.service-nav__link:hover,
.service-nav__link.active {
  color: var(--cma-blu);
}

.service-nav__sub {
  padding: 0 0 .625rem 1.25rem;
}

.service-nav__sublink {
  position: relative;
  display: block;
  padding: .3rem 0 .3rem 1rem;
  color: var(--cma-testo);
  font-size: .9375rem;
  line-height: 1.4;
  text-decoration: none;
}

/* Quadratino a sinistra delle sottovoci */
.service-nav__sublink::before {
  content: "";
  position: absolute;
  top: .8rem;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--cma-azzurro);
}

.service-nav__sublink:hover {
  color: var(--cma-blu);
  text-decoration: underline;
}

.service-nav__sublink[aria-current="page"] {
  color: var(--cma-blu);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Invito a contattarci
   -------------------------------------------------------------------------- */
.cta {
  padding: 3rem 0;
  background: var(--cma-grigio-chiaro);
  border-top: 1px solid var(--cma-bordo);
  text-align: center;
}

.cta__title {
  margin-bottom: .75rem;
  color: var(--cma-blu);
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-weight: 300;
}

.cta__text {
  margin-bottom: 1.5rem;
}

.cta__text a {
  font-weight: 500;
  white-space: nowrap;
}

/* Carousel usato come testata delle pagine interne: stessa altezza dell'immagine singola */
.hero--banner {
  --hero-height: clamp(140px, 24vw, 420px);
}

/* Elementi del testo delle pagine servizio */
.content hr {
  margin: 2rem 0;
  border-color: var(--cma-bordo);
  opacity: 1;
}

.content ul {
  padding-left: 1.25rem;
}

.content li + li {
  margin-top: .25rem;
}

.content__embed {
  margin: 1.5rem 0 2rem;
  border-radius: 8px;
}

/* Opuscoli PDF */
.brochures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 1rem 0 2rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .brochures {
    grid-template-columns: repeat(4, 1fr);
  }
}

.brochures a {
  display: block;
  font-size: .9375rem;
  line-height: 1.3;
  text-decoration: none;
}

.brochures img {
  display: block;
  margin-bottom: .5rem;
  border: 1px solid var(--cma-bordo);
  transition: box-shadow .2s;
}

.brochures a:hover img {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15);
}

.brochures a:hover span {
  text-decoration: underline;
}

.brochures small {
  display: block;
  color: var(--cma-testo-secondario);
}

/* --------------------------------------------------------------------------
   Staff
   -------------------------------------------------------------------------- */
.staff__title {
  margin-bottom: 2rem;
  color: var(--cma-blu);
  font-size: 1.375rem;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}

.staff-card {
  position: relative;
  height: 100%;
  text-align: center;
}

.staff-card__img {
  width: 100%;
  max-width: 260px;
  padding: 4px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  transition: border-color .2s;
}

.staff-card:has(a):hover .staff-card__img {
  border-color: var(--cma-azzurro);
}

.staff-card__name {
  margin: 1rem 0 .25rem;
  color: var(--cma-testo);
  font-size: 1.125rem;
  font-weight: 400;
}

.staff-card__name a {
  color: var(--cma-blu);
  text-decoration: none;
}

.staff-card:hover .staff-card__name a {
  text-decoration: underline;
}

.staff-card__role {
  margin: 0;
  color: var(--cma-testo-secondario);
  font-size: .9375rem;
}

/* Scheda dottoressa: foto con nome e ruolo */
.doctor-photo {
  max-width: 378px;
  margin: 0 auto;
}

.doctor-photo img {
  width: 100%;
  border-radius: 8px;
}

.doctor-photo figcaption {
  padding: .875rem 0;
  border-bottom: 2px solid var(--cma-azzurro);
  text-align: center;
}

.doctor-photo__name {
  display: block;
  color: var(--cma-blu);
  font-size: 1.25rem;
  font-weight: 400;
}

.doctor-photo__role {
  display: block;
  color: var(--cma-testo-secondario);
  font-size: .9375rem;
}

.content > h2:first-child {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Gallerie e visualizzatore
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
  margin: 1.25rem 0 2rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gallery a {
  display: block;
  overflow: hidden;
  border-radius: 8px;
}

.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .3s;
}

.gallery a:hover img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .gallery img {
    transition: none;
  }
}

.lightbox .modal-content {
  position: relative;
  background: #111;
  border: 0;
}

.lightbox__figure {
  margin: 0;
}

.lightbox__img {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
}

.lightbox__caption {
  padding: .75rem 1rem;
  color: #fff;
  font-size: .9375rem;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  padding: .75rem;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 50%;
  opacity: 1;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -2.5rem;
  padding: 0;
  background: rgba(0, 0, 0, .5) no-repeat center / 50%;
  border: 0;
  border-radius: 50%;
}

.lightbox__nav--prev {
  left: .75rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.lightbox__nav--next {
  right: .75rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.lightbox :focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* Immagine piccola affiancata al testo */
@media (min-width: 768px) {
  .content__img--float {
    float: right;
    max-width: 45%;
    margin: .25rem 0 1rem 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   Contatti
   -------------------------------------------------------------------------- */
.contact-block__title {
  margin-bottom: 1rem;
  color: var(--cma-blu);
  font-size: 1.25rem;
  font-weight: 500;
}

.contact-list {
  margin: 0;
}

.contact-list p {
  margin-bottom: .625rem;
}

.contact-list__icon-link {
  display: inline-flex;
  gap: .375rem;
  align-items: center;
}

.opening-hours dt {
  font-weight: 400;
}

.opening-hours dd {
  margin-bottom: .75rem;
  color: var(--cma-blu);
  font-size: 1.125rem;
  font-weight: 500;
}

/* Mappa: immagine statica con pannello centrale, iframe dopo il consenso */
.map__embed > img {
  display: block;
  width: 100%;
  height: clamp(280px, 40vw, 450px);
}

.map__embed iframe {
  display: block;
  width: 100%;
  height: clamp(320px, 45vw, 450px);
}

.map__embed.consent-embed .consent-embed__overlay {
  padding: 1.25rem 1rem;
  background: #fff;
}

@media (min-width: 768px) {
  .map__embed.consent-embed .consent-embed__overlay {
    position: absolute;
    top: 50%;
    left: 2rem;
    width: min(24rem, 40%);
    border-radius: 8px;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2);
    transform: translateY(-50%);
  }
}

.map__embed .consent-embed__overlay::before {
  content: none;
}

.map__credits {
  margin: 0;
  padding: .375rem 1rem;
  color: var(--cma-testo-secondario);
  font-size: .75rem;
  text-align: right;
}

/* Le griglie (gallerie, opuscoli) sono elenchi ma senza il rientro dei puntati */
.content .gallery,
.content .brochures {
  padding-left: 0;
}