/* ========== collections.css (namespace .colx-*) ========== */
:root{
  /* ใช้โทนเดียวกับไซต์ (ชมพูแดงอ่อน) */
  --colx-primary: #d62839;
  --colx-bg-soft: #fdecef;
  --colx-text: #1a1a1a;
  --colx-muted: #6b7280;
  --colx-border: #e5e7eb;
}

.collectionsList { font-family: "Kanit", system-ui, sans-serif; }

/* Header */
.colx-header { margin: 4px 0 16px; }
.colx-title {
  font-weight: 700; margin: 0 0 6px;
  color: var(--colx-primary); letter-spacing: .2px;
}
.colx-intro {
  color: var(--colx-muted); margin: 0;
}

/* Grid */
.colx-grid { row-gap: 18px; }

/* Card */
.colx-card {
  border: 1px solid var(--colx-border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  height: 100%;
  display: flex; flex-direction: column;
}
.colx-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Media */
.colx-media {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  background: var(--colx-bg-soft);
}
.colx-media img {
  width: 100%; height: 100%; object-fit: cover; display:block;
}
.colx-media--placeholder{
  width: 100%; height: 100%;
  display:flex; align-items:center; justify-content:center;
  color: var(--colx-muted); font-size: 44px;
}

/* Body */
.colx-body { padding: 12px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1; }
.colx-card-title {
  margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3;
}
.colx-card-title a { color: var(--colx-text); text-decoration: none; }
.colx-card-title a:hover { color: var(--colx-primary); }

.colx-desc {
  color: var(--colx-muted); font-size: 0.96rem; line-height: 1.55;
}

/* Actions */
.colx-actions a{
  display: inline-block;
  margin-top: 2px;
  padding: 6px 10px;
  border: 1px solid var(--colx-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--colx-primary);
  background: #fff;
  transition: background .15s, border-color .15s, color .15s;
  font-size: .95rem;
}
.colx-actions a:hover{
  border-color: var(--colx-primary);
  background: var(--colx-bg-soft);
}

/* Empty */
.colx-empty{
  padding: 16px; border: 1px dashed var(--colx-border);
  border-radius: 12px; color: var(--colx-muted); background: #fff;
}

/* Responsive fine-tune (optional) */
@media (max-width: 991px){
  .colx-card-title { font-size: 1rem; }
  .colx-desc { font-size: .94rem; }
}
/* Grid 4 คอลัมน์ สำหรับ related media */
.colx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.colx-grid .obj-frame {
  border:1px solid #e5e7eb; border-radius:12px; background:#fff;
  overflow:hidden; display:flex; align-items:center; justify-content:center;
  aspect-ratio: 4/3; /* หรือ 1/1 ถ้าอยากเป็นสี่เหลี่ยมจัตุรัส */
}
.colx-grid img {
  width:100%; height:100%; object-fit:cover;
}
.colx-grid .caption {
  font-size:.9rem; color:#475569; margin-top:.25rem;
}