/* static/css/community_gallery.css — alternate-build cards (fiche set, onglet communauté).
   Classes reprises de static/mockups/community-gallery/mockup.css (.mk-alt-*), renommées
   .alt-build-*. Complété par la galerie publique (Task 6). Couleurs/rayons via les design
   tokens (--lb-*). */

.alt-build-card {
  flex: 0 0 280px;
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--lb-shadow-sm);
  display: flex;
  flex-direction: column;
}
.alt-build-card > a { display: block; }
.alt-build-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.alt-build-card .alt-build-body { padding: 14px; flex: 1 1 auto; display: flex; flex-direction: column; }
.alt-build-card .alt-build-desc { font-size: .88rem; color: var(--lb-ink); flex: 1 1 auto; }
.alt-build-card .alt-build-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--lb-border);
  font-size: .78rem;
  color: var(--lb-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ---- Galerie publique (Task 6) ----
   Classes reprises de static/mockups/community-gallery/mockup.css (.mk-*), renommées .cg-*.
   Mise en page retenue : rangées justifiées (variante C de galerie-mosaique.html), pas les
   colonnes de .mk-wall (la lecture colonne par colonne casse le tri chronologique). */

/* En-tête. */
.cg-hero {
  background: var(--lb-surface-alt);
  border-bottom: 1px solid var(--lb-border);
  padding: 48px 0 40px;
  text-align: center;
}
.cg-hero h1 { font-family: var(--lb-font-ui); color: var(--lb-ink); margin-bottom: 10px; }
.cg-hero p { color: var(--lb-muted); max-width: 640px; margin: 0 auto; }
.cg-stats { margin-top: 22px; color: var(--lb-muted); font-size: .85rem; }
.cg-stats strong { color: var(--lb-ink); font-size: 1.15rem; font-family: var(--lb-font-ui); }
.cg-stats span { display: inline-block; margin: 0 14px; }

/* Barre de filtres. */
.cg-filters {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--lb-border);
  padding: 12px 0;
}
/* .cg-chip est un <a> ici (pas un <span> comme dans la maquette) : border/background restent
   nécessaires pour l'aspect pastille, on neutralise juste le soulignement natif du lien. */
.cg-chip {
  display: inline-block;
  font-family: var(--lb-font-ui);
  font-size: .8rem;
  padding: 6px 14px;
  margin: 0 6px 6px 0;
  border: 1px solid var(--lb-border);
  border-radius: 999px;
  background: #fff;
  color: var(--lb-ink);
  cursor: pointer;
  text-decoration: none;
}
.cg-chip:hover { border-color: var(--lb-brand); color: var(--lb-brand); }
.cg-chip.active { background: var(--lb-brand); border-color: var(--lb-brand); color: #fff; }

/* Pastille de type. Seul ALTERNATE_BUILD est utilisé sur le mur (cf. template). */
.cg-type {
  display: inline-block;
  font-family: var(--lb-font-ui);
  font-size: .7rem;
  font-weight: 500;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.cg-type-alternate_build { background: var(--lb-brand); color: #fff; }

/* Vignette de mur : zoom léger au survol, légende en dégradé toujours lisible. */
.cg-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--lb-radius);
  box-shadow: var(--lb-shadow-sm);
  cursor: zoom-in;
  background: var(--lb-surface-alt);
}
.cg-tile img { transition: transform .35s ease; }
.cg-tile:hover img { transform: scale(1.04); }
.cg-tile .cg-tile-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px 12px 10px;
  color: #fff;
  font-size: .8rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  /* Le crédit reste lisible sans interaction : au survol seul, il était invisible sur mobile. */
  opacity: .92;
  transition: opacity .25s ease;
}
.cg-tile:hover .cg-tile-caption { opacity: 1; }
.cg-tile .cg-tile-caption .cg-desc {
  display: block;
  margin-top: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Rangées justifiées : hauteur de rangée constante, largeur proportionnelle au ratio porté par --ar. */
.cg-wall { display: flex; flex-wrap: wrap; gap: 12px; --row-h: 220px; }
.cg-wall .cg-tile {
  height: var(--row-h);
  flex-grow: calc(var(--ar) * 100);
  flex-basis: calc(var(--ar) * var(--row-h));
  position: relative;
  overflow: hidden;
  border-radius: var(--lb-radius);
}
.cg-wall .cg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Absorbe l'espace restant : sans ça, la dernière rangée s'étire démesurément. */
.cg-wall::after { content: ""; flex-grow: 1000000; }
@media (max-width: 768px) { .cg-wall { --row-h: 170px; } }

/* Bandeau de badges : numéro de set à gauche, crédit à droite, dans un même flex —
   jamais chacun positionné dans son coin (ils se chevauchent sinon sur vignette étroite,
   constaté sur smartphone). */
.cg-badges {
  position: absolute; top: 10px; left: 10px; right: 10px;
  display: flex; align-items: flex-start; gap: 6px;
  pointer-events: none;
}
.cg-setbadge {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .94); color: var(--lb-ink);
  font-family: var(--lb-font-ui); font-size: .72rem; font-weight: 500; line-height: 1;
  padding: 5px 9px; border-radius: 999px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
/* Le crédit cède la place au numéro : c'est lui qui se tronque quand la vignette est étroite. */
.cg-credit {
  margin-left: auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: rgba(0, 0, 0, .55); color: #fff;
  font-family: var(--lb-font-ui); font-size: .72rem; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
}

/* --- Mur compact et tuile de fin, utilisés par la bande de la page d'upload. --- */
.cg-wall-compact { --row-h: 180px; }

/* Cette tuile ne doit PAS suivre l'étirement proportionnel de la rangée : sa largeur
   dépendrait sinon des ratios des photos voisines, et le libellé deviendrait illisible.
   Attention à la spécificité — `.cg-wall .cg-tile` est (0,2,0), donc un `.cg-cta` seul
   perdrait la déclaration `flex` : garder le sélecteur descendant et ce bloc en dernier. */
.cg-wall .cg-cta {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  text-align: center;
  text-decoration: none;
  color: var(--lb-ink);
  background: var(--lb-surface-alt);
  border: 1px solid var(--lb-border);
}
.cg-wall .cg-cta:hover { background: var(--lb-surface); border-color: var(--lb-brand); }
.cg-wall .cg-cta i { font-size: 1.6rem; color: var(--lb-brand); }
.cg-wall .cg-cta strong { font-family: var(--lb-font-heading); font-size: 1.5rem; line-height: 1; }
.cg-wall .cg-cta span { font-size: .8rem; color: var(--lb-muted); }
.cg-wall .cg-cta .btn { color: #fff; }

@media (max-width: 768px) {
  .cg-wall-compact { --row-h: 150px; }
  /* 200px de large sur 150px de haut ne suffisent pas à un bouton lisible : on lui donne sa propre rangée. */
  .cg-wall .cg-cta { flex-basis: 100%; flex-direction: row; gap: 12px; }
}

/* --- Légende de la visionneuse --- */
/* Le crédit passe à la ligne sous le descriptif, en plus discret. */
.mfp-title .cg-popup-credit { display: block; margin-top: 4px; font-size: .85em; opacity: .8; }