.movie-grid-widget { color: #fff; }
.movie-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.movie-item { background: transparent; }
.movie-link { display: block; color: inherit; text-decoration: none; }
.movie-thumb img { width: 100%; height: auto; display: block; border-radius: 4px; }
.movie-meta { padding-top: 10px; }
.movie-category { font-size: 12px; color: #2aa0ff; text-transform: uppercase; }
.movie-title { font-size: 16px; font-weight: 700; margin: 6px 0 0; color: #fff; }

/* Mobile layout: image left, text right */
@media (max-width: 767px) {
    .movie-grid { grid-template-columns: 1fr; gap: 18px; }
    .movie-item .movie-link { display: flex; gap: 12px; align-items: flex-start; }
    .movie-thumb { flex: 0 0 110px; max-width: 110px; }
    .movie-thumb img { width: 100%; height: auto; }
    .movie-meta { padding: 0; }
}

/* Desktop: image on top (default) - to match the provided desktop screenshot */
@media (min-width: 768px) {
    .movie-grid { grid-template-columns: repeat(4,1fr); }
    .movie-item .movie-link { display: block; }
    .movie-thumb { width: 100%; }
}

 Pagination simple styling 
.movie-pagination { margin-top: 30px; align-items: center;}
.movie-pagination ul { list-style: none; padding: 0; display:flex; gap:8px; flex-wrap:wrap; }
.movie-pagination li { }
.movie-pagination a { padding:6px 10px; background:#222; color:#fff; text-decoration:none; border-radius:3px; }
.movie-pagination .current { background:#0d6efd; color:#fff; }





/* ===== Added responsive rules: tablet and mobile ===== */
/* Tablet: 768px — 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  .movie-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }
  .movie-meta { padding-top: 8px !important; }
  .movie-thumb img { height: auto; max-height: 220px; object-fit: cover; }
}

/* Small tablet / large phones: 600px — 767px */
@media (min-width: 600px) and (max-width: 767px) {
  .movie-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .movie-thumb img { max-height: 200px; object-fit: cover; }
}

/* Mobile: under 599px (kept as fallback if not already present) */
@media (max-width: 599px) {
  .movie-grid {
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 12px !important;
  }
  .movie-meta { padding-top: 6px !important; font-size: 14px; }
  .movie-thumb img { width: 100%; height: auto; max-height: 180px; object-fit: cover; }
}
/* ===== End responsive rules ===== */