/*
 * YouTube Feed Pro — Social Wall Stylesheet
 */

/* ── Social wall grid ─────────────────────────────────────────────────────── */
.sbypro-social-wall {
  display: grid;
  grid-template-columns: repeat(var(--sbypro-sw-cols, 3), 1fr);
  gap: var(--sbypro-gap, 5px);
  /* Attempt native CSS masonry if available */
  grid-template-rows: masonry;
}

/* ── Items ────────────────────────────────────────────────────────────────── */
.sbypro-sw-item {
  grid-column: span 1;
  overflow: hidden;
}

/* Large items span 2 columns */
.sbypro-sw-item--large {
  grid-column: span 2;
}

/* Ensure the large item's thumbnail fills the space nicely */
.sbypro-sw-item--large .sbypro-thumb {
  aspect-ratio: 16 / 7;
}

/* ── Fallback for browsers without CSS masonry ────────────────────────────── */
@supports not (grid-template-rows: masonry) {
  .sbypro-social-wall {
    grid-auto-rows: auto;
  }
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sbypro-social-wall {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .sbypro-sw-item--large {
    grid-column: span 2;
  }
}

@media (max-width: 480px) {
  .sbypro-social-wall {
    grid-template-columns: 1fr !important;
  }

  .sbypro-sw-item--large {
    grid-column: span 1;
  }

  .sbypro-sw-item--large .sbypro-thumb {
    aspect-ratio: 16 / 9;
  }
}