/* =========================================================
   GRID + SIDEBAR
   ========================================================= */
.scg-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  margin: 30px 0;
  padding-top: 30px;
}

.scg-sidebar {
  width: 250px;
  flex-shrink: 0;
  padding: 15px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* Form filtri */
#scg-filter-form label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: #333;
}
#scg-filter-form input[type="checkbox"] {
  margin-right: 8px;
}
.scg-subcat { /* sottocategorie indentate */
  margin-left: 20px;
  font-style: italic;
}

/* Griglia delle schede */
.scg-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  flex-grow: 1;
}

/* Ogni elemento griglia */
.scg-item {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  display: flex;                 /* per altezze uniformi con .scg-card height:100% */
}

/* Tablet: 2 colonne */
@media (min-width: 768px) {
  .scg-item { width: calc(50% - 15px); }
}

/* Desktop: 3 colonne */
@media (min-width: 1441px) {
  .scg-item { width: calc(33.333% - 20px); }
}

/* =========================================================
   CARD
   ========================================================= */
.scg-card {
  background-color: #f9f9f9;
  text-align: left;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border-radius: 10px;
  border: 1px solid #a1a1a1;
  overflow: hidden;

  /* struttura a colonna per “spingere” il bottone in fondo */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.scg-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

/* Banner immagine (con background-image inline nel markup) */
.banner-scg {
  width: 100%;
  height: 160px;                 /* puoi portarlo a 100px/140px/180px in base al design */
  border-radius: 10px 10px 0 0;
  background-position: center;
  background-size: cover !important;
  flex: 0 0 auto;                /* non cresce */
}

/* =========================================================
   CONTENUTO
   ========================================================= */
.info-scg {
  flex: 1 1 auto;                /* occupa lo spazio verticale disponibile */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 15px 0;          /* niente padding basso: lo gestisce il bottone */
  text-align: left;
  min-height: 250px;             /* opzionale: garantisce corpi omogenei */
}

/* Titolo */
.info-scg h3 {
  margin: 0 0 4px;
  font-size: 13px;
  color: #333;
  padding: 0 5px;
  text-transform: uppercase;

  /* Clamp a 2 righe per evitare card molto più alte */
  display: -webkit-box;
  -webkit-line-clamp: 2;         /* max 2 righe */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sottotitolo/descriptor */
.info-scg h6 {
  font-weight: bold;
  font-size: 13px;
  margin: 0;
  padding: 0 5px;
  color: #2f2f2f;
}

/* Righe info con icone */
.size-font-prev-info {
  font-size: 13px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 5px;
  color: #1c1d1c;
}
.size-font-prev-info i {
  width: 18px;                   /* allinea le icone evitando “ballonzoli” */
  text-align: center;
}

/* Separatore */
.linea-scheda {
  width: 100%;
  height: 1px;
  background: #1c1d1c;
  opacity: 0.2;
  border: 0;
  margin: 8px 0;
}

/* Prezzo */
.prezzo_del_corso {
  text-align: right;
  font-size: 16px;
  font-weight: bold;
  padding: 0 5px;
  margin: 0 0 8px;
  color: #111;
}

/* Titolo gruppo griglia */
.scg-group-title { font-weight: bold; }
.scg-group { margin-bottom: 30px; }

/* =========================================================
   CTA (BOTTONE) — SEMPRE IN FONDO
   ========================================================= */
.scg-btn {
  margin-top: auto;              /* spinge il bottone in fondo alla card */
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 16px;
  background-color: #b78864;
  color: #000000;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;

  /* Evita “salti” in hover quando compare il bordo */
  border: 1px solid transparent;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;

  transition: background-color 0.2s ease-in-out,
              color 0.2s ease-in-out,
              border-color 0.2s ease-in-out,
              transform 0.2s ease-in-out;
}

.scg-btn:hover {
  color: #ffffff;
} 

/* =========================================================
   RESPONSIVE: sidebar sotto griglia su mobile
   ========================================================= */
@media (max-width: 767px) {
  .scg-wrapper { flex-direction: column; }
  .scg-sidebar { width: 100%; }
  .scg-item { width: 100%; }
  .banner-scg { height: 140px; }
}

/* leggero tuning tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .banner-scg { height: 150px; }
}