/**
 * DMDC Album Content CSS
 * Render album ảnh trên frontend (nội dung bài viết/trang)
 * Hỗ trợ các kiểu layout: Grid, Masonry, Slider, Justified
 * Responsive & Tùy biến style động theo data-attribute
 */

/* ========== BASE ========== */
.dmdc-album {
  margin: 1.5rem auto;
  width: 100%;
  box-sizing: border-box;
}

.dmdc-album-title {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: inherit;
}

.dmdc-album-grid {
  width: 100%;
}

.dmdc-album-item {
  overflow: hidden;
  position: relative;
  border-radius: var(--album-radius, 6px);
}

.dmdc-album-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
  cursor: pointer;
}

.dmdc-album-item:hover img {
  transform: scale(1.04);
  filter: brightness(0.95);
}

/* ========== GRID LAYOUT ========== */
.dmdc-album[data-layout="grid"] .dmdc-album-grid {
  display: grid;
  grid-template-columns: repeat(var(--album-cols, 3), 1fr);
  gap: var(--album-gap, 12px);
}

.dmdc-album[data-layout="grid"] .dmdc-album-item {
  aspect-ratio: 1 / 1;
}

/* ========== MASONRY LAYOUT ========== */
.dmdc-album[data-layout="masonry"] .dmdc-album-grid {
  columns: var(--album-cols, 3);
  column-gap: var(--album-gap, 12px);
}

.dmdc-album[data-layout="masonry"] .dmdc-album-item {
  break-inside: avoid;
  margin-bottom: var(--album-gap, 12px);
}

.dmdc-album[data-layout="masonry"] .dmdc-album-item img {
  height: auto;
}

/* ========== SLIDER LAYOUT ========== */
.dmdc-album[data-layout="slider"] .dmdc-album-grid {
  display: flex;
  gap: var(--album-gap, 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 8px;
}

.dmdc-album[data-layout="slider"] .dmdc-album-item {
  flex: 0 0 calc(100% / var(--album-cols, 3) - var(--album-gap, 12px));
  min-width: 220px;
  scroll-snap-align: start;
  aspect-ratio: 4 / 3;
}

.dmdc-album[data-layout="slider"] .dmdc-album-grid::-webkit-scrollbar {
  height: 6px;
}

.dmdc-album[data-layout="slider"] .dmdc-album-grid::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.dmdc-album[data-layout="slider"] .dmdc-album-grid::-webkit-scrollbar-thumb {
  background: #0d6efd;
  border-radius: 3px;
}

/* ========== JUSTIFIED LAYOUT ========== */
.dmdc-album[data-layout="justified"] .dmdc-album-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--album-gap, 12px);
}

.dmdc-album[data-layout="justified"] .dmdc-album-item {
  flex: 1 1 200px;
  height: 220px;
}

/* ========== DATA ATTRIBUTES ATTRIBUTIONS ========== */
.dmdc-album[data-columns="2"] { --album-cols: 2; }
.dmdc-album[data-columns="3"] { --album-cols: 3; }
.dmdc-album[data-columns="4"] { --album-cols: 4; }
.dmdc-album[data-columns="5"] { --album-cols: 5; }
.dmdc-album[data-columns="6"] { --album-cols: 6; }

.dmdc-album[data-gap="4"]  { --album-gap: 4px; }
.dmdc-album[data-gap="8"]  { --album-gap: 8px; }
.dmdc-album[data-gap="12"] { --album-gap: 12px; }
.dmdc-album[data-gap="16"] { --album-gap: 16px; }
.dmdc-album[data-gap="24"] { --album-gap: 24px; }

.dmdc-album[data-radius="0"]  .dmdc-album-item { --album-radius: 0px; }
.dmdc-album[data-radius="6"]  .dmdc-album-item { --album-radius: 6px; }
.dmdc-album[data-radius="12"] .dmdc-album-item { --album-radius: 12px; }
.dmdc-album[data-radius="20"] .dmdc-album-item { --album-radius: 20px; }

.dmdc-album[data-padding="12px"] { padding: 12px; }
.dmdc-album[data-padding="20px"] { padding: 20px; }

/* Dynamic max-width & bg color (inline attributes fallback) */
.dmdc-album[data-max-width="1200px"] { max-width: 1200px; }
.dmdc-album[data-max-width="900px"]  { max-width: 900px; }
.dmdc-album[data-max-width="700px"]  { max-width: 700px; }

/* Lightbox hint icon on hover */
.dmdc-album[data-lightbox="true"] .dmdc-album-item::after {
  content: '🔍';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transition: all 0.25s ease;
  pointer-events: none;
}

.dmdc-album[data-lightbox="true"] .dmdc-album-item:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 1024px) {
  .dmdc-album[data-columns="5"],
  .dmdc-album[data-columns="6"] {
    --album-cols: 4;
  }
  .dmdc-album[data-layout="masonry"][data-columns="5"] .dmdc-album-grid,
  .dmdc-album[data-layout="masonry"][data-columns="6"] .dmdc-album-grid {
    columns: 4;
  }
}

@media (max-width: 768px) {
  .dmdc-album[data-layout="grid"] .dmdc-album-grid,
  .dmdc-album[data-layout="masonry"] .dmdc-album-grid {
    --album-cols: 2;
  }
  .dmdc-album[data-layout="masonry"] .dmdc-album-grid {
    columns: 2;
  }
  .dmdc-album[data-layout="slider"] .dmdc-album-item {
    flex: 0 0 calc(50% - var(--album-gap, 12px) / 2);
    min-width: 160px;
  }
}

@media (max-width: 480px) {
  .dmdc-album[data-layout="grid"] .dmdc-album-grid {
    --album-cols: 1;
  }
  .dmdc-album[data-layout="masonry"] .dmdc-album-grid {
    columns: 1;
  }
  .dmdc-album[data-layout="slider"] .dmdc-album-item {
    flex: 0 0 85%;
    min-width: 0;
  }
}

/* ========== EDITOR PREVIEW (CKEditor) ========== */
body.document-editor .dmdc-album,
.cke_editable .dmdc-album {
  outline: 2px dashed #0d6efd;
  outline-offset: 4px;
  position: relative;
}

body.document-editor .dmdc-album::before,
.cke_editable .dmdc-album::before {
  content: '📸 Album (' attr(data-layout) ' - ' attr(data-columns) ' cột)';
  display: inline-block;
  background: #0d6efd;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}