/* ============================================
   NIM ACF Repeater - Frontend Styles
   ============================================ */

/* Grid système */
.nim-grid {
  display: grid;
  gap: var(--nim-gap, 1.25rem);
}

.nim-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.nim-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nim-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nim-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nim-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nim-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Responsive */
@media (max-width: 1024px) {
  .nim-cols-lg-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .nim-cols-lg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nim-cols-lg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .nim-cols-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .nim-cols-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .nim-cols-sm-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}

/* Cards */
.nim-card {
  display: block;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.nim-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.nim-card:focus {
  outline: 2px solid var(--nim-focus-color, #0073aa);
  outline-offset: 2px;
}

/* Images */
.nim-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.nim-card:hover .nim-img {
  opacity: 0.95;
}

/* Loading state */
.nim-img[data-lazy="loading"] {
  opacity: 0.5;
  animation: nimPulse 1.5s ease-in-out infinite;
}

@keyframes nimPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.8; }
}

/* Typography */
.nim-title {
  margin: 0.5rem 0 0.25rem;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.2s ease;
}

.nim-card:hover .nim-title {
  color: var(--nim-accent-color, #0073aa);
}

.nim-text {
  margin: 0;
  color: #444;
  line-height: 1.5;
}

/* Link wrapper */
.nim-link {
  color: inherit;
  text-decoration: none;
  display: block;
}

.nim-link:hover {
  text-decoration: none;
}

/* Empty state */
.nim-empty,
.nim-notice {
  padding: 2rem;
  text-align: center;
  color: #666;
  font-style: italic;
  background: #f5f5f5;
  border-radius: 0.5rem;
  border: 1px dashed #ddd;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .nim-text {
    color: #ccc;
  }
  
  .nim-empty,
  .nim-notice {
    background: #2a2a2a;
    color: #999;
    border-color: #444;
  }
  
  .nim-card {
    background: #1e1e1e;
  }
  
  .nim-card:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  }
}

/* Accessibility */
.nim-card[aria-hidden="true"] {
  visibility: hidden;
}

/* Print styles */
@media print {
  .nim-grid {
    display: block;
  }
  
  .nim-card {
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 1rem;
  }
  
  .nim-card:hover {
    transform: none;
    box-shadow: none;
  }
}

/* RTL support */
[dir="rtl"] .nim-grid {
  direction: rtl;
}

/* Utilitaires */
.nim-fade-in {
  animation: nimFadeIn 0.5s ease-in;
}

@keyframes nimFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Masonry layout option */
.nim-grid.nim-masonry {
  grid-auto-rows: min-content;
  grid-auto-flow: dense;
}

/* Stagger animation for grid items */
.nim-grid.nim-stagger .nim-card {
  animation: nimFadeIn 0.5s ease-in;
  animation-fill-mode: backwards;
}

.nim-grid.nim-stagger .nim-card:nth-child(1) { animation-delay: 0.05s; }
.nim-grid.nim-stagger .nim-card:nth-child(2) { animation-delay: 0.1s; }
.nim-grid.nim-stagger .nim-card:nth-child(3) { animation-delay: 0.15s; }
.nim-grid.nim-stagger .nim-card:nth-child(4) { animation-delay: 0.2s; }
.nim-grid.nim-stagger .nim-card:nth-child(5) { animation-delay: 0.25s; }
.nim-grid.nim-stagger .nim-card:nth-child(6) { animation-delay: 0.3s; }
.nim-grid.nim-stagger .nim-card:nth-child(n+7) { animation-delay: 0.35s; }