/* ============================================
   GALERIE CSS GRID - Portfolio 3D
   ============================================ */

/* Grid Container */
.gallery-masonry {
  /* --grid-cols est responsive (voir media queries).
     grid-auto-rows agit comme la hauteur d'un block; JS calcule les spans en multiples de cette valeur. */
  --grid-cols: 6;
  --block-size: 12px;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  grid-auto-rows: var(--block-size);
  grid-auto-flow: dense;
  gap: 12px;
  padding: 2rem 0;
  align-items: start;
}

/* Cartes de projet */
.masonry-item {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: box-shadow 0.3s ease, z-index 0.3s ease, transform 0.3s ease, opacity 0.6s ease;
  height: 100%;
  min-height: 0;
  z-index: 1;
  display: block;
}

.masonry-item:hover {
  box-shadow: 0 10px 40px rgba(255, 140, 66, 0.3);
  z-index: 100;
}

/* Conteneur média */
.masonry-media {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.masonry-media img,
.masonry-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

.masonry-media img {
  z-index: 1;
}

.masonry-media video {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.3s ease;
}

.masonry-media.is-playing video {
  opacity: 1;
}

/* Cell type helpers (largeur x hauteur en blocks) */
.masonry-item--vertical {    /* 1 x 3 */
  grid-column: span 1;
  grid-row: span 3;
}

.masonry-item--square {      /* 2 x 3 */
  grid-column: span 2;
  grid-row: span 3;
}

.masonry-item--square-lg {   /* 3 x 3 */
  grid-column: span 3;
  grid-row: span 3;
}

.masonry-item--horizontal {  /* 3 x 1 */
  grid-column: span 3;
  grid-row: span 1;
}

.masonry-item--horizontal-2 { /* 3 x 2 */
  grid-column: span 3;
  grid-row: span 2;
}

/* Responsive block counts */
@media (max-width: 1024px) {
  .gallery-masonry { --grid-cols: 6; }
}

@media (max-width: 767px) {
  .gallery-masonry { --grid-cols: 4; }
}

.masonry-item:hover .masonry-media img,
.masonry-item:hover .masonry-media video {
  transform: scale(1.05);
}

/* Overlay au survol */
.masonry-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.4) 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  z-index: 1;
}

.masonry-item:hover .masonry-overlay {
  opacity: 1;
}

/* Info projet dans overlay */
.masonry-info {
  transform: translateY(20px);
  transition: transform 0.4s ease;
}

.masonry-item:hover .masonry-info {
  transform: translateY(0);
}

.masonry-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.masonry-category {
  font-size: 0.85rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.masonry-play-btn,
.masonry-format-icon {
  display: none;
}

/* État initial pour animation */
.masonry-item {
  opacity: 0;
  transform: translateY(30px);
}

.masonry-item.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}