/* portfolio.css — grille du widget <portfolio>. Self-hosted (/global/assets), chargé une fois par page.
 * Le nombre de colonnes vient de la variable inline --wb-portfolio-cols (posée par le widget). */
.wb-portfolio {
  display: grid;
  grid-template-columns: repeat(var(--wb-portfolio-cols, 3), 1fr);
  gap: 0.75rem;
}

@media (max-width: 700px) {
  .wb-portfolio { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .wb-portfolio { grid-template-columns: 1fr; }
}

.wb-portfolio-item {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  line-height: 0;          /* supprime l'espace sous l'image */
}

.wb-portfolio-item picture,
.wb-portfolio-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* vignettes carrées homogènes (variante square déjà recadrée) */
  aspect-ratio: 1 / 1;
}

a.wb-portfolio-item {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.wb-portfolio-item:hover,
a.wb-portfolio-item:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
a.wb-portfolio-item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}