/* ==========================================================================
   CardioSpecialist — stile condiviso
   Basato su Fomantic-UI. Variabili colore campionate dal mockup.
   ========================================================================== */

:root{
  --navy:        #1a3b6e;
  --navy-dark:   #142e56;
  --navy-darker: #0f2340;
  --blue-accent: #2d7fd6;
  --red:         #f30001;
  --red-dark:    #cc0000;
  --dark:        #222222;
  --gray-bg:     #f5f7fa;
  --text:        #333333;
  --border:      #dbe2ea;
}

body{
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  color: var(--text);
}

h1,h2,h3,h4,h5,
.ui.header{
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
}

a{ color: var(--blue-accent); }
a:hover{ color: var(--navy); }

/* ---------- Utility layout ---------- */
.section{ padding: 4.5em 0; }
.section.tight{ padding: 3em 0; }
.section.gray{ background: var(--gray-bg); }
.section.navy{ background: var(--navy); color:#fff; }
.section.navy h1, .section.navy h2, .section.navy h3, .section.navy p{ color:#fff; }
.container-narrow{ max-width: 1180px; margin: 0 auto; padding: 0 1.5em; }

/* ---------- Pagine generiche (page.php) e contenuto editor ---------- */
.page-content h2{ font-family:'Merriweather',Georgia,serif; color:var(--navy); margin:1.6em 0 .5em; font-size:1.3em; }
.page-content h3{ font-family:'Merriweather',Georgia,serif; color:var(--navy); margin:1.4em 0 .4em; font-size:1.1em; }
.page-content p{ margin-bottom:1em; }
.page-content ul, .page-content ol{ padding-left:1.5em; margin-bottom:1em; }
.page-content li{ margin-bottom:.4em; }
.page-content a{ color:var(--blue-accent); }
.page-content a:hover{ color:var(--red); }
.page-content img{ max-width:100%; height:auto; border-radius:.4em; }
.page-content figure{ margin:1.5em 0; }
.page-content figcaption{ font-size:.82em; color:#8a93a0; text-align:center; margin-top:.4em; }
.page-content table{ width:100%; border-collapse:collapse; margin-bottom:1.5em; }
.page-content th{ background:var(--navy); color:#fff; padding:.6em .9em; text-align:left; font-size:.88em; }
.page-content td{ padding:.55em .9em; border-bottom:1px solid var(--border); font-size:.92em; }
.page-content tr:nth-child(even) td{ background:var(--gray-bg); }

/* ---------- Blocco citazione wp-block-quote (già definito sopra, qui per coerenza pagine) ---------- */
.wp-block-quote{
  box-sizing: border-box;
  overflow-wrap: break-word;
  border-left: 2px solid var(--navy);
  margin-left: 0px;
  padding-left: 20px;
  font-style: oblique;
}

.eyebrow{
  display:flex; align-items:center; gap:.7em;
  color: var(--navy); font-weight:700; letter-spacing:.06em;
  margin-bottom:.5em; line-height:1;
  text-transform:uppercase; font-size:.75em; font-variant:small-caps;
}
.eyebrow::before{
  content:""; display:inline-block; flex-shrink:0; width:2.2em; height:2px; background: var(--navy);
}
/* Eyebrow centrato: linea anche a destra */
.eyebrow-c{
  justify-content:center;
}
.eyebrow-c::after{
  content:""; display:inline-block; flex-shrink:0; width:2.2em; height:2px; background: var(--navy);
}
.section.navy .eyebrow, .hero .eyebrow{ color:#fff; }
.section.navy .eyebrow::before, .hero .eyebrow::before,
.section.navy .eyebrow-c::after, .hero .eyebrow-c::after{ background:#fff; }

.section-title{
  color: var(--blue-accent);
  font-weight:700;
  margin-top:0;
}
.section-lead{ color:#5b6472; font-size:1.05em; max-width: 720px; }
.section.navy .section-lead{ color:#dfe6f0; }

/* ---------- Header / nav ---------- */
.site-header{
  padding: .9em 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.site-header .header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.5em;
  max-width:1320px; margin:0 auto; padding:0 1.5em;
}
.site-header .logo{ display:flex; align-items:center; gap:.6em; flex-shrink:0; }
.site-header .logo img{ height:56px; width:auto; max-width:220px; display:block; }
.site-header .logo-text{ line-height:1.1; }
.site-header .logo-text .brand{
  font-family: 'Merriweather', Georgia, serif; font-weight:900; color: var(--red);
  font-size:1.35em; letter-spacing:.02em;
}
.site-header .logo-text .sub{ font-size:.72em; color: var(--navy); font-weight:700; }

.main-nav{ display:flex; align-items:center; gap:1.2em; flex-wrap:nowrap; }
.main-nav a{
  color:#333; font-weight:600; font-size:.95em; text-transform:uppercase;
  letter-spacing:.01em; padding:.4em 0; border-bottom:2px solid transparent;
  white-space:nowrap;
}
.main-nav a:hover, .main-nav a.active{ color: var(--navy); border-bottom-color: var(--red); }
.main-nav .ui.dropdown .menu{ text-transform:none; }

.btn-cta, .ui.button.btn-cta{
  background: var(--red) !important; color:#fff !important; font-weight:700 !important;
  border-radius:.35em !important;
}
.btn-cta:hover{ background: var(--red-dark) !important; }

.btn-navy, .ui.button.btn-navy{
  background: var(--navy) !important; color:#fff !important; font-weight:700 !important;
  border-radius:.35em !important;
}
.btn-navy:hover{ background: var(--navy-dark) !important; }

.btn-outline, .ui.button.btn-outline{
  background:#fff !important; color: var(--navy) !important; font-weight:700 !important;
  border:1px solid var(--border) !important; border-radius:.35em !important;
}

button.nav-toggle.ui.button{
  display:none !important;
  background:transparent !important; box-shadow:none !important;
  color: var(--navy) !important; padding:.5em !important;
}

/* Pannello menu mobile: a tendina, largo quanto il viewport, sotto l'header */
.mobile-menu-panel{
  display:flex; flex-direction:column;
  max-height:0; overflow:hidden;
  background:#fff; border-top:1px solid var(--border);
  transition: max-height .35s ease;
}
.mobile-menu-panel.open{ max-height:600px; }
.mobile-menu-panel ul{ list-style:none; margin:0; padding:0; }
.mobile-menu-panel a{
  display:block; padding:.9em 1.5em; font-weight:700; color: var(--navy);
  border-bottom:1px solid var(--border); text-transform:uppercase; font-size:.9em;
}
.mobile-menu-panel .sub-menu a{
  padding-left:2.5em; text-transform:none; font-weight:600; color:#5b6472; font-size:.88em;
}
.mobile-menu-panel a:hover{ background: var(--gray-bg); }

@media only screen and (max-width: 1200px){
  .main-nav{ display:none; }
  button.nav-toggle.ui.button{ display:inline-flex !important; }
}
@media only screen and (min-width: 1201px){
  .mobile-menu-panel{ display:none !important; }
}

/* ---------- CTA nell'header: icona telefono nascosta su desktop,
   dove basta il testo; compare al suo posto sotto i 480px (telefoni
   con schermo stretto, es. Samsung A54), per evitare che logo + CTA
   testuale + hamburger non entrino tutti nella larghezza disponibile
   e il pulsante del menu finisca fuori dallo schermo. */
.header-cta-icon{ display:none; }
@media only screen and (max-width: 480px){
  .header-inner{ gap:.6em; padding:0 1em; }
  .site-header .logo-text .brand{ font-size:1.1em; }
  .site-header .logo-text .sub{ font-size:.65em; }
  .header-cta.ui.button{
    width:2.6em; height:2.6em; padding:0 !important;
    display:inline-flex !important; align-items:center; justify-content:center;
    border-radius:50% !important;
  }
  .header-cta-icon{ display:inline-block; margin:0 !important; }
  .header-cta-testo{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  background: var(--navy); color:#fff; padding: 4em 0;
  position:relative; overflow:visible; /* visible: permette al bollino di fuoriuscire dall'immagine */
}

/* Wrapper relativo che contiene immagine principale + bollino */
.hero-img-wrap{
  position:relative;
  display:inline-block; /* si restringe alle dimensioni dell'immagine */
  line-height:0;        /* evita spazio extra sotto l'img */
}

/* Bollino sovrapposto: 30px dal bordo inferiore, metà fuori dal bordo destro */
.hero-badge{
  position:absolute;
  bottom:30px;
  right:0;
  transform:translateX(30%);   /* 30% fuoriuscente dal bordo destro */
  width:25%;
  min-width:52px;
  max-width:150px;
  height:auto;
  border-radius:.4em;
  box-shadow:0 4px 16px rgba(0,0,0,.28);
  pointer-events:none;
}

/* Su schermi piccoli il bollino resta dentro l'immagine
   (nessuna fuoriuscita) con stessa distanza dai due bordi */
@media only screen and (max-width: 767px){
  .hero-badge{
    right:30px;          /* dentro l'immagine, 30px dal bordo destro */
    transform:none;
    max-width:120px;
  }
}
.hero h1{ color:#fff; font-size:2.3em; line-height:1.25; margin-bottom:.4em; }
.hero p{ color:#dfe6f0; font-size:1.08em; max-width:540px; }
.hero .tag{
  display:inline-flex; align-items:center; gap:.5em; color:#ff6a6a; font-weight:700;
  font-size:.85em; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.8em;
}
.hero .tag::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--red); display:inline-block; }

/* Titolino rosso nell'hero — gestibile via metabox in ogni pagina */
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:.5em; color:#ff6a6a; font-weight:700;
  font-size:.85em; text-transform:uppercase; letter-spacing:.03em; margin-bottom:.8em;
}
.hero-eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background: var(--red); display:inline-block; }
.hero img.hero-img{
  border-radius:.6em; width:100%; height:100%;
  object-fit:cover; min-height:220px; max-height:460px;
}
/* Le colonne dell'hero si equivalgono in altezza, così l'immagine assume
   naturalmente l'altezza del testo affiancato invece di essere sproporzionata */
.hero .ui.stackable.grid{ align-items:stretch; }

/* ---------- Striscia "Chi sono" nella pagina Pacchetti ---------- */
.pacchetti-chisono-strip{
  flex-direction:column; align-items:stretch; gap:1.5em; text-align:left;
}
.pacchetti-chisono-top{
  display:flex; gap:1.2em; align-items:center;
}
.pacchetti-chisono-foto{
  border-radius:50%; width:80px; height:80px; object-fit:cover; flex-shrink:0;
}
@media only screen and (max-width: 767px){
  .pacchetti-chisono-stats{ display:none; }
}

/* ---------- Stat strip ---------- */
.stat-card{
  background:#fff; border-radius:.7em; box-shadow:0 10px 30px rgba(15,35,64,.18);
  padding: 2em 1.5em; display:flex; flex-wrap:wrap; justify-content:space-around; gap:1.5em;
  text-align:center;
}
.stat-card .num{ font-family:'Merriweather',serif; font-weight:900; color: var(--navy); font-size:2.1em; line-height:1; }
.stat-card .label{ color:#5b6472; font-weight:600; font-size:.92em; margin-top:.3em; }

/* ---------- Cards generiche ---------- */
.card-plain{
  background:#fff; border:1px solid var(--border); border-radius:.6em; padding:1.6em;
  height:100%;
}

/* ---------- Paginazione articoli (Ricerca scientifica) ---------- */
.ui.pagination.menu{ background:transparent; box-shadow:none; border:none; display:inline-flex; gap:.5em; }
.ui.pagination.menu .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4em; height:2.4em; border-radius:50%; margin:0;
  background: var(--blue-accent); color:#fff; font-weight:700;
  text-decoration:none; transition: background-color .2s ease; border:none;
}
.ui.pagination.menu .page-numbers:hover{ background: var(--red); color:#fff; }
.ui.pagination.menu .page-numbers.current{ background: var(--navy); color:#fff; }
.ui.pagination.menu .page-numbers.prev,
.ui.pagination.menu .page-numbers.next{
  background:#fff; color:#000; border:1px solid var(--blue-accent);
}
.ui.pagination.menu .page-numbers.prev:hover,
.ui.pagination.menu .page-numbers.next:hover{ background:#fff; color:#000; border-color: var(--red); }
/* ---------- Sidebar articolo (widget WordPress) ---------- */
/* Un unico box grigio avvolge tutta la sidebar (vedi single.php);
   ogni widget al suo interno ha solo spaziatura, non un box a parte. */
.sidebar-widget-box{
  background:var(--gray-bg); border-radius:.5em; padding:1.6em;
}
.sidebar-widget-inner{ margin-bottom:1.8em; }
.sidebar-widget-inner:last-child{ margin-bottom:0; }
.sidebar-widget-title{ color:var(--navy); margin-top:0; font-size:1.15em; }
.check-list{ list-style:none; margin:0; padding:0; column-count:1; columns:1; }
.check-list li{
  display:flex; flex-wrap:nowrap; gap:.6em; align-items:flex-start;
  margin-bottom:.9em; font-weight:600; width:100%; break-inside:avoid;
}
.check-list li i.icon{ flex:0 0 auto; color: var(--blue-accent); margin-top:.15em; }
.check-list li span{ flex:1 1 auto; min-width:0; }

/* ---------- Pricing (pacchetti) ---------- */
/* ---------- Grid dinamico Pacchetti (si adatta al numero di card) ----------
   Su desktop: 1→1 colonna, 2→2, 3→3, 4→4 in fila, 5+→3 col centrate.
   Su mobile/tablet: Fomantic gestisce lo stack verticale via media query.   */
.pacchetti-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.5em;
  text-align:left;
}
.pacchetto-col{ flex:0 0 calc(33.333% - 1em); min-width:240px; }

.pacchetti-grid[data-count="1"] .pacchetto-col{ flex:0 0 100%; max-width:480px; }
.pacchetti-grid[data-count="2"] .pacchetto-col{ flex:0 0 calc(50% - 0.75em); }
.pacchetti-grid[data-count="3"] .pacchetto-col{ flex:0 0 calc(33.333% - 1em); }
.pacchetti-grid[data-count="4"] .pacchetto-col{ flex:0 0 calc(25% - 1.125em); }
/* 5+: default 3 colonne con justify-content:center → ultima riga centrata */

@media only screen and (max-width:991px){
  .pacchetto-col{ flex:0 0 calc(50% - 0.75em); }
}
@media only screen and (max-width:767px){
  .pacchetto-col{ flex:0 0 100%; }
}

.pricing-card{
  border:1px solid var(--border); border-radius:.6em; background:#fff;
  padding:1.8em; position:relative; height:100%; display:flex; flex-direction:column;
}
.pricing-card.featured{ border-color: var(--red); box-shadow:0 15px 35px rgba(243,0,1,.12); }
.pricing-card .badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: var(--navy); color:#fff; font-size:.75em; font-weight:700;
  padding:.35em 1em; border-radius:2em; white-space:nowrap;
}
.pricing-card.featured .badge{ background: var(--red); }
.pricing-card .plan-num{ color: var(--red); font-weight:700; font-size:.85em; }
.pricing-card h3{ color: var(--navy); margin-top:.1em; }
.pricing-card ul{ list-style:none; margin:1em 0; padding:0; flex:1; }
.pricing-card ul li{ padding:.35em 0; border-bottom:1px dashed var(--border); font-size:.95em; }
.pricing-card .ideal{ font-size:.85em; color:#8a93a0; margin-bottom:1em; }

/* ---------- Testimonial ---------- */
.testimonial{
  background:#fff; border-left:4px solid var(--blue-accent);
  border-radius:.4em; padding:1.4em 1.6em; box-shadow:0 4px 16px rgba(15,35,64,.06);
  height:100%;
}
.testimonial .quote{ font-style:italic; color:#3c4450; }
.testimonial .author{ color: var(--red); font-weight:700; margin-top:.8em; }
.testimonial .date{ color:#9aa2ad; font-size:.85em; }

/* ---------- Articolo card ---------- */
/* ---------- News-card (variante B, bordo rosso in basso) ---------- */
.news-card{
  background:#fff; border-radius:.5em; overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.07);
  padding:1.1em 1.1em .85em;
  display:flex; flex-direction:column; gap:.5em;
  border-bottom:3px solid var(--red);
  height:100%;
}
.news-tag{
  font-size:.7em; font-weight:700; text-transform:uppercase;
  color:var(--red); letter-spacing:.05em;
}
.news-card h4{
  font-size:.92em; color:var(--navy); font-family:'Merriweather',Georgia,serif;
  line-height:1.35; margin:0;
}
.news-excerpt{ font-size:.82em; color:#5b6472; line-height:1.55; margin:0; }
.news-card-footer{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:auto; padding-top:.65em; border-top:1px solid var(--border);
}
.news-date{ font-size:.72em; color:#8a93a0; }
.news-read{ font-size:.78em; font-weight:600; color:var(--blue-accent); text-decoration:none; }
.news-read:hover{ color:var(--red); }

.article-card{
  background:#fff; border:1px solid var(--border); border-radius:.4em; overflow:hidden;
  border-bottom:4px solid var(--blue-accent); height:100%; display:flex; flex-direction:column;
}
.article-card img{ height:180px; object-fit:cover; width:100%; }
.article-card .body{ padding:1.2em; flex:1; display:flex; flex-direction:column; }
.article-card h4{ color: var(--navy); }
.article-card .read-more{ margin-top:auto; font-weight:700; color: var(--navy); }

/* ---------- Contatti box ---------- */
.location-card{ background:#fff; border-radius:.5em; overflow:hidden; color: var(--text); }
.location-card .loc-head{ padding:.8em 1.2em; font-weight:700; color:#fff; }
.location-card .loc-head.napoli{ background: var(--red); }
.location-card .loc-head.melizzano{ background: var(--blue-accent); }
.location-card .loc-body{ padding:1.2em; color: var(--text); }
.location-card .loc-body p{ display:flex; align-items:center; gap:.6em; margin-bottom:.6em; color: var(--text); }
.location-card .loc-body i.icon{ color: var(--blue-accent); }

/* ---------- CTA banner ---------- */
.cta-banner{
  background: var(--navy); color:#fff; padding: 3.2em 0; position:relative; overflow:hidden;
}
.cta-banner .container-narrow{ position:relative; z-index:1; }
.cta-banner .container-narrow::after{
  content:""; position:absolute; top:50%; right:-20px; transform:translateY(-50%);
  width:340px; height:340px; background-image:url('../img/stetoscopio_cuore.png');
  background-repeat:no-repeat; background-size:contain; background-position:center;
  opacity:.9; pointer-events:none; z-index:-1;
}
.cta-banner h2{ color:#fff; }
.cta-banner p{ color:#dfe6f0; }

/* ---------- Citazioni con virgolette decorative rosse ---------- */
.quote-box{
  background: var(--gray-bg); border-radius:.5em; padding:1.6em 1.6em 1.6em 3em;
  position:relative; text-align:left;
}
.quote-box::before{
  content:"\201C"; position:absolute; left:.25em; top:-.05em;
  font-size:3.2em; font-family:'Merriweather', Georgia, serif; font-weight:900;
  color: var(--red); line-height:1;
}
.quote-box p{ font-size:1.1em; color:#3c4450; margin:0; }

@media only screen and (max-width: 767px){
  .cta-banner .container-narrow::after{ width:180px; height:180px; right:-10px; opacity:.5; }
}

/* ---------- Footer ---------- */
.site-footer{ background: var(--dark); color:#ccc; padding: 3.2em 0 1.6em; }
.site-footer h4{ color: var(--blue-accent); font-size:1em; margin-bottom:.8em; }
.site-footer .doctor-name{ color: var(--red); font-weight:700; font-size:1.15em; font-family:'Merriweather',serif; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer ul li{ margin-bottom:.5em; }
.site-footer ul li a{ color:#e6e6e6; font-weight:600; }
.site-footer ul li a:hover{ color: var(--red); }
.site-footer .contact-line{ display:flex; align-items:center; gap:.6em; margin-bottom:.6em; }
.site-footer .contact-line i.icon{ color: var(--red); }
.socials i.icon{
  border:1px solid var(--red); border-radius:50%;
  width:1.9em; height:1.9em; display:inline-flex; align-items:center; justify-content:center;
  margin-right:.5em;
}
.site-footer .socials i.icon{ color: var(--red); }
.site-footer .bottom-bar{
  border-top:1px solid #3a3a3a; margin-top:2em; padding-top:1.2em; font-size:.85em; color:#8a8a8a;
}

/* ---------- Breadcrumb-ish pill nav (attività clinica) ---------- */
.pill-tabs{ display:flex; gap:.8em; flex-wrap:wrap; }
.pill-tabs a{
  border:1px solid var(--border); border-radius:2em; padding:.5em 1.3em; font-weight:700;
  color: var(--navy);
}
.pill-tabs a.active{ background: var(--navy); color:#fff; border-color: var(--navy); }

/* ---------- Effetti interattivi JS ---------- */
.site-header{ transition: box-shadow .3s ease, padding .3s ease; }
.site-header.scrolled{ padding: .5em 0; box-shadow: 0 4px 18px rgba(15,35,64,.12); }

.reveal{ opacity:0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; transition-delay: var(--d, 0ms); }

.stat-pop{ opacity:0; transform: scale(.85); transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1); }
.stat-pop.visible{ opacity:1; transform:scale(1); }

.ui.button{ position:relative; overflow:hidden; text-transform:uppercase; letter-spacing:.02em; }
.ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background: rgba(255,255,255,.55); pointer-events:none;
  animation: ripple-anim .6s ease-out;
}
@keyframes ripple-anim{
  to{ transform:scale(2.5); opacity:0; }
}

.pricing-card, .article-card, .testimonial{ transition: transform .3s ease, box-shadow .3s ease; }
.pricing-card:hover, .article-card:hover{ transform: translateY(-6px); box-shadow: 0 16px 34px rgba(15,35,64,.14); }
.testimonial:hover{ transform: translateY(-4px); box-shadow: 0 10px 24px rgba(15,35,64,.12); }

/* ---------- Carosello: fallback CSS indipendente da JS ---------- */
/* Se lo script non gira per qualche motivo (o prima che parta), gli elementi
   restano comunque leggibili invece di comprimersi su un'unica riga. */
.carousel-track{ flex-wrap: nowrap; }
@media only screen and (max-width: 767px){
  .carousel-track > div{ flex: 0 0 100% !important; max-width:100%; }
}
@media only screen and (min-width: 768px) and (max-width: 991px){
  .carousel-track > div{ flex: 0 0 50% !important; max-width:50%; }
}
@media only screen and (min-width: 992px){
  .carousel-track > div{ flex: 0 0 33.333% !important; max-width:33.333%; }
}

/* ---------- Paginazione nativa di WordPress (home.php) ---------- */
.pagination.menu,
.navigation.pagination{ display:inline-flex; gap:.4em; list-style:none; margin:0; padding:0; }
.page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:2.4em; height:2.4em; padding:0 .5em; border-radius:50%;
  border:1px solid var(--border); color:var(--navy); font-weight:700;
  text-decoration:none;
}
.page-numbers.current{ background:var(--navy); color:#fff; border-color:var(--navy); }
.page-numbers:hover:not(.current){ background:var(--gray-bg); }
.page-numbers.dots{ border:none; }

/* ---------- Responsive tweaks ---------- */
@media only screen and (max-width: 767px){
  .hero{ padding: 2.6em 0; text-align:left; }
  .hero h1{ font-size:1.7em; }
  .section{ padding: 3em 0; }
  .stat-card{ justify-content:center; }
  .hero img.hero-img{ min-height:180px; max-height:320px; }
}

/* ==========================================================

/* ==========================================================
   Widget recensioni Google — RichPlugins
   Classi estratte dall'HTML reale del plugin:
   .wp-gr/.rpi/.wpac = wrapper, .grw-review-inner = card,
   .wp-google-name / .wp-google-time / .wp-google-text = testi
   ========================================================== */

/* Font base del widget */
.wp-gr, .rpi.wpac{
  font-family:'Lato','Helvetica Neue',Arial,sans-serif;
}

/* ---- Singola card recensione ----
   .grw-backgnd è il gray default del plugin, .grw-round dà il border-radius */
.grw-review-inner.grw-backgnd{
  background:#fff !important;
  box-shadow:0 2px 14px rgba(0,0,0,.09) !important;
  border:none !important;
  padding:1.4em 1.4em 1em !important;
}

/* ---- Avatar (foto profilo) ---- */
.grw-img-wrap .grw-img{
  border-radius:50% !important;
  object-fit:cover !important;
}

/* ---- Nome recensore ---- */
.wp-google-name{
  color:var(--navy) !important;
  font-family:'Merriweather',Georgia,serif !important;
  font-weight:700 !important;
  font-size:.9em !important;
  text-decoration:none !important;
  display:block !important;
}
.wp-google-name:hover{ color:var(--red) !important; }

/* ---- Data ("5 anni fa") ---- */
.wp-google-time{
  color:#8a93a0 !important;
  font-size:.76em !important;
  margin-top:.15em !important;
}

/* ---- Stelle: il plugin usa --rating come CSS custom property.
   Non tocco i colori (arancione = standard Google),
   solo un po' di spazio ---- */
.rpi-stars{
  margin:.5em 0 !important;
  display:block !important;
}

/* ---- Testo recensione ----
   .grw-scroll causa la scrollbar verticale: la rimuovo
   consentendo al testo di scorrere liberamente in altezza */
.wp-google-feedback.grw-scroll{
  overflow:visible !important;
  max-height:none !important;
  /* nasconde eventuale scrollbar residua su browser webkit */
}
.wp-google-feedback.grw-scroll::-webkit-scrollbar{ display:none !important; }
.wp-google-feedback.grw-scroll{ scrollbar-width:none !important; }

.wp-google-text{
  color:var(--text) !important;
  font-size:.87em !important;
  line-height:1.68 !important;
}

/* ---- Icona Google G: rimane invariata (attribuzione obbligatoria) ---- */
.grw-review-inner svg[role="none"]{
  margin-top:.8em !important;
  opacity:.7;
}

/* ---- Pannello overview (box con nome studio, rating, link)
   Se presente, lo stilizzo in modo neutro ---- */
.grw-place-wrapper,
.grw-place{
  background:transparent !important;
  border:1px solid var(--border) !important;
  border-radius:.5em !important;
  box-shadow:0 2px 8px rgba(0,0,0,.06) !important;
  padding:1.2em !important;
}
.grw-place-name,
[class*="place-name"]{
  color:var(--navy) !important;
  font-family:'Merriweather',Georgia,serif !important;
  font-weight:700 !important;
  font-size:.9em !important;
}
/* Nascondi il pulsante "lascia una recensione" */
.wp-google-feedback a[href*="writereview"],
.wp-google-feedback a[href*="write_review"],
[class*="grw-"] a[href*="writereview"],
[class*="leave-review"],
[class*="write-review"],
.grw-place [class*="badge"]{
  display:none !important;
}

/* ---- Frecce navigazione (quando presenti) ---- */
.rpi-btn-prev, .rpi-btn-next,
[class*="grw-btn-prev"], [class*="grw-btn-next"]{
  background:var(--navy) !important;
  color:#fff !important;
  border:none !important;
  border-radius:50% !important;
  opacity:1 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.18) !important;
}
.rpi-btn-prev:hover, .rpi-btn-next:hover,
[class*="grw-btn-prev"]:hover, [class*="grw-btn-next"]:hover{
  background:var(--red) !important;
}

/* ---- Dot di navigazione (quando presenti) ---- */
.rpi-dots .rpi-dot,
[class*="grw-dot"]{
  background:var(--border) !important;
  border-radius:50% !important;
  border:none !important;
}
.rpi-dots .rpi-dot.rpi-dot-active,
[class*="grw-dot"][class*="active"]{
  background:var(--red) !important;
}

/* ==========================================================
   Recensioni Google — card native (rendering nostro,
   dati sincronizzati da RichPlugins via database)
   ========================================================== */
.review-card{
  background:#fff; border-radius:.5em;
  box-shadow:0 2px 12px rgba(0,0,0,.08);
  padding:1.4em 1.4em 1.2em;
  height:100%;
  display:flex; flex-direction:column; gap:.7em;
}
.review-card-head{
  display:flex; align-items:center; gap:.8em;
}
.review-avatar{
  width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.review-avatar-letter{
  background:var(--blue-accent); color:#fff;
  font-weight:700; font-size:1.2em; font-family:'Merriweather',serif;
}
.review-author{
  color:var(--navy); font-family:'Merriweather',Georgia,serif;
  font-weight:700; font-size:.92em; line-height:1.2;
}
.review-date{ color:#8a93a0; font-size:.76em; margin-top:.15em; }
.review-google{ margin-left:auto; width:18px; height:18px; flex-shrink:0; align-self:flex-start; }
.review-stars i.icon{ color:#fbbc05; margin-right:0; }
.review-text{
  color:var(--text); font-size:.87em; line-height:1.65; margin:0;
}

/* ---------- Box "Nuovo studio" — stile card comune ----------
   Stessa identica "pelle" per entrambe le versioni: card bianca,
   bordo sottile, angoli arrotondati, leggero sollevamento all'hover
   quando è un link. La versione mini (Home/Cardiologia) e quella
   completa (Attività clinica) condividono questa base e differiscono
   solo per quantità di contenuto e dimensioni. */
.nuovo-studio-mini, .nuovo-studio-box{
  display:flex; align-items:stretch; gap:0; background:#fff;
  border:1px solid var(--border); border-radius:.6em; overflow:hidden;
}
a.nuovo-studio-mini{
  text-decoration:none; transition: box-shadow .2s ease, transform .2s ease;
}
a.nuovo-studio-mini:hover{ box-shadow:0 6px 20px rgba(20,46,86,.12); transform:translateY(-2px); }

/* ---------- Versione compatta (richiamo in Home/Cardiologia) ----------
   Su mobile/tablet: 1 sola immagine + testo, card bassa.
   Da schermi grandi in su (≥901px): si vedono anche la 2ª (e 3ª, se
   presente) immagine affiancate alla prima, sempre alla stessa altezza. */
.nuovo-studio-mini{
  max-width:640px; margin:0 auto;
}
.nuovo-studio-mini .nuovo-studio-mini-foto{
  flex:0 0 130px; height:130px; object-fit:cover; display:block;
}
.nuovo-studio-mini .nuovo-studio-mini-foto.extra{ display:none; }
.nuovo-studio-mini .nuovo-studio-mini-testo{
  flex:1; padding:1.1em 1.4em; display:flex; flex-direction:column; justify-content:center; text-align:left;
}
.nuovo-studio-mini .eyebrow{ margin-bottom:.3em; }
.nuovo-studio-mini h4{
  color:var(--navy); font-family:'Merriweather',Georgia,serif;
  font-size:1.05em; margin:0; line-height:1.3;
}
.nuovo-studio-mini .nuovo-studio-mini-cta{
  color:var(--blue-accent); font-size:.82em; font-weight:700; margin-top:.4em;
}
@media only screen and (min-width: 901px){
  .nuovo-studio-mini{ max-width:760px; }
  .nuovo-studio-mini .nuovo-studio-mini-foto.extra{ display:block; }
}
@media only screen and (max-width: 480px){
  .nuovo-studio-mini{ flex-direction:column; }
  .nuovo-studio-mini .nuovo-studio-mini-foto{ flex-basis:auto; width:100%; height:140px; }
}

/* ---------- Versione completa (Attività clinica) ----------
   Sempre a due colonne, larghezza piena del contenitore (stessa degli
   altri elementi della pagina, mai più stretta): immagini a sinistra,
   testo a destra. Cambiano solo le proporzioni tra le due colonne e
   come sono disposte le immagini al loro interno:
   - Senza testo: la colonna immagini è più larga (le foto restano
     affiancate, leggibili, nessuna compressione), la colonna di
     destra è più stretta e contiene solo eyebrow + titolo.
   - Con testo: la colonna immagini è più stretta (le foto si
     incolonnano, una sopra l'altra), la colonna di destra si allarga
     (ma non troppo) per ospitare eyebrow, titolo, testo ed eventuale
     bottone. */
.nuovo-studio-box{
  width:100%; margin-top:2em; align-items:stretch;
}
.nuovo-studio-box .nuovo-studio-foto-grid{
  display:flex; gap:2px;
}
.nuovo-studio-box .nuovo-studio-foto-grid img{
  display:block; cursor:zoom-in; width:100%; object-fit:cover;
}
.nuovo-studio-box .nuovo-studio-testo-col{
  display:flex; flex-direction:column; justify-content:center;
}
.nuovo-studio-box .eyebrow{ margin-bottom:.5em; }
.nuovo-studio-box h3{
  color:var(--navy); font-family:'Merriweather',Georgia,serif;
  font-size:1.35em; margin:0 0 .6em; line-height:1.3;
}
.nuovo-studio-box .nuovo-studio-testo{ color:var(--text); margin:0 0 1.2em; }
.nuovo-studio-box .nuovo-studio-testo-col .ui.button{ align-self:flex-start; margin-top:.2em; }

/* Senza testo: colonna immagini larga (60%), foto affiancate. */
.nuovo-studio-box.senza-testo .nuovo-studio-foto-grid{
  flex:0 0 60%;
}
.nuovo-studio-box.senza-testo .nuovo-studio-foto-grid img{
  flex:1 1 0; height:260px;
}
.nuovo-studio-box.senza-testo .nuovo-studio-testo-col{
  flex:1 1 auto; padding:2em 2.2em;
}

/* Con testo: colonna immagini stretta (34%), foto incolonnate. */
.nuovo-studio-box.con-testo .nuovo-studio-foto-grid{
  flex:0 0 34%; flex-direction:column;
}
.nuovo-studio-box.con-testo .nuovo-studio-foto-grid img{
  aspect-ratio:4/3;
}
.nuovo-studio-box.con-testo .nuovo-studio-testo-col{
  flex:1 1 auto; max-width:640px; padding:2em 2.2em;
}

@media only screen and (max-width: 700px){
  .nuovo-studio-box{ flex-direction:column; }
  .nuovo-studio-box .nuovo-studio-foto-grid{ flex:0 0 auto !important; flex-direction:row; }
  .nuovo-studio-box.con-testo .nuovo-studio-foto-grid img{ aspect-ratio:1/1; }
  .nuovo-studio-box.senza-testo .nuovo-studio-foto-grid img{ height:180px; }
  .nuovo-studio-box .nuovo-studio-testo-col{ max-width:none; padding:1.6em; }
}
@media only screen and (max-width: 480px){
  .nuovo-studio-box .nuovo-studio-foto-grid{ flex-direction:column !important; }
}

/* ---------- Lightbox per le immagini del box (versione completa) ----------
   Click su una foto → overlay a schermo intero con l'immagine ingrandita,
   senza tagli (object-fit:contain). Nessuna libreria esterna. */
.nuovo-studio-lightbox{
  position:fixed; inset:0; background:rgba(15,25,45,.9);
  display:none; align-items:center; justify-content:center;
  z-index:9999; padding:2em; cursor:zoom-out;
}
.nuovo-studio-lightbox.aperta{ display:flex; }
.nuovo-studio-lightbox img{
  max-width:100%; max-height:100%; object-fit:contain;
  border-radius:.3em; box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.nuovo-studio-lightbox-chiudi{
  position:absolute; top:1.2em; right:1.5em; color:#fff; font-size:2em;
  line-height:1; cursor:pointer; background:none; border:none;
}

/* ---------- Griglia foto (Home e Contatti): stessa altezza per tutte le immagini ---------- */
.foto-grid-equilibrata img{
  width:100%; height:190px; object-fit:cover; border-radius:.5em; display:block;
}
@media only screen and (max-width: 767px){
  .foto-grid-equilibrata img{ height:150px; }
}


/* =========================================================
   ANIMAZIONI LEGGERE
   Solo opacity/transform (nessun layout shift, GPU-friendly).
   Tutto è disattivato se l'utente ha "riduci animazioni" attivo.
   ========================================================= */

/* Hero: ingresso a cascata dei contenuti all'apertura della pagina */
@keyframes cs-fade-up{
  from{ opacity:0; transform: translateY(16px); }
  to{ opacity:1; transform: none; }
}
@keyframes cs-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}
.hero .ui.grid > .column:first-child > *{ animation: cs-fade-up .7s ease both; }
.hero .ui.grid > .column:first-child > *:nth-child(2){ animation-delay: .08s; }
.hero .ui.grid > .column:first-child > *:nth-child(3){ animation-delay: .16s; }
.hero .ui.grid > .column:first-child > *:nth-child(4){ animation-delay: .24s; }
.hero .ui.grid > .column:first-child > *:nth-child(n+5){ animation-delay: .32s; }
.hero .ui.grid > .column:not(:first-child){ animation: cs-fade-in .9s ease .15s both; }

/* Pulsanti: leggero sollevamento al passaggio e alla pressione */
.ui.button{ transition: transform .18s ease, box-shadow .18s ease, background-color .2s ease; }
.ui.button:hover{ transform: translateY(-2px); box-shadow: 0 6px 14px rgba(15,35,64,.18); }
.ui.button:active{ transform: translateY(0); box-shadow: none; }
button.nav-toggle.ui.button:hover, .header-cta.ui.button:hover{ box-shadow:none; }

/* Foto delle gallerie: leggero sollevamento con ombra al passaggio */
.foto-grid-equilibrata img{ transition: transform .3s ease, box-shadow .3s ease; }
.foto-grid-equilibrata img:hover{ transform: translateY(-4px); box-shadow: 0 12px 24px rgba(15,35,64,.18); }

/* Ancore (#contatti, #quiz...) e scorrimento morbido: l'intestazione non copre il titolo */
[id]{ scroll-margin-top: 90px; }
html{ scroll-behavior: smooth; }

/* Accessibilità: contorno ben visibile per chi naviga da tastiera */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline: 3px solid var(--blue-accent, #3f6aa8);
  outline-offset: 2px;
}

/* Chi preferisce meno movimento: nessuna animazione */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .stat-pop{ opacity:1 !important; transform:none !important; }
  .ui.button:hover, .foto-grid-equilibrata img:hover{ transform:none; }
}

/* Stampa: tutto visibile */
@media print{
  .reveal, .stat-pop{ opacity:1 !important; transform:none !important; }
}