/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body { font-family: system-ui, sans-serif; max-width: 1000px; margin: 0 auto; padding: 1.5rem; color: #222; }
header, .video { display: flex; gap: 1rem; align-items: center; }
header { justify-content: space-between; border-bottom: 1px solid #ddd; padding-bottom: 1rem; }
form { margin: 1rem 0; }
input, select, button { padding: .5rem; margin: .2rem; }
.video { padding: 1rem 0; border-bottom: 1px solid #ddd; }
.video h2 { font-size: 1.2rem; }
.video img { height: auto; }
.thumbnail-placeholder { width: 240px; padding: 2rem 0; background: #eee; text-align: center; flex-shrink: 0; }
@media (max-width: 600px) { header, .video { align-items: flex-start; flex-direction: column; } }

body { max-width: 1440px; background: #fafafa; }
header { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; }
.video { display: block; min-width: 0; padding: 0; border: 0; background: white; border-radius: .8rem; overflow: hidden; }
.video > div:last-child { padding: .8rem; }
.video img, .thumbnail-placeholder { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; height: auto; padding: 0; }
.thumbnail-placeholder { display: grid; place-items: center; }
.video h2 { margin: 0 0 .6rem; line-height: 1.35; overflow-wrap: anywhere; }
.video h2 a { color: inherit; text-decoration: none; }
.video h2 a:hover { text-decoration: underline; }
.video p { font-size: .9rem; margin: .5rem 0; }
.video form { display: inline-block; margin: .2rem 0; }
.video button { font-size: .8rem; margin: 0; padding: .4rem .55rem; }
.video details { margin-top: .65rem; }
summary { cursor: pointer; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; padding: 2rem 0; }
.pagination a { padding: .7rem 1rem; border: 1px solid #ccc; border-radius: .5rem; }
@media (max-width: 600px) { body { padding: .75rem; } }
.library-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.filter-field { display: inline-flex; align-items: center; gap: .25rem; }
.filter-field label { white-space: nowrap; }
h1 { font-size: clamp(1.4rem, 3vw, 2rem); }
.site-brand { font-weight: 700; color: inherit; text-decoration: none; }
.site-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #ddd; color: #555; font-size: .85rem; line-height: 1.5; }