/* ==========================================================================
   BuzzMelt — Responsive Styles
   All @media queries in one place.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   XLARGE — 1200px+  (wider poster grid + max-width container)
══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .bm-poster-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   MEDIUM — up to 991px  (tablet / collapsed nav)
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .bm-navbar { height: auto; min-height: var(--bm-header-height); }
  .bm-navbar .navbar-collapse {
    background: var(--bm-bg-alt);
    border-top: 1px solid var(--bm-border);
    padding: 0.875rem 0;
  }
  .bm-navbar .navbar-nav .nav-link::after { display: none; }

  /* Tighter sections on tablet */
  .bm-home-section,
  .bm-section { padding: 3rem 0; }

  /* Info rows: label column slightly narrower on tablet */
  .bm-info-row { grid-template-columns: 100px 1fr; }

  /* Hero showcase — tablet: 4 posters, shorter height */
  .bm-hero-showcase__wrap { height: 320px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   TABLET — 576px – 767px
══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 576px) {
  .bm-poster-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
}

@media (min-width: 768px) {
  .bm-poster-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — max 767px
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* Trailer: full-width on mobile, rounded corners removed */
  .bm-trailer-wrap                  { max-width: 100%; }
  .bm-trailer-facade,
  .bm-trailer-iframe                { border-radius: var(--bm-radius); }
  .bm-trailer-yt-icon               { width: 52px; height: 37px; }

  /* Sections */
  .bm-home-section,
  .bm-section        { padding: 2.5rem 0; }
  .bm-single-body    { padding-top: 2rem; padding-bottom: 2.5rem; }
  .bm-archive-content { padding: 2rem 0 3rem; }

  /* Poster grid */
  .bm-poster-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 0.875rem; }

  /* Section headings */
  .bm-section-heading-row { margin-bottom: 1.25rem; }

  /* Single hero — new IMDb-style */
  .bm-hero-single__media { grid-template-columns: 160px 1fr 80px; min-height: 240px; }
  .bm-hero-single__title { font-size: 1.625rem; }
  .bm-hero-score-value   { font-size: 1.15rem; }

  /* Hero showcase — mobile: featured left + 3 stacked right, all 4 visible */
  .bm-hero-showcase__wrap {
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    height: 280px;
    border-radius: 8px;
    gap: 4px;
  }
  .bm-hero-slot--featured { grid-row: 1 / 4; }
  .bm-hero-slot:not(.bm-hero-slot--featured) .bm-hero-slot__title { font-size: 0.72rem; }
  .bm-hero-slot:not(.bm-hero-slot--featured) .bm-hero-slot__rating { display: none; }

  /* Reviews grid → single column */
  .bm-reviews-grid { grid-template-columns: 1fr; }

  /* Top Articles → single column on mobile */
  .bm-top-articles { grid-template-columns: 1fr; }
  .bm-top-article-item:nth-child(odd) { padding-right: 0; border-right: none; }
  .bm-top-article-item:nth-child(even) { padding-left: 0; }
  .bm-top-article-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--bm-border); }
  .bm-top-article-item:last-child { border-bottom: none; }

  /* Reviews section */
  .bm-reviews-section                { padding: 2.5rem 0 3rem; }
  .bm-rating-display                 { flex-direction: column; gap: 1.25rem; padding: 1.25rem; }
  .bm-rating-display__summary        { flex-direction: row; min-width: 0; text-align: left; align-items: center; gap: 1rem; flex-wrap: wrap; }
  .bm-rating-display__bars           { min-width: 0; width: 100%; }
  .bm-review-form-panel              { padding: 1.25rem; }
  .bm-review-card                    { padding: 1.125rem; }
  .bm-review-card__header            { flex-wrap: wrap; gap: 0.625rem; }
  .bm-star-btn .bm-star              { font-size: 1.25rem; }

  /* Info panel — single column on mobile */
  .bm-info-panel { padding: 1.125rem 1.25rem; }
  .bm-info-row   { grid-template-columns: 95px 1fr; font-size: 0.8375rem; }

  /* Cast grid — tablet: tighter photos */
  .bm-cast-card__photo,
  .bm-cast-card__photo-placeholder { width: 62px; height: 62px; }
  .bm-cast-card__name { font-size: 0.8rem; }

  /* Single layout — stack sidebar below at tablet */
  .bm-single-layout { grid-template-columns: 1fr; }
  .bm-single-sidebar { position: static; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SMALL MOBILE — max 575px
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
  /* Poster grid: 3 fixed columns */
  .bm-poster-grid { grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
  /* Info rows: tighten label column on very small screens */
  .bm-info-row { grid-template-columns: 85px 1fr; font-size: 0.8125rem; }

  /* Sections */
  .bm-home-section,
  .bm-section { padding: 2rem 0; }

  /* Hero showcase — small mobile: tighter */
  .bm-hero-showcase__wrap { height: 220px; gap: 3px; }
  .bm-hero-slot:not(.bm-hero-slot--featured) .bm-hero-slot__title { font-size: 0.78rem; }

  /* Single hero: collapse to poster + player stacked, hide side panel */
  .bm-hero-single__media { grid-template-columns: 110px 1fr; min-height: 0; }
  .bm-hero-single__side  { display: none; }
  .bm-hero-single__score-block { display: none; }
  .bm-hero-single__top   { margin-bottom: 0.75rem; }

  /* Cast grid: single column on small mobile */
  .bm-cast-grid { grid-template-columns: 1fr; }
  .bm-cast-card__photo,
  .bm-cast-card__photo-placeholder { width: 56px; height: 56px; }

  /* Crew row: tighter columns */
  .bm-crew-row { grid-template-columns: 90px 1fr; gap: 0.75rem; }

  /* Review form */
  .bm-review-form-wrap { padding: 1.25rem; }

  /* Archive header */
  .bm-archive-header { padding: 1.75rem 0 1.25rem; }

  /* Genre pills smaller */
  .bm-genre-pill { padding: 0.25rem 0.625rem; font-size: 0.75rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ALL RATINGS PAGE — RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
  .bm-all-ratings-header { flex-direction: row; gap: 1rem; }
  .bm-all-ratings-header__poster { width: 44px; height: 66px; }
  .bm-all-ratings-header__title { font-size: 1rem; }
  .bm-all-ratings-header__meta { gap: 0.5rem; font-size: 0.8rem; }
  .bm-all-ratings-breadcrumb { font-size: 0.78rem; }
  .bm-page-btn { min-width: 34px; height: 34px; font-size: 0.8rem; }
  .bm-view-all-btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN BAR OFFSET
══════════════════════════════════════════════════════════════════════════ */
.admin-bar .bm-header      { top: 32px; }
.admin-bar .bm-filters-bar { top: calc(var(--bm-header-height) + 32px); }

@media (max-width: 782px) {
  .admin-bar .bm-header      { top: 46px; }
  .admin-bar .bm-filters-bar { top: calc(var(--bm-header-height) + 46px); }
}