/* ==========================================================================
   MediaClinics Italia — Foglio di stile delle pagine prodotto
   --------------------------------------------------------------------------
   Caricato SOLO dalle pagine interne (margheritatre.html), dopo style.css.
   Nessuno dei selettori qui sotto compare in index.html: la home non puo'
   cambiare aspetto per effetto di questo file.

   Il grosso del layout riusa le classi di style.css (.container,
   .section-tag, .section-title, .kpi-row, .feat-list, .tac-item,
   .ricerca-card, .office-card, .btn-primary ...). Qui c'e' solo cio' che nella
   home non esiste: l'intestazione di pagina, le briciole di pane e un paio di
   griglie.

   Organizzazione:
     01. Intestazione di pagina
     02. Fasce di sezione
     03. Griglie specifiche
     04. Blocchi di testo e riquadri
     05. Media queries
   ========================================================================== */


/* ==========================================================================
   01. Intestazione di pagina
   ========================================================================== */

/* Sostituisce l'hero a tutto schermo della home: qui serve una fascia
   compatta, perche' il contenuto della pagina deve iniziare subito.
   Il padding-top include --nav-h perche' la barra di navigazione e' fissa. */
.page-hero {
  position: relative;
  background: var(--navy);
  padding: calc(var(--nav-h) + 3.5rem) 0 3.5rem;
  overflow: hidden;
}

/* Alone teal in alto a destra: stessa palette dei product-hero della home. */
.page-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 45rem;
  height: 45rem;
  background: radial-gradient(circle, rgba(0,168,150,0.16) 0%, rgba(0,168,150,0) 70%);
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* Briciole di pane: orientano l'utente e danno a Google la gerarchia del sito
   (raddoppiate nei dati strutturati con BreadcrumbList). */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin-bottom: 1.5rem;
}
.breadcrumb li { font-size: 12px; color: rgba(255,255,255,0.4); }
.breadcrumb a   { color: rgba(255,255,255,0.6); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb li + li::before {
  content: '/';
  margin-right: 0.5rem;
  color: rgba(255,255,255,0.22);
}

.page-title {
  font-family: var(--font-disp);
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 600;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 0.5rem;
}

.page-sub {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--teal);
  margin-bottom: 1.25rem;
}

.page-lead {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,0.65);
  max-width: 62ch;
}

.page-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin-top: 1.75rem;
}
.page-badge {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 5px 10px;
  border-radius: 3px;
}


/* ==========================================================================
   02. Fasce di sezione
   --------------------------------------------------------------------------
   Nella home i fondi alternati sono agganciati agli id (#about, #sedi...).
   Qui servono classi, cosi' l'ordine delle sezioni si puo' cambiare senza
   toccare il CSS.
   ========================================================================== */

.band-light { background: var(--light); }
.band-white { background: #fff; }
.band-navy  { background: var(--navy); }
/* Variante piu' chiara: serve a separare due fasce scure consecutive. */
.band-navy2 { background: var(--navy2); }

.band-navy2 .section-tag   { color: var(--teal); }

.band-navy .section-tag   { color: var(--teal); }
.band-navy .section-title { color: #fff; }
.band-navy .section-intro { color: rgba(255,255,255,0.6); }


/* ==========================================================================
   03. Griglie specifiche
   ========================================================================== */

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* Le otto aree funzionali: 4x2 su desktop. auto-fit evita di dover inseguire
   il numero di aree con un breakpoint dedicato se in futuro cambiano. */
.func-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1rem;
}
.func-card {
  background: #fff;
  border: 1px solid var(--lgray);
  border-radius: 6px;
  padding: 1.1rem 1.15rem;
}
.func-num {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-bottom: 0.35rem;
}
.func-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.func-card p { font-size: 12.5px; color: var(--gray); line-height: 1.55; }

/* I vantaggi. Riusano l'aspetto di .ricerca-card della home. */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}
/* Senza questa regola i link dentro le schede resterebbero blu di default:
   nel resto del sito non compare mai un link a colore di sistema. */
.adv-grid a { color: var(--teal2); text-decoration: underline; }
.adv-grid a:hover { color: var(--teal3); }

/* .refs-block nella home sta in fondo a una card flex e usa margin-top:auto.
   Qui e' un blocco a se' stante, quindi lo stacco va dato a mano. */
.refs-standalone { margin-top: 2rem; }


/* ==========================================================================
   04. Blocchi di testo e riquadri
   ========================================================================== */

.prose p { font-size: 14.5px; color: var(--gray); line-height: 1.8; margin-bottom: 1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--navy); font-weight: 600; }

/* Citazione dell'obiettivo del progetto: e' una frase del Mario Negri, va
   distinta dal testo redazionale. */
.quote-block {
  border-left: 3px solid var(--teal);
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 0 0 1.25rem;
}
.quote-block p {
  font-family: var(--font-disp);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--navy);
  font-style: italic;
}
.quote-block cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-style: normal;
  color: var(--gray);
}

/* Scheda tecnica: coppie etichetta/valore. */
.spec-list { list-style: none; }
.spec-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--lgray);
  font-size: 13px;
}
.spec-list li:last-child { border-bottom: none; }
.spec-key {
  flex: 0 0 42%;
  color: var(--gray);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.spec-val { flex: 1; min-width: 140px; color: var(--navy); }

/* Fascia di chiusura con il rimando ai contatti. */
.page-cta { text-align: center; }
.page-cta h2 {
  font-family: var(--font-disp);
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  color: #fff;
  margin-bottom: 0.75rem;
}
.page-cta > p {
  color: rgba(255,255,255,0.6);
  font-size: 14.5px;
  line-height: 1.75;
  max-width: 60ch;
  margin: 0 auto 2rem;
}
.page-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
}


/* ==========================================================================
   05. Media queries
   --------------------------------------------------------------------------
   Stessi breakpoint di style.css: 1024 -> 900 -> 700 -> 480.
   ========================================================================== */

@media (max-width: 1024px) {
  .split-grid { gap: 2.5rem; }
}

@media (max-width: 900px) {
  .split-grid { grid-template-columns: 1fr; }
  .page-hero  { padding: calc(var(--nav-h) + 2.5rem) 0 2.5rem; }
}

@media (max-width: 700px) {
  .page-hero { padding: calc(var(--nav-h) + 2rem) 0 2rem; }
  .spec-key  { flex: 0 0 100%; }
}

@media (max-width: 480px) {
  .func-card { padding: 0.9rem 1rem; }
}