/* /styles/gallery/gallery-sections.css
   ChoiceSpin — Gallery sections (v7 FULL-WIDTH GRIDS)
   - No section containers (no forum boxes)
   - Popular + Recent rows are grids (4 per row)
*/

.scg-sections{
  margin: 10px 0 0;
  width: 100%;
  display: grid;
  gap: 22px;
}

/* Section: remove the “container box” completely */
.scg-sec{
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.scg-sec__head{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;

  padding: 0 0 12px; /* keep breathing room */
  margin: 0;         /* no extra separators */
  border: 0;         /* ✅ remove lines */
}



.scg-sec__title{
  margin: 0;

  /* ✅ bigger + clearer */
  font-size: clamp(28px, 2.5vw, 38px);

  /* ✅ premium (not bold) */
  font-weight: 520;

  letter-spacing: -0.04em;
  line-height: 1.06;

  /* slightly higher contrast */
  color: color-mix(in oklab, var(--scg-text) 96%, transparent);
}


.scg-sec__sub{
  color: color-mix(in oklab, var(--scg-muted) 92%, transparent);
  font-size: 14px;
  line-height: 1.45;
  margin-top: 6px;
}


/* ✅ rows are now true grids (not scroll carousels) */
.scg-sec__row{
  display: grid;
  gap: 18px;

  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  overflow: visible;
}

/* Only 4 per row on desktop — no 3-col breakpoint */
@media (max-width: 1100px){
  .scg-sec__row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .scg-sec__row{ grid-template-columns: 1fr; }
}

.scg-sec__empty{
  color: var(--scg-muted);
  font-size: 13px;
  padding: 10px 0 0;
}

/* Load more button area (your HTML has it in the head for Recent) */
.scg-sec__actions{
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

.scg-sec__btn{
  height: 44px;
  padding: 0 14px;

  border-radius: 14px;
  border: 1px solid var(--scg-hair);
  background: transparent;
  color: var(--scg-text);

  font-weight: 950;
  letter-spacing: -0.01em;
  cursor: pointer;
}
/* secondary button for "Load less" */
.scg-sec__btn--ghost{
  background: transparent;
  border: 1px solid var(--g-hair-2, rgba(255,255,255,.10));
}
html[data-theme="light"] .scg-sec__btn--ghost{
  border-color: rgba(0,0,0,.12);
}

.scg-sec__btn:hover{
  background: color-mix(in oklab, var(--scg-surface) 84%, transparent);
}

.scg-sec__btn:disabled{
  opacity: .55;
  cursor: not-allowed;
}
.scg-sec__more{
  display: flex;
  justify-content: center;
  margin-top: 14px;
}