/**
 * File: assets/theme/ios/css/quiz-list.css
 * Description: Styles responsive grille, cards, skeleton loader, thèmes.
 *
 * @since       1.9.1
 * @version     1.9.2
 * @changelog
 *   1.9.2 – 2025-06-10 : Ajout responsive grid et focus visible filtres.  
 *   1.9.1 – 2025-06-09 : Styles skeleton loader et support dark mode.  
  * @todo
 *   1. Ajouter animations hover cards avancées.  
 *   2. Support RTL (langue droite-à-gauche).  
 *   3. Variables CSS pour réglages spacing.  
 *   4. Styles pour pagination « Charger plus ».  
 *   5. Tests visuels cross-browser.  
 *
 * Files using this:
 *   - modulr/templates/frontend/quiz-list.php
 *   - assets/js/frontend/quiz-list.js
 */

/*--------------------------------------------------------------
# Thèmes : variables CSS
--------------------------------------------------------------*/
:root {
  --ql-bg:           #ffffff;
  --ql-text:         #333333;
  --ql-btn-bg:       #e0e0e0;
  --ql-btn-active:   #0073aa;
  --ql-overlay-bg:   rgba(0,0,0,0.6);
  --ql-skeleton-bg:  #f5f5f5;
}
[data-theme="dark"] {
  --ql-bg:           #1e1e1e;
  --ql-text:         #dddddd;
  --ql-btn-bg:       #333333;
  --ql-btn-active:   #005177;
  --ql-overlay-bg:   rgba(0,0,0,0.6);
  --ql-skeleton-bg:  #2a2a2a;
}

/*--------------------------------------------------------------
# Wrapper & grille responsive
--------------------------------------------------------------*/
.modulr-quiz-list-wrapper {
  background: var(--ql-bg);
  color: var(--ql-text);
  padding: 1rem;
}
.modulr-quiz-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  grid-template-columns: repeat(4, 1fr);
}
/* Tablet */
@media (max-width: 992px) {
  .modulr-quiz-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile */
@media (max-width: 576px) {
  .modulr-quiz-grid {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------
# Filtres compétences & focus visible
--------------------------------------------------------------*/
.modulr-filters {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
}
.modulr-filters .filter-item {
  display: inline-block;
  margin: 0 0.5rem 0.2rem 0 ;
  padding: 0.4rem 0.8rem;
  background: var(--ql-btn-bg);
  color: var(--ql-text);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.2s;
}
.modulr-filters .filter-item:hover,
.modulr-filters .filter-item:focus {
  background: var(--ql-btn-active);
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,115,170,0.5);
}
.modulr-filters .filter-item.active {
  background: var(--ql-btn-active);
  color: #fff;
}

/*--------------------------------------------------------------
# Cards quiz
--------------------------------------------------------------*/
.modulr-quiz-card {
  position: relative;
  cursor: pointer;
  border-radius: 0.5rem;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  height: 186px;
  display: flex;
  align-items: flex-end;
  transition: transform 0.2s, box-shadow 0.2s;
}
.modulr-quiz-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.modulr-quiz-card:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,115,170,0.5);
}
.modulr-quiz-card .card-overlay {
  width: 100%;
  background: var(--ql-overlay-bg);
  color: #fff;
  padding: 0.5rem;
}
.modulr-quiz-card .card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
}
.modulr-quiz-card .card-subtitle {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.9;
}
.modulr-badge-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 5;
}
.modulr-badge-icon.new {
  background: #fff;
  border: 2px solid purple;
}
.modulr-badge-icon.trophy {
  background: #fff;
  border: 2px solid #facc15;
}

/*--------------------------------------------------------------
# Messages d’état (Sans quiz / Erreur)
--------------------------------------------------------------*/
.modulr-no-quizzes,
.modulr-error {
  grid-column: span 4;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--ql-text);
  opacity: 0.7;
  font-style: italic;
}

.modulr-quiz-list-header {
  flex-direction: row;
}
.modulr-loader-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.loader-spinner {
  border: 4px solid #ccc;
  border-top: 4px solid #666;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@media (max-width: 600px) {
  .modulr-quiz-list-header {
    flex-direction: column;
    align-items: flex-start;
  }
}