/* Поверх Bulma (тема dark включается через [data-theme=dark] в app.js).
   Здесь только то, чего нет в Bulma: плеер, сетка карточек, комментарии. */

.auth { max-width: 420px; margin: 0 auto; }

.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.video-card { display: grid; gap: 0.5rem; }
.video-card h3 { margin: 0; font-size: 1rem; }
.video-card a { color: inherit; text-decoration: none; }
.video-card a:hover h3 { color: hsl(217, 71%, 72%); }

.thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; background: #000; }


.comments { margin-top: 2rem; }
.comment { padding: 0.75rem 0; border-bottom: 1px solid hsl(221, 14%, 18%); }
.comment .author { color: hsl(217, 71%, 72%); font-weight: 600; }
.comment .meta { color: hsl(221, 8%, 55%); font-size: 0.85rem; }

.spinner { padding: 2rem; color: hsl(221, 8%, 55%); text-align: center; }
.error { padding: 1rem; color: hsl(350, 90%, 75%); background: hsl(350, 40%, 12%); border-radius: 6px; }

/* Мобильные мелочи: меньше вертикальных отступов у секции и подвала. */
@media screen and (max-width: 768px) {
	main.section { padding: 1.25rem 1rem; }
	.footer { padding: 1.5rem 1rem; }
	.buttons { flex-wrap: wrap; }
	.field.has-addons { flex-wrap: wrap; }
	.field.has-addons .control { flex-grow: 1; }
	.field.has-addons .button { width: 100%; }
	.preview-card .buttons .button { width: auto; }
}