/* Dynamic Media Library – CSS */
/* Version: v1.0  */
/* Scope: Experience Manager 3.0 – Regional Theme */

/* Root */
.media-library { padding: 24px 0; }

.dml-controls { 
  display: grid; 
  grid-template-columns: 1fr auto; 
  gap: 12px; 
  align-items: center; 
  margin-bottom: 16px; 
}

@media (max-width: 768px){
  .dml-controls { grid-template-columns: 1fr; }
}

.dml-search input { 
  width: 100%; 
  padding: 10px 12px; 
  border: 1px solid #d2d6dc; 
  border-radius: 8px; 
}

.dml-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.dml-filters select, .dml-actions select { 
  padding: 8px 10px; 
  border: 1px solid #d2d6dc; 
  border-radius: 8px; 
  background: #fff; 
}

.dml-actions { display: flex; gap: 12px; align-items: center; }

.dml-layout .layout-btn { 
  padding: 8px 12px; 
  border: 1px solid #d2d6dc; 
  border-radius: 8px; 
  background: #fff; 
  cursor: pointer; 
}
.dml-layout .layout-btn.is-active { 
  border-color: #2d4668; 
  box-shadow: 0 0 0 2px rgba(45,70,104,.1); 
}

/* Grid */
.dml-grid { display: grid; gap: 16px; }
.dml-grid.list { grid-template-columns: 1fr; }
.dml-grid.imageGallery, 
.dml-grid.videoGallery { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Card */
.dml-card { 
  border: 1px solid #edf2f7; 
  border-radius: 12px; 
  overflow: hidden; 
  background: #fff; 
  display: flex; 
  flex-direction: column; 
}

.dml-card .thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.dml-card .thumb img, 
.dml-card .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }

.dml-card .meta { padding: 12px; }
.dml-card .title { font-size: 16px; font-weight: 700; color: #2d4668; margin: 0 0 6px 0; }
.dml-card .desc { font-size: 14px; color: #334155; margin: 0 0 10px 0; }

.dml-card .actions { display: flex; gap: 8px; margin-top: auto; padding: 0 12px 12px; }
.dml-btn { 
  padding: 8px 10px; 
  border-radius: 8px; 
  border: 1px solid #d2d6dc; 
  background: #fff; 
  text-decoration: none; 
  display: inline-block; 
}

/* Badges */
.dml-badge { 
  position: absolute; 
  top: 8px; 
  left: 8px; 
  padding: 4px 6px; 
  font-size: 12px; 
  background: #e5e7eb; 
  border-radius: 6px; 
}

/* List layout adjustments */
.dml-grid.list .dml-card { flex-direction: row; }
.dml-grid.list .dml-card .thumb { width: 280px; min-width: 220px; aspect-ratio: 16/9; }
.dml-grid.list .dml-card .meta { flex: 1; }

/* Pagination */
.dml-pagination { 
  display: flex; 
  gap: 12px; 
  align-items: center; 
  justify-content: center; 
  margin-top: 16px; 
}
.dml-pagination button { 
  padding: 8px 12px; 
  border: 1px solid #d2d6dc; 
  border-radius: 8px; 
  background: #fff; 
}

/* Utilities */
.sr-only { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0, 0, 0, 0); 
  white-space: nowrap; 
  border: 0; 
}