/* ==========================================================================
   Scuola Edile Modena — Catalogo corsi e calendario, aggiunte per la versione
   dinamica.

   Va caricato dopo css/catalogo-corsi.css e css/calendario.css, che restano
   quelli prodotti dal design. Qui c'e' solo cio' che il prototipo non poteva
   avere: la colonna delle sottocategorie (nel mockup i corsi erano tutti in
   una griglia piatta) e il pulsante che mostra i corsi oltre i primi otto.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Elenco corsi con colonna laterale delle sottocategorie.
   Sotto i 900px la colonna passa sopra la griglia.
   -------------------------------------------------------------------------- */
.cc-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}
/* Aree senza sottocategorie (es. Area Informatica), viste prima di aprire un
   corso: niente .cc-aside, .cc-split ha un solo figlio (.cc-grid-results) —
   le due colonne fisse lo schiaccerebbero in quella da 280px invece di
   lasciargli tutta la larghezza. includes/views/corsi_main.php aggiunge
   questa classe quando l'aside non c'e'. */
.cc-split--solo { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .cc-split { grid-template-columns: 1fr; gap: 28px; }
}

.cc-aside {
  position: sticky;
  top: 120px;
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--white);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
}
@media (max-width: 900px) {
  .cc-aside { position: static; }
}

.cc-aside__title {
  margin: 0 0 14px;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  color: var(--navy);
}

.cc-aside__list { list-style: none; margin: 0; padding: 0; }
.cc-aside__list li + li { margin-top: 4px; }
.cc-aside__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--navy);
  text-decoration: none;
  transition: background var(--transition-smooth);
}
.cc-aside__list a:hover { background: var(--slate-100); }
.cc-aside__list a.is-active {
  background: var(--navy);
  color: var(--white);
  font-weight: var(--fw-semibold);
}
.cc-aside__list a.is-active .cc-tag {
  background: rgba(255, 255, 255, 0.18);
  color: var(--white);
}

/* Le tessere di area e sottocategoria ospitano un'immagine, non solo un'icona:
   le categorie hanno gia' le proprie icone in graphics/ e images/. */
.cc-area__tile img,
.cc-cat__tile img {
  max-width: 70%;
  max-height: 70%;
  object-fit: contain;
}
.cc-cat__tile { overflow: hidden; }

/* Nel prototipo i pill delle aree erano <button> che filtravano i corsi gia'
   presenti in pagina. Qui sono collegamenti alle pagine di area, perche' i
   corsi arrivano dal database una categoria alla volta: servono le proprieta'
   che un <a> non ha per conto suo. */
a.cc-pill { text-decoration: none; color: var(--navy); }
a.cc-pill.is-active { color: #fff; }

/* Nel prototipo "Consulta tutti i corsi" era un <button> che filtrava la
   pagina; qui e' un collegamento alla pagina di categoria, quindi servono le
   proprieta' che un <a> non ha per conto suo. */
a.cc-area__allbtn {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}
a.cc-area__allbtn:hover { color: #fff; }

/* --------------------------------------------------------------------------
   "Mostra altri (N)" del calendario.
   Il prototipo mostrava tutti i corsi in una volta; la pagina vera ne tiene
   nascosti alcuni, come faceva la versione precedente.
   -------------------------------------------------------------------------- */
.cal-more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.cal-more[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Scheda del singolo corso.

   Il prototipo chiamato "corso-dettaglio" era in realta' Progetto 16 Ore,
   quindi la scheda corso vera non era stata composta. I componenti pero'
   c'erano gia' in css/corso-dettaglio.css (cd-card, cd-info, cd-table,
   cd-login): qui c'e' solo quello che serve in piu', cioe' le quattro quote
   e il riquadro di pre-iscrizione.
   -------------------------------------------------------------------------- */
.cd-scheda { display: flex; flex-direction: column; gap: 32px; }
.cc-scheda-corso { width: 100%; }

/* Quote: quattro cifre incrociate fra iscritti e non iscritti alla Cassa
   Edile, e fra prima e dopo la soglia di partecipanti. */
.cd-quote {
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--white);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
}
.cd-quote__titolo {
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--fw-semibold);
  color: var(--navy);
}
.cd-quote__iva {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-body);
  color: var(--text-muted);
}
.cd-quote__wrap { overflow-x: auto; }
.cd-quote__tabella th:first-child { width: auto; }
.cd-quote__tabella th:nth-child(2),
.cd-quote__tabella th:nth-child(3) { text-align: center; white-space: nowrap; }
.cd-quote__tabella td:first-child { text-align: left; }
.cd-quote__tabella td:nth-child(2),
.cd-quote__tabella td:nth-child(3) {
  text-align: center;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--navy);
}

/* Riquadro di pre-iscrizione */
.cd-iscrizione {
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--warm-sand);
  border: 1px solid var(--border-light);
}
.cd-iscrizione form { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.cd-iscrizione form > .se-input { width: 100%; }
.cd-iscrizione__intro {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.cd-dati {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 20px;
  margin: 0;
  font-size: var(--text-sm);
}
.cd-dati dt { color: var(--text-muted); }
.cd-dati dd { margin: 0; font-weight: var(--fw-semibold); color: var(--navy); }

/* La finestra della procedura di iscrizione ai seminari ospita una pagina
   intera in un iframe: serve piu' spazio delle altre finestre. */
.cd-modal__panel--iframe {
  width: min(1100px, 96vw);
  height: min(90vh, 900px);
  display: flex;
  flex-direction: column;
}
.cd-modal__iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--white);
}