/*===========================================
  GALLERY SYSTEM - Ready64.org
  Sistema CSS riutilizzabile per gallerie
  (giochi, scansioni, museo, etc.) 
===========================================*/

/* === VARIABILI GLOBALI === */
:root {
  /* Dimensioni Card */
  --gallery-card-width-screenshot: 160px;
  --gallery-card-width-copertina: 200px;
  --gallery-card-width-titlescreen: 180px;
  
  /* Gap tra cards */
  --gallery-grid-gap: 16px;
  
  /* Dimensioni Immagini */
  --gallery-img-screenshot-width: 160px;
  --gallery-img-screenshot-height: 100px;
  --gallery-img-copertina-max-height: 200px;
  --gallery-img-copertina-max-width: 100px;
  --gallery-img-titlescreen-width: 160px;
  --gallery-img-titlescreen-height: 100px;
  
  /* Bandierina */
  --gallery-flag-size: 20px;
  --gallery-flag-position: 8px;
  
  /* Placeholder */
  --gallery-placeholder-bg: var(--brown-800);
  --gallery-placeholder-text: #7C70DA;
  
  /* Lista alternata (zebra) */
  --gallery-list-odd-bg: var(--brown-700);
  --gallery-list-odd-shadow: var(--brown-500);
  --gallery-list-even-bg: var(--brown-500);
  --gallery-list-even-shadow: var(--brown-300);
}

/*===========================================
  GRID CONTAINER
===========================================*/

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--gallery-card-width-screenshot), 1fr));
  gap: var(--gallery-grid-gap);
  padding: 16px 0;
  width: 100%;
}

/* Vista Copertina */
.gallery-grid[data-vista="copertina"] {
  grid-template-columns: repeat(auto-fill, minmax(var(--gallery-card-width-copertina), 1fr));
}

/* Vista Titlescreen */
.gallery-grid[data-vista="titlescreen"] {
  grid-template-columns: repeat(auto-fill, minmax(var(--gallery-card-width-titlescreen), 1fr));
}

/* Vista Lista */
.gallery-grid[data-vista="lista"] {
  display: block;
}

/*===========================================
  CARD SINGOLA (screenshot/copertina/titlescreen)
===========================================*/

.gallery-card {
  display: flex;
  flex-direction: column;
  background: var(--brown-900);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/*===========================================
  THUMBNAIL CONTAINER
===========================================*/

.gallery-card__thumbnail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
  min-height: var(--gallery-img-screenshot-height);
}

/* Sfondo leggermente scuro per screenshot/titlescreen */
.gallery-grid[data-vista="screenshot"] .gallery-card__thumbnail,
.gallery-grid[data-vista="titlescreen"] .gallery-card__thumbnail {
  background: rgba(0, 0, 0, 0.3);
}

/* Copertina: container più alto */
.gallery-grid[data-vista="copertina"] .gallery-card__thumbnail {
  min-height: var(--gallery-img-copertina-max-height);
  background: transparent;
}

/*===========================================
  IMMAGINI
===========================================*/

.gallery-card__image {
  display: block;
  border-radius: 4px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /*border: 1px solid var(--black);*/
  box-sizing: border-box;
}

/* Screenshot (default) */
.gallery-grid[data-vista="screenshot"] .gallery-card__image,
.gallery-grid:not([data-vista]) .gallery-card__image {
  width: var(--gallery-img-screenshot-width);
  height: var(--gallery-img-screenshot-height);
  object-fit: contain;
}

/* Copertina - dimensioni vincolanti */
.gallery-grid[data-vista="copertina"] .gallery-card__image {
  max-height: var(--gallery-img-copertina-max-height);
  max-width: var(--gallery-img-copertina-max-width);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Titlescreen */
.gallery-grid[data-vista="titlescreen"] .gallery-card__image {
  width: var(--gallery-img-titlescreen-width);
  height: var(--gallery-img-titlescreen-height);
  object-fit: contain;
}

/* Placeholder immagine copertina */
.gallery-card__placeholder-img {
  object-fit: contain !important;
  max-width: 100%;
  height: auto;
  border: none !important;
}

/*===========================================
  PLACEHOLDER (immagine mancante)
===========================================*/

.gallery-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--gallery-img-screenshot-height);
  background: var(--gallery-placeholder-bg);
  color: var(--gallery-placeholder-text);
  font-size: 11px;
  font-weight: 500;
  border-radius: 4px;
  text-align: center;
  padding: 10px;
}

.gallery-grid[data-vista="copertina"] .gallery-card__placeholder {
  height: var(--gallery-img-copertina-max-height);
}

/*===========================================
  BANDIERINA ITALIANA
===========================================*/

.gallery-card__flag {
  position: absolute !important;
  top: var(--gallery-flag-position);
  right: var(--gallery-flag-position);
  width: var(--gallery-flag-size) !important;
  height: auto !important;
  z-index: 10;
  border-radius: 2px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  border: none !important;
}

/*===========================================
  INFO GIOCO
===========================================*/

.gallery-card__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.4;
}

.gallery-card__title {
  font-weight: bold;
  font-size: 13px;
  color: var(--text-primary);
  word-wrap: break-word;
}

.gallery-card__title a {
  color: inherit;
  text-decoration: none;
}

.gallery-card__title a:hover {
  color: var(--primary-400);
  text-decoration: underline;
}

.gallery-card__meta {
  color: var(--text-muted);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.gallery-card__meta a {
  color: var(--primary-400);
  text-decoration: none;
}

.gallery-card__meta a:hover {
  color: var(--primary-300);
  text-decoration: underline;
}

/* Ogni gruppo (editore, virgola, anno) resta insieme */
.meta-gruppo {
  display: inline-block;
  white-space: nowrap;
}

/* Badge admin */
.gallery-card__admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--info-600), var(--info-500));
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 10px;
  margin-left: 6px;
  text-decoration: none !important;
  vertical-align: middle;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: all 0.2s ease;
}

.gallery-card__admin-badge:hover {
  background: linear-gradient(135deg, var(--info-500), var(--info-400));
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

/*===========================================
  VISTA LISTA (zebra alternata)
===========================================*/

.gallery-list-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 80px 1fr 60px;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--black);
  align-items: center;
  font-size: 13px;
  transition: background 0.2s ease;
}

/* Riga dispari (stile riga-1) */
.gallery-list-row--odd {
  background-color: var(--gallery-list-odd-bg);
  box-shadow: inset 0 1px 0 0 var(--gallery-list-odd-shadow);
}

/* Riga pari (stile riga-2) */
.gallery-list-row--even {
  background-color: var(--gallery-list-even-bg);
  box-shadow: inset 0 1px 0 0 var(--gallery-list-even-shadow);
}

.gallery-list-row:hover {
  background: var(--brown-800) !important;
}

/* Colonne lista */
.gallery-list__title {
  font-weight: bold;
  position: relative;
}

.gallery-list__title a {
  color: var(--text-primary);
  text-decoration: none;
}

.gallery-list__title a:hover {
  color: var(--primary-400);
  text-decoration: underline;
}

.gallery-list__publisher,
.gallery-list__year,
.gallery-list__genre {
  color: var(--text-muted);
}

.gallery-list__docs {
  text-align: center;
  font-size: 16px;
}

/* Bandierina in lista */
.gallery-list__title .gallery-card__flag {
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 6px;
  top: auto;
  right: auto;
}

/*===========================================
  CONTROL BAR
===========================================*/

.control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--brown-800);
  padding: 12px 16px;
  border-radius: 8px;
  margin: 16px 0;
  flex-wrap: wrap;
  gap: 12px;
}

.control-bar-left {
  display: flex;
  align-items: center;
}

.query-counter {
  font-weight: bold;
  color: var(--text-primary);
  font-size: 14px;
}

.control-bar-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.control-select select {
  background: var(--brown-900);
  color: var(--text-primary);
  border: 1px solid var(--brown-600);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.control-select select:hover {
  border-color: var(--primary-500);
  background: var(--brown-700);
}

.control-select select:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 2px rgba(var(--primary-400-rgb), 0.2);
}

/*===========================================
  RESPONSIVE
===========================================*/

@media (max-width: 1200px) {
  :root {
    --gallery-card-width-screenshot: 160px;
    --gallery-card-width-copertina: 180px;
  }
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
  
  :root {
    --gallery-grid-gap: 12px;
    --gallery-img-screenshot-width: 140px;
    --gallery-img-screenshot-height: 87px;
  }
  
  .gallery-list-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  
  .control-bar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .control-bar-controls {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}