/* ═══════════════════════════════════════
   2D EDITOR — page-specific styles
   Base theme + navbar/footer/page-hero come from css/styles.css; the
   .level-card / #feed / .status-card look for the community levels section
   below is reused from css/UGClevels.css (loaded before this file, so these
   overrides win). Only the section heading + column count are page-specific.
═══════════════════════════════════════ */

.editor-levels-section {
  margin: 0 auto;
  padding: 12px 20px 60px;
}

/* Desktop: break out of .page-content's 50rem cap so the 6-across thumbnails
   are ~168px — 50% bigger than the ~112px they get inside the 800px cap.
   1135px = 6 x 168 + 5 gaps of 18px + 2 x 20px padding; narrower screens keep
   a 20px margin each side. Centered with negative side margins (half the
   overflow each way), not left/transform, which left 8px of horizontal scroll. */
@media (min-width: 901px) {
  .editor-levels-section {
    --levels-w: min(1135px, 100vw - 40px);
    width: var(--levels-w);
    max-width: none;
    margin-left: calc((100% - var(--levels-w)) / 2);
    margin-right: calc((100% - var(--levels-w)) / 2);
  }
}

/* Matches UGClevels.css's .ugc-title exactly (same centered, stroked
   Luckiest Guy heading used across the site) — kept as its own rule since
   this page doesn't otherwise load the UGC page's layout. */
.editor-levels-title {
  font-family: 'Luckiest Guy', cursive;
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  color: var(--white);
  text-align: center;
  margin-bottom: 22px;
}

/* 6 across on a large screen, 3 on a tablet, 2 on phones — .level-card's own
   aspect-ratio: 1/1 (from UGClevels.css) keeps
   every card square as it shrinks. */
#feed {
  grid-template-columns: repeat(6, 1fr);
}

@media (max-width: 900px) {
  #feed {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  #feed {
    grid-template-columns: repeat(2, 1fr);
  }
}