/* =============================================
   CINEMASAVVY — GLOBAL RESPONSIVE CSS
   ============================================= */

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

.cs-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.cs-page-pad { padding: 32px 32px 60px; }
.cs-main-grid { display: grid; grid-template-columns: 1fr 268px; gap: 32px; }
.cs-genre-tags { padding: 18px 32px; display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid rgba(201,168,76,0.1); }
.cs-hero-stats { display: flex; gap: 32px; }
.cs-stats-bar { display: flex; border-top: 1px solid rgba(201,168,76,0.1); border-bottom: 1px solid rgba(201,168,76,0.1); }
.cs-footer-grid { display: grid; grid-template-columns: 1fr repeat(3, auto); gap: 40px; }
.cs-movie-header { display: flex; gap: 32px; }
.cs-movie-poster { flex-shrink: 0; margin-top: -120px; position: relative; z-index: 5; }
.cs-movie-info { flex: 1; padding-top: 20px; }
.cs-about-grid { display: grid; grid-template-columns: 1fr 280px; gap: 32px; }
.cs-watch-info { display: flex; gap: 24px; }
.cs-watch-sidebar { width: 280px; flex-shrink: 0; }

/* ============================================= */
/*  MOBILE — max-width: 768px                    */
/* ============================================= */
@media (max-width: 768px) {

  .cs-container, .cs-page-pad { padding: 16px 16px 40px; }
  .cs-genre-tags { padding: 12px 16px; }
  .cs-main-grid { grid-template-columns: 1fr; }
  .cs-hero-stats { gap: 16px; }
  .cs-about-grid { grid-template-columns: 1fr; }
  .cs-watch-info { flex-direction: column; }
  .cs-watch-sidebar { width: 100%; }

  .cs-stats-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .cs-stats-bar > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(201,168,76,0.1);
  }
  .cs-stats-bar > div:nth-child(odd) {
    border-right: 1px solid rgba(201,168,76,0.1) !important;
  }

  .cs-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }

  .cs-movie-header { flex-direction: column; gap: 16px; }
  .cs-movie-poster { margin-top: -80px; align-self: center; }
  .cs-movie-poster > div { width: 140px !important; }
  .cs-movie-info { padding-top: 0; }

  .movies-row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .player-wrap { max-height: none !important; }
}

/* ============================================= */
/*  SMALL MOBILE — max-width: 480px              */
/* ============================================= */
@media (max-width: 480px) {
  .cs-footer-grid { grid-template-columns: 1fr; }
  .cs-hero-stats { gap: 12px; flex-wrap: wrap; justify-content: center; }
}