/*
 * Portale eventi ISORS - hub.css
 * Solo la disposizione dell'hub (index.html). Colori e caratteri vengono dalle pelli di marchi.css.
 * Includere dopo base.css e marchi.css.
 */

/* ------------------------------------------------------------------ Testata della pagina */

@media (max-width: 40rem) { .testata__marchio img { height: 2rem; } }


.hero { overflow: hidden; }
.hero__corpo { display: grid; gap: var(--s7); max-width: 46rem; }
.hero__testo { max-width: 40rem; }
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); padding-top: var(--s2); }
/* le fasce del globo ISORS: una per pagina, in basso a destra, mai sotto il testo */
.hero .firma { display: none; }
@media (min-width: 64rem) { .hero .firma { display: block; } }

/* ------------------------------------------------------------------ L'anno in una riga */

.anno { --altezza-binario: 2.5rem; position: relative; padding-top: 1.25rem; }
.anno__binario {
  position: relative;
  height: var(--altezza-binario);
  background: var(--fondo-2);
  border: 1px solid var(--linea);
}
.anno__mesi {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  height: 100%;
  margin: 0; padding: 0; list-style: none;
}
.anno__mesi li {
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 0.2rem;
  border-left: 1px solid var(--linea);
  font-size: 0.75rem; color: var(--testo-2);
}
.anno__mesi li:first-child { border-left: 0; }
.anno__lungo { display: none; }
@media (min-width: 40rem) {
  .anno__corto { display: none; }
  .anno__lungo { display: inline; }
}

.anno__segno {
  position: absolute; top: 0; height: 0.625rem;
  left: calc(var(--da) * 100%);
  width: max(calc((var(--a) - var(--da)) * 100%), 0.5rem);
  background: var(--accento);
}
.anno__segno--passato { background: var(--testo-2); }

.anno__oggi {
  position: absolute; top: -0.5rem; height: 1.125rem;
  left: calc(var(--pos) * 100%);
  width: 2px;
}
.anno__oggi::before { content: ""; position: absolute; inset: 0; background: var(--titoli); }
.anno__oggi span {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  font-size: 0.75rem; font-weight: var(--peso-sottotitoli); line-height: 1.2; color: var(--titoli);
}
.anno__oggi--destra span { left: auto; right: -2px; transform: none; }

.anno__etichette { position: relative; height: calc(var(--n) * 1.5rem + 0.25rem); margin-top: 0.5rem; }
@media (min-width: 48rem) { .anno__etichette { height: 3.25rem; } }
.anno__etichetta {
  position: absolute;
  top: calc(var(--riga) * 1.5rem);
  left: calc(var(--da) * 100%);
  padding: 0.125rem 0 0.125rem 0.5rem;
  border-left: 2px solid var(--linea);
  font-size: var(--t-nota); line-height: 1.2;
  color: var(--titoli);
  text-decoration: none;
  white-space: nowrap;
}
.anno__etichetta::before {
  content: ""; position: absolute; left: -2px; bottom: 100%;
  width: 2px; height: calc(var(--riga) * 1.5rem + 0.5rem);
  background: var(--linea);
}
.anno__etichetta:hover { text-decoration: underline; }
.anno__etichetta--destra {
  left: auto; right: calc((1 - var(--a)) * 100%);
  padding: 0.125rem 0.5rem 0.125rem 0;
  border-left: 0; border-right: 2px solid var(--linea);
  text-align: right;
}
.anno__etichetta--destra::before { left: auto; right: -2px; }

/* ------------------------------------------------------------------ Appuntamenti */

.appuntamento {
  display: grid;
  gap: var(--s4) var(--s6);
  padding-block: var(--s6);
  border-top: 1px solid var(--linea);
  scroll-margin-top: var(--s5);
}
.appuntamento:first-child { border-top: 0; padding-top: 0; }
.appuntamento:last-child { padding-bottom: 0; }
.appuntamento--fascia { border-top: 0; }
.appuntamento > .fascia-fiera { grid-column: 1 / -1; }
.appuntamento--fascia { padding-top: 0; }
.appuntamento--fascia:not(:first-child) { margin-top: var(--s6); }

.appuntamento__lato { display: grid; gap: var(--s3); align-content: start; justify-items: start; }
.appuntamento__corpo { min-width: 0; }

@media (min-width: 48rem) {
  .appuntamento { grid-template-columns: 11rem minmax(0, 1fr); }
}

/* Incontri dentro un appuntamento: elenco di schede separate */
.elenco-eventi { display: grid; gap: var(--s4); list-style: none; margin: 0; padding: 0; }
.elenco-eventi { max-width: 56rem; }
.elenco-eventi > li { min-width: 0; max-width: none; }
.elenco-eventi .scheda-evento__corpo { gap: var(--s3); }
.elenco-eventi .scheda-evento__giorno { font-size: 2.25rem; }
.elenco-eventi .scheda-evento__data { min-width: 3.5rem; }
.elenco-eventi h4 { font-size: var(--t-titolo-3); line-height: 1.15; }
.elenco-eventi .scheda-evento__dettagli dt { white-space: nowrap; }

/* Il testo della scheda deve poter restringersi sotto la larghezza del lockup */
.appuntamento__marchio { min-width: 0; }
.scheda-evento__corpo > [data-cobrand] { min-width: 0; padding-top: var(--s2); }

/* ------------------------------------------------------------------ Certificazione delle competenze digitali
   Sezione in pelle IsorsCert, sempre chiara (il lockup con M&F esiste solo per fondi chiari). */

.cert { border-block: 4px solid var(--accento); }
.cert .elenco-eventi { max-width: 56rem; }
/* il lockup sta già su un fondo chiaro: niente piastra che esce dai margini */
.cert .lockup--piastra { margin-inline: 0; padding: 0; background: transparent; }
/* lockup del kit: orizzontale da 460 px, verticale da 300 px, mai sotto */
.cert .lockup__ufficiale { width: min(100%, 30rem); min-width: min(100%, 300px); }
/* a 360 px di viewport (con la barra di scorrimento) il lockup verticale deve restare da 300 px: margini ridotti */
@media (max-width: 30rem) {
  .cert .card { padding: var(--s3); }
}

/* ------------------------------------------------------------------ Marchi della rete
   Un marchio per riga. Il logo sta nella sua colonna, alla misura che il kit prevede per quella larghezza. */

#rete { display: grid; gap: var(--s6); }
.rete-marchio { display: grid; gap: var(--s5); align-items: start; }
@media (max-width: 30rem) { .rete-marchio { padding: var(--s4); } }
@media (min-width: 56rem) {
  .rete-marchio { grid-template-columns: 34rem minmax(0, 1fr); gap: var(--s6); padding: var(--s6); }
}
.rete-marchio__testo { display: grid; gap: var(--s3); min-width: 0; align-content: start; }
.rete-marchio h3 { font-size: var(--t-titolo-3); line-height: 1.15; }
.rete-marchio__sito { margin-top: var(--s2); }

/* Logo: versione per i piccoli formati finché la colonna è stretta, marchio principale quando entra
   (ISORS da 400 px, UNICURS da 490 px). UNICURS sotto i 490 px si scrive in testo. */
.rete-logo { container-type: inline-size; min-width: 0; }
.rete-logo img { height: auto; }
.rete-logo__grande { display: none; }
.rete-logo__piccolo { width: min(100%, 17.5rem); }
.rete-logo--anfop .rete-logo__piccolo { width: min(100%, 18.75rem); }
.rete-logo__nome {
  display: block;
  font-family: var(--font-titoli); font-weight: var(--peso-titoli); letter-spacing: var(--tracking-titoli);
  font-size: var(--t-titolo-2); line-height: 1.1; color: var(--titoli);
}
@container (min-width: 26rem) {
  .rete-logo--isors .rete-logo__piccolo { display: none; }
  .rete-logo--isors .rete-logo__grande { display: block; width: min(100%, 33rem); }
}
@container (min-width: 31rem) {
  .rete-logo--unicurs .rete-logo__nome { display: none; }
  .rete-logo--unicurs .rete-logo__grande { display: block; width: 31rem; }
}

/* ------------------------------------------------------------------ Piè di pagina */

.piede .formula { border-top-color: var(--evidenza-forte); }

/* Collegamenti di servizio, discreti (informativa privacy, area relatori) */
.piede__servizio { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); max-width: none; margin-top: var(--s3); font-size: var(--t-nota); color: var(--testo-2); }
.piede__servizio a { color: var(--testo-2); }
.piede__servizio a:hover { color: var(--testo); }