/* Movie Grid — responsywna siatka plakatów z wyszukiwarką i sortowaniem. */

.movie-grid{--mg-accent:#c9a227;--mg-ink:#1c1c22;--mg-muted:#777;--mg-line:#e6e3da;
  font-family:inherit;max-width:1180px;margin:0 auto}

.movie-grid__bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  justify-content:space-between;margin-bottom:22px}
.movie-grid__search{flex:1;min-width:200px;border:1px solid var(--mg-line);border-radius:10px;
  padding:11px 14px;font:inherit;font-size:.95rem}
.movie-grid__search:focus{outline:none;border-color:var(--mg-accent)}
.movie-grid__sort,.movie-grid__filter{border:1px solid var(--mg-line);border-radius:10px;
  padding:11px 14px;font:inherit;font-size:.92rem;background:#fff;cursor:pointer}
.movie-grid__sort:focus,.movie-grid__filter:focus{outline:none;border-color:var(--mg-accent)}

.movie-grid__items{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:22px}

.movie-card{display:flex;flex-direction:column;gap:10px;animation:mg-in .4s ease both}
.movie-card__poster{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;
  background:#211f28;box-shadow:0 14px 30px -18px rgba(0,0,0,.55)}
.movie-card__poster img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.movie-card:hover .movie-card__poster img{transform:scale(1.06)}
.movie-card__noposter{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;
  align-items:center;justify-content:center;text-align:center;color:#cfc9bd;padding:14px;
  font-size:.85rem;background:linear-gradient(160deg,#2b2933,#1c1b22)}
.movie-card__noposter span{font-size:2rem}

.movie-card__imdb{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.78);color:#f5c518;
  font-weight:700;font-size:.74rem;padding:4px 9px;border-radius:6px;letter-spacing:.02em}

.movie-card__hover{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,26,.2),rgba(20,18,26,.92));
  color:#fff;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:16px;
  opacity:0;transition:opacity .3s ease}
.movie-card:hover .movie-card__hover,.movie-card:focus-within .movie-card__hover{opacity:1}
.movie-card__hover p{margin:0;font-size:.85rem;line-height:1.45}
.movie-card__hover a{color:var(--mg-accent);font-weight:700;font-size:.82rem;text-decoration:none}

.movie-card__body{display:flex;flex-direction:column;gap:5px}
.movie-card__title{margin:0;font-size:1rem;font-weight:600;line-height:1.3;color:var(--mg-ink)}
.movie-card__meta{display:flex;gap:10px;flex-wrap:wrap;font-size:.8rem;color:var(--mg-muted)}
.movie-card__genre{position:relative}
.movie-card__meta span+span::before{content:"·";position:absolute;left:-7px;color:var(--mg-line)}
.movie-card__rating{display:flex;align-items:center;gap:8px}
.movie-card__score{font-size:.78rem;color:var(--mg-muted);font-weight:600}

.mg-stars{display:inline-block;position:relative;font-family:Arial,sans-serif;font-size:15px;line-height:1;letter-spacing:1px}
.mg-stars::before{content:"★★★★★";color:#dcd6c7}
.mg-stars::after{content:"★★★★★";color:var(--mg-accent);position:absolute;left:0;top:0;
  width:var(--pct,0%);overflow:hidden;white-space:nowrap}

.movie-grid__none,.mg-empty{text-align:center;color:var(--mg-muted);padding:30px 0}
.movie-grid__count{text-align:center;color:var(--mg-muted);font-size:.85rem;margin-top:14px}
/* wyszukiwarka serwerowa */
.movie-grid__searchwrap{flex:1 1 240px;display:flex;gap:8px}
.movie-grid__searchwrap .movie-grid__search{flex:1;min-width:0;margin:0}
.movie-grid__searchbtn{background:var(--mg-accent);color:#fff;border:0;border-radius:10px;
  padding:0 20px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.movie-grid__searchbtn:hover{filter:brightness(1.06)}
.movie-grid__searchinfo{color:var(--mg-muted);font-size:.92rem;margin:0 0 18px}
.movie-grid__searchinfo a{color:var(--mg-accent)}

/* stronicowanie — duże, wygodne kafelki */
.movie-grid__pager{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:30px}
.mg-page{min-width:46px;height:46px;padding:0 12px;display:inline-flex;align-items:center;
  justify-content:center;border:1px solid var(--mg-line);border-radius:12px;color:var(--mg-ink);
  text-decoration:none;font-size:1rem;transition:background .15s,border-color .15s}
.mg-page:hover{border-color:var(--mg-accent);background:#faf6ea}
.mg-page.is-current{background:var(--mg-accent);border-color:var(--mg-accent);color:#fff;font-weight:600}
.mg-page.mg-nav{font-size:1.25rem}
.mg-ellipsis{color:var(--mg-muted);padding:0 2px}
@media (max-width:640px){
  .movie-grid__pager{gap:12px}
  .mg-page{min-width:52px;height:52px;font-size:1.05rem;border-radius:14px}
}

@keyframes mg-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  .movie-grid__items{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px}
  .movie-card__title{font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){.movie-card{animation:none}.movie-card__poster img{transition:none}}