/* =====================================================================
   Fondazione Isabella Seràgnoli — foglio di stile unico
   Ricostruzione 1:1 del sito Adobe Muse (2018) in HTML/CSS puro.
   - Desktop (> 960px): layout fisso a 800px centrato, coordinate
     identiche all'originale (css/index.css, css/info.css di Muse).
   - Tablet/mobile (<= 960px): sostituisce la cartella /tablet di Muse
     (colonna da 375px dentro una pagina max 500px).
   Coordinate: left/top in px relative al contenitore .stage.
   ===================================================================== */

/* ---------- Reset minimo (equivalente a site_global.css) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, div, p, a, img, main, footer { margin: 0; padding: 0; border: 0; }
img { display: block; }

html { background: #FFFFFF; }
body {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  line-height: 17px;
  word-wrap: break-word;
  text-rendering: optimizeLegibility;
  background: #FFFFFF;
}

/* Tutti i link del sito sono "nontext" in Muse: neri, senza sottolineatura */
a { color: #000000; text-decoration: none; }

/* ---------- Struttura pagina: contenuto + spaziatore + footer ----------
   Il footer resta in fondo alla finestra (come il .verticalspacer di Muse),
   ma non sale mai sopra il contenuto. */
.page {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 800px;
  margin: 0 auto;
}
.stage  { position: relative; flex: none; }
.spacer { flex: 1 0 auto; }

.footer {
  position: relative;
  flex: none;
  color: #7F7F7F;
  text-align: center;
  font-family: Verdana, Tahoma, Geneva, sans-serif;
}
.footer .t { display: none; }   /* versione su 3 righe: solo tablet */

/* ---------- Elementi posizionati ---------- */
.abs { position: absolute; }
.vd  { font-family: Verdana, Tahoma, Geneva, sans-serif; text-align: center; }

/* Etichette corsive grigie (ASSISTENZA / FORMAZIONE E RICERCA) */
.tag  { color: #7F7F7F; font-size: 9px; line-height: 11px; font-style: italic; }
/* Nomi strutture (HOSPICE ...) */
.name { font-size: 13px; line-height: 16px; }
/* Testi descrittivi grigi (MAST, Alsos) */
.desc { color: #7F7F7F; font-size: 12px; line-height: 14px; }

.s9  { font-size: 9px;  line-height: 11px; }
.s10 { font-size: 10px; line-height: 12px; }
.s16 { font-size: 16px; line-height: 19px; }
.s8  { font-size: 8px;  line-height: 10px; }
.s11 { font-size: 11px; line-height: 13px; }
.grey { color: #969696; }
.b    { font-weight: bold; }

/* Linee verticali di separazione */
.line { width: 1px; background: #C8C8C8; }

/* Barre colorate delle tre aree */
.bar { height: 20px; }
.bar span {
  position: absolute;
  color: #FFFFFF;
  font-size: 12px;
  line-height: 14px;
  font-weight: bold;
}
#bar-cp { background: #00008C; }   /* Cure palliative          */
#bar-dn { background: #3196C8; }   /* Disturbi della nutrizione */
#bar-sc { background: #FF2C00; }   /* Sviluppo socio-culturale  */

/* =====================================================================
   DESKTOP
   ===================================================================== */
body          { min-width: 800px; }
body.home     { padding: 36px 0; }
body.info     { padding: 20px 0 19px; }
.home .page   { min-height: calc(100vh - 72px); }
.info .page   { min-height: calc(100vh - 39px); }

.home .stage  { height: 324px; }
.info .stage  { height: 703px; }
.home .spacer { min-height: 139px; }
.info .spacer { min-height: 1px; }

.footer {
  width: 800px;
  height: 21px;
  margin: 18px 0 -2px;
  font-size: 10px;
  line-height: 12px;
}

/* --- Home --- */
#home-logo { left: 115px; top: 117px; width: 570px; height: 207px; }

/* --- Info: logo e griglia --- */
#logo   { left: 238px; top: 20px; width: 375px; height: 136px; }

#l1 { left: -60px; top: 191px; height: 511px; }
#l2 { left: 235px; top: 192px; height: 511px; }
#l3 { left: 498px; top: 192px; height: 511px; }
#l4 { left: 685px; top: 192px; height: 511px; }
#l5 { left: 859px; top: 191px; height: 511px; }

#bar-dn { left: 236px; top: 192px; width: 263px; }
#bar-cp { left: -59px; top: 192px; width: 296px; }
#bar-sc { left: 498px; top: 192px; width: 362px; }
#bar-cp span { left: 0; top: 3px; width: 296px; }
#bar-dn span { left: 0; top: 3px; width: 263px; }
#bar-sc span { left: 0; top: 4px; width: 362px; }

/* --- Colonna Cure palliative --- */
#hospice-logo   { left: 49px;  top: 225px; width: 93px;  height: 147px; }
#cp-assistenza  { left: -60px; top: 388px; width: 99px;  }
#cp-formazione  { left: 96px;  top: 388px; width: 127px; }
#campus         { left: -60px; top: 433px; width: 283px; }
#residence      { left: -10px; top: 458px; width: 176px; }
#asmepa         { left: 106px; top: 475px; width: 105px; height: 92px; }
#h-bentivoglio  { left: -49px; top: 499px; width: 99px;  }
#h-bellaria     { left: -48px; top: 557px; width: 98px;  }
#h-casalecchio  { left: -48px; top: 596px; width: 98px;  }
#h-pediatrico   { left: -48px; top: 637px; width: 98px;  }

/* --- Colonna Disturbi della nutrizione --- */
#gruber-logo      { left: 303px; top: 238px; width: 172px; height: 124px; }
#gr-assistenza    { left: 259px; top: 388px; width: 81px;  }
#gr-formazione    { left: 362px; top: 388px; width: 127px; }
#centro-gruber    { left: 236px; top: 426px; width: 127px; }
#accademia        { left: 362px; top: 430px; width: 127px; }
#residenza-gruber { left: 252px; top: 501px; width: 95px;  }

/* --- Colonna Sviluppo socio-culturale --- */
#mast-logo  { left: 529px; top: 240px; width: 123px; height: 123px; }
#mast-text  { left: 511px; top: 386px; width: 162px; }
#alsos-logo { left: 694px; top: 247px; width: 157px; height: 103px; }
#alsos-text { left: 689px; top: 387px; width: 165px; height: 98px; }

.abs img { width: 100%; height: 100%; }

/* =====================================================================
   TABLET / MOBILE  (sostituisce la cartella /tablet di Muse)
   ===================================================================== */
@media (max-width: 960px) {
  body, body.home, body.info { min-width: 320px; padding: 0; }

  .page,
  .home .page,
  .info .page {
    width: 100%;
    max-width: 500px;
    min-height: 100vh;
    padding-bottom: 19px;
    container-type: inline-size;   /* 1cqw = 1% della larghezza pagina */
  }

  .home .stage  { height: 344px; }
  .info .stage  { height: 1500px; width: 375px; margin-left: calc(50% - 189px); }
  .home .spacer { min-height: 472px; }
  .info .spacer { min-height: 1px; }

  .footer {
    width: 416px;
    height: 46px;
    margin: 38px 0 0 calc(50% - 208px);
    font-size: 11px;
    line-height: 13px;
  }
  .footer .d { display: none; }
  .footer .t { display: block; }

  /* --- Home --- */
  #home-logo { left: 26px; top: 181px; width: 449px; height: 163px; }

  /* --- Info: colonna unica da 375px --- */
  #logo { left: 0; top: 21px; }

  #l1 { left: 0;     top: 204px; height: 1296px; }
  #l5 { left: 375px; top: 204px; height: 1296px; }
  #l2, #l3, #l4 { display: none; }

  #bar-cp { left: 0; top: 184px;  width: 375px; }
  #bar-dn { left: 0; top: 715px;  width: 374px; }
  #bar-sc { left: 0; top: 1105px; width: 374px; }
  #bar-cp span { left: calc(50% - 148px); top: 3px; }
  #bar-dn span { left: calc(50% - 139px); top: 3px; }
  #bar-sc span { left: calc(50% - 181px); top: 4px; }

  #hospice-logo  { left: 140px; top: 219px; }
  #cp-assistenza { left: 40px;  top: 381px; }
  #cp-formazione { left: 207px; top: 381px; }
  #campus        { left: 40px;  top: 426px; }
  #residence     { left: 90px;  top: 450px; }
  /* in Muse il logo ASMEPA tablet e' fluido (29.07% di una colonna 75% pagina) */
  #asmepa        { left: calc(5.2075cqw + 189px); top: 474px; width: 21.8025cqw; height: auto; }
  #asmepa img    { height: auto; }
  #h-bentivoglio { left: 40px;  top: 483px; }
  #h-bellaria    { left: 41px;  top: 563px; }
  #h-casalecchio { left: 40px;  top: 609px; }
  #h-pediatrico  { left: 40px;  top: 656px; }

  #gruber-logo      { left: 116px; top: 762px; }
  #gr-assistenza    { left: 52px;  top: 912px; }
  #gr-formazione    { left: 207px; top: 912px; }
  #centro-gruber    { left: 29px;  top: 950px; }
  #accademia        { left: 207px; top: 954px; }
  #residenza-gruber { left: 45px;  top: 1025px; }

  #mast-logo  { left: 31px;  top: 1153px; }
  #alsos-logo { left: 207px; top: 1160px; }
  #mast-text  { left: 13px;  top: 1296px; }
  #alsos-text { left: 206px; top: 1296px; }
}