/* Contenitore principale */
.jforma-list-root { border:1px solid #e5e5e5; padding:12px; background:#fff; }

/* ===== FILTRI: GRID 2/3 + 1/3 su desktop/tablet, stack su smartphone ===== */
.jforma-list-filters { margin-bottom:12px; }
.jfl-row {
  display: grid;
  grid-template-columns: 2fr 1fr; /* 2/3 + 1/3 */
  gap: 16px;
  align-items: end;
}

/* Parole chiave */
.jfl-keywords .jfl-label { font-weight:600; font-size:14px; color:#333; }
.jfl-input-wrap { position: relative; display:block; }
.jfl-input-wrap .jfl-input {
  width:100%;
  padding:8px 36px 8px 10px;       /* spazio a destra per bottone X */
  border:1px solid #cfcfcf; border-radius:4px; font-size:14px;
  box-sizing:border-box; line-height:1.3;
}
.jfl-input-wrap .jfl-clear {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  line-height:1; text-align:center;
  border:1px solid #cfcfcf; border-radius:50%;
  background:#fff; color:#666; cursor:pointer;
  font-size:14px; padding:0;
  opacity:0; pointer-events:none; transition:opacity .15s ease, background .15s ease;
}
.jfl-input-wrap .jfl-clear.is-visible { opacity:1; pointer-events:auto; }
.jfl-input-wrap .jfl-clear:hover { background:#f2f2f2; }
.jfl-input-wrap .jfl-clear:focus { outline:none; box-shadow:0 0 0 3px rgba(34,113,177,.25); }

/* Ordine */
.jfl-order .jfl-label { font-weight:600; font-size:14px; color:#333; margin-bottom:6px; }
.jfl-order-inline { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.jfl-radio { display:inline-flex; align-items:center; gap:6px; font-size:14px; }

/* Tag (pill) */
.jfl-tags .jfl-label { font-weight:600; font-size:14px; color:#333; margin-bottom:6px; }
.jfl-tags .jfl-tags-wrap { display:flex; flex-wrap:wrap; gap:8px 10px; }
.jfl-tag {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px;
  border:1px solid #ddd;
  background:#f4f6f8;
  color:#333;
  border-radius:9999px;
  cursor:pointer;
  font-size:13px;
  line-height:1.1;
  user-select:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.jfl-tag:hover { background:#e9edf1; }
.jfl-tag:focus { outline:none; box-shadow:0 0 0 3px rgba(34,113,177,.25); }
.jfl-tag.is-selected,
.jfl-tag[aria-pressed="true"] {
  background:#2271b1;
  color:#fff;
  border-color:#2271b1;
}

/* Legenda tipologie */
.jfl-legend {
  display:flex;
  justify-content:flex-end;
  flex-wrap:nowrap;
  gap:10px;
  margin:6px 0 14px;
  font-size:13px;
}
.jfl-legend-item {
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border:1px solid #e2e2e2;
  border-radius:6px;
  white-space:nowrap;
}
.jfl-legend-text { font-weight:600; color:#333; }

/* Filtro per modalità lezione (Online/In aula/Tutti) */
.jfl-lesson-filter {
  border:none;
  margin:0 0 14px;
  padding:0;
}
.jfl-lesson-filter-wrap {
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
}
.jfl-lesson-btn {
  display:inline-flex;
  align-items:center;
  padding:6px 14px;
  border:2px solid #e2e2e2;
  border-radius:6px;
  background:#f9f9f9;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  color:#555;
  transition:all .15s ease;
  white-space:nowrap;
}
.jfl-lesson-btn:hover {
  border-color:#999;
  background:#f0f0f0;
}
.jfl-lesson-btn:focus {
  outline:none;
  box-shadow:0 0 0 3px rgba(34,113,177,.25);
}
.jfl-lesson-btn.is-active,
.jfl-lesson-btn[aria-pressed="true"] {
  border-color:#2271b1;
  box-shadow:0 0 0 2px rgba(34,113,177,.2);
}
.jfl-lesson-btn.is-active .jfl-lesson-btn-text,
.jfl-lesson-btn[aria-pressed="true"] .jfl-lesson-btn-text {
  color:#2271b1;
}
/* Eredita colori di sfondo dalle classi lesson-type-* */
.jfl-lesson-btn.lesson-type-class { background:#fff7ed; border-color:#f7d9ba; }
.jfl-lesson-btn.lesson-type-class.is-active { border-color:#d97706; box-shadow:0 0 0 2px rgba(217,119,6,.2); }
.jfl-lesson-btn.lesson-type-online { background:#e8fbff; border-color:#bfe4ef; }
.jfl-lesson-btn.lesson-type-online.is-active { border-color:#0891b2; box-shadow:0 0 0 2px rgba(8,145,178,.2); }
.jfl-lesson-btn.lesson-type-remote { background:#eef5ff; border-color:#cfdcf7; }
.jfl-lesson-btn.lesson-type-remote.is-active { border-color:#3b82f6; box-shadow:0 0 0 2px rgba(59,130,246,.2); }
.jfl-lesson-btn.lesson-type-blended { background:#f6f2ff; border-color:#dcd3ff; }
.jfl-lesson-btn.lesson-type-blended.is-active { border-color:#7c3aed; box-shadow:0 0 0 2px rgba(124,58,237,.2); }
.jfl-lesson-btn.lesson-type-e-learning { background:#f0fdf4; border-color:#bbf7d0; }
.jfl-lesson-btn.lesson-type-e-learning.is-active { border-color:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.2); }
.jfl-lesson-btn.lesson-type-webinar { background:#fefce8; border-color:#fef08a; }
.jfl-lesson-btn.lesson-type-webinar.is-active { border-color:#ca8a04; box-shadow:0 0 0 2px rgba(202,138,4,.2); }
.jfl-lesson-btn.lesson-type-on-agency { background:#fff1f8; border-color:#f5d3e3; }
.jfl-lesson-btn.lesson-type-on-agency.is-active { border-color:#db2777; box-shadow:0 0 0 2px rgba(219,39,119,.2); }
.jfl-lesson-btn.lesson-type-at-home { background:#f1fbf3; border-color:#cfead5; }
.jfl-lesson-btn.lesson-type-at-home.is-active { border-color:#16a34a; box-shadow:0 0 0 2px rgba(22,163,74,.2); }

/* ===== RISULTATI: struttura "come slider" (senza immagine) ===== */
.jforma-list-results { margin-top:10px; }
.jforma-list {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  align-items:stretch;
  grid-auto-rows:minmax(220px, auto);
}
.jforma-list:empty::after {
  content: attr(data-empty);
  display:block; padding:10px; color:#666; font-style:italic; border:1px dashed #ddd;
}

/* Messaggio vuoto (es. filtro URL senza risultati) */
.jfl-empty-message {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: #555;
  font-size: 16px;
  font-style: italic;
  border: 1px dashed #ccc;
  background: #fafafa;
  border-radius: 6px;
}

/* Card elemento */
.jfl-item {
  border:1px solid #e8e8e8;
  padding:12px;
  background:#fff;
  height:100%;
  min-height:220px;
}
.jfl-item-main {
  display:grid;
  grid-template-rows:auto 1fr auto;
  row-gap:8px;
  width:100%;
  height:100%;
}

/* Meta row identica allo slider */
.jfl-meta {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:0; font-size:13px; color:#444;
}
.jfl-meta .meta-left, .jfl-meta .meta-right { display:flex; align-items:center; gap:6px; }

.jfl-item-body {
  display:grid;
  grid-template-columns: 33.3333% 1fr; /* immagine = 1/3, contenuto = 2/3 */
  gap:12px;
  align-items:stretch;
  min-height:0;
}
.jfl-item-body.no-image { grid-template-columns:1fr; }
.jfl-media {
  width:100%;
  height:100%;
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.jfl-media img {
  width:100%;
  height:100%;
  object-fit:contain; /* preserva proporzioni senza tagliare */
  border-radius:4px;
  display:block;
}
.jfl-content {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

/* Titolo e sottotitolo: **niente** clamp a 3 righe */
.jfl-name {
  font-weight:700; font-size:16px; line-height:1.35; margin:0 0 6px 0;
}
.jfl-name a { color:inherit; text-decoration:none; }
.jfl-name a:hover, .jfl-name a:focus { text-decoration:underline; }

.jfl-subtitle {
  font-size:14px; color:#555; line-height:1.35; margin:0;
}

/* Price row (sempre visibile) come slider */
.jfl-price-row {
  margin-top:0; background:#f2f2f2; border-radius:4px;
  border:1px solid rgba(34,34,34,0.15);
  padding:8px 12px; display:flex; align-items:center; gap:12px;
  justify-content:space-between;
  width:100%;
  font-weight:600; color:#222; font-size:14px;
  min-height:44px; line-height:1.2;
}
.jfl-price-row .jfl-amount,
.jfl-price-row .jfl-countdown { display:flex; align-items:center; gap:6px; line-height:1.2; }
.jfl-price-row .jfl-amount { justify-content:flex-start; }
.jfl-price-row .jfl-countdown {
  margin-left:auto;
  justify-content:flex-end;
  text-align:right;
}

/* Paginazione lista */
.jfl-pagination {
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.jfl-pagination.is-hidden { display:none; }
.jfl-pagination-info { font-size:13px; color:#555; }
.jfl-pagination-controls {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.jfl-page-btn,
.jfl-page-number {
  border:1px solid #d0d0d0;
  background:#fff;
  color:#333;
  padding:6px 10px;
  border-radius:4px;
  cursor:pointer;
  font-size:13px;
  line-height:1.1;
}
.jfl-page-btn:hover,
.jfl-page-number:hover { background:#f3f3f3; }
.jfl-page-btn:disabled {
  opacity:0.5;
  cursor:default;
}
.jfl-page-numbers { display:flex; gap:6px; align-items:center; }
.jfl-page-number[aria-current="page"] {
  border-color:#2271b1;
  background:#2271b1;
  color:#fff;
}
.jfl-page-ellipsis { color:#777; padding:0 4px; }
.jfl-page-size { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#444; }
.jfl-page-size-select {
  border:1px solid #d0d0d0;
  border-radius:4px;
  padding:6px 8px;
  font-size:13px;
  background:#fff;
}

/* A11y helper */
.jfl-sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* Responsive: smartphone -> filtri su due righe */
@media (max-width: 767px) {
  .jfl-row { grid-template-columns: 1fr; }
}

@media (min-width: 768px) {
  .jforma-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .jforma-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Lesson type backgrounds (lista + legenda) */
.jfl-item.lesson-type-class,
.jfl-legend-item.lesson-type-class { background:#fff7ed; border-color:#f7d9ba; }
.jfl-item.lesson-type-remote,
.jfl-legend-item.lesson-type-remote { background:#eef5ff; border-color:#cfdcf7; }
.jfl-item.lesson-type-online,
.jfl-legend-item.lesson-type-online { background:#e8fbff; border-color:#bfe4ef; }
.jfl-item.lesson-type-blended,
.jfl-legend-item.lesson-type-blended { background:#f6f2ff; border-color:#dcd3ff; }
.jfl-item.lesson-type-on-agency,
.jfl-legend-item.lesson-type-on-agency { background:#fff1f8; border-color:#f5d3e3; }
.jfl-item.lesson-type-at-home,
.jfl-legend-item.lesson-type-at-home { background:#f1fbf3; border-color:#cfead5; }