/* Greybox Phase 5.2 — collection page foundation.
 * A compact cinematic destination header + the shared Phase-4 card catalog.
 * Consumes Phase 1 tokens. No red, no neon, no giant hero, no trailer.
 * All motion is static by default; reduced-motion kills the rest. */

#collection-head.hidden { display: none; }

.gx-col {
  position: relative;
  overflow: hidden;
  border-radius: var(--gx-radius-bar);
  border: 1px solid var(--gx-border-faint);
  background: var(--gx-bg-1);
  margin-top: 1.5rem;
}

/* Subtle blurred atmosphere derived from the collection's own artwork.
 * Static image treatment only — no animation, no video. */
.gx-col-atmo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.gx-col-atmo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: blur(46px) saturate(1.1);
  opacity: 0.3;
  transform: scale(1.12);
}

.gx-col-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to top, rgba(7, 7, 12, 0.88), rgba(7, 7, 12, 0.45) 55%, rgba(7, 7, 12, 0.25)),
    linear-gradient(to right, rgba(7, 7, 12, 0.5), transparent 60%);
}

.gx-col-body {
  position: relative;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 2rem 1.5rem;
  min-width: 0;
}

.gx-col-cover {
  flex: none;
  width: 4.5rem;
  height: 6.75rem;
  object-fit: cover;
  border-radius: 0.6rem;
  border: 1px solid var(--gx-border);
  box-shadow: var(--gx-shadow-soft);
}

.gx-col-main { min-width: 0; flex: 1 1 auto; }

.gx-col-eyebrow {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gx-accent-strong);
}

.gx-col-eyebrow:empty { display: none; }

.gx-col-title {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--gx-text);
  text-wrap: balance;
}

.gx-col-desc {
  margin: 0.6rem 0 0;
  max-width: 44rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gx-text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gx-col-desc:empty { display: none; }

.gx-col-meta {
  margin: 0.7rem 0 0;
  font-size: 0.76rem;
  color: var(--gx-text-faint);
  letter-spacing: 0.02em;
}

.gx-col-meta:empty { display: none; }

/* Compact loading header: real title immediately, quiet pulse for meta */
.gx-col-loading-meta {
  margin-top: 0.7rem;
  height: 0.7rem;
  width: 11rem;
  max-width: 60%;
  border-radius: 999px;
  background: var(--gx-surface-2);
  position: relative;
  overflow: hidden;
}

.gx-col-loading-meta::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  animation: gx-col-pulse 1.6s infinite;
}

@keyframes gx-col-pulse { 100% { transform: translateX(100%); } }

/* ---------------- Phase 5.3: quiet segmented media filter ----------------
 * Reuses the existing .gx-tab pill (see css/shelves.css) for shape, type,
 * and focus behavior; only the active state gets the restrained amber
 * treatment (same tokens as the card My List state). Compact row under the
 * collection meta — never a toolbar, no animation of its own. */

.gx-col-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.9rem;
}

.gx-col-filter .gx-tab { min-height: 2.25rem; }

.gx-col-filter .gx-tab.active {
  color: var(--gx-accent-strong);
  border-color: var(--gx-accent-border);
  background: var(--gx-accent-soft);
}

/* ---------------- Phase 5.4: quiet pagination note (retry) ----------------
 * Sits in the #collection-more grid tail (spans full width). Same quiet
 * language as the empty states; the Retry control reuses .gx-tab. Static —
 * nothing here animates, so reduced-motion needs no override. */

.gx-more-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  font-size: 0.83rem;
  color: var(--gx-text-dim);
}

/* ---------------- responsive ---------------- */

@media (max-width: 640px) {
  .gx-col { margin-top: 1rem; }
  .gx-col-body { padding: 1.5rem 1.1rem; gap: 0.85rem; }
  .gx-col-cover { width: 3.5rem; height: 5.25rem; }
  .gx-col-desc { font-size: 0.85rem; }
}

/* ---------------- reduced motion ---------------- */

@media (prefers-reduced-motion: reduce) {
  .gx-col-loading-meta::after { animation: none; }
}