/*
 * NR main-column layout — single source of truth for horizontal padding and content width.
 * Linked from shared layouts (_Layout, _Layout1, _Gallery, _HomeLayout, …). Do not repeat these
 * values in page CustomCSS or homelistpage/movie-review except for non-layout concerns.
 */

:root {
  --nr-content-max-width: 720px;
  --nr-content-padding-x: clamp(12px, 4vw, 28px);
  --nr-content-padding-x-article: clamp(12px, 4vw, 40px);
  --nr-content-padding-x-article-sm: clamp(10px, 3.5vw, 20px);
  --nr-detail-mobile-outer-x: max(32px, env(safe-area-inset-left, 0px));
  --nr-detail-mobile-outer-x-right: max(32px, env(safe-area-inset-right, 0px));
}

/* Movie tabbed flows: MoviePage, MovieReviewList, MovieVideoList, … */
.movie-reviewlist-detail {
  padding-left: var(--nr-content-padding-x);
  padding-right: var(--nr-content-padding-x);
  padding-bottom: 2rem;
  box-sizing: border-box;
}

/* Single review article */
.movie-review-detail.detail {
  max-width: var(--nr-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--nr-content-padding-x-article);
  padding-right: var(--nr-content-padding-x-article);
  padding-bottom: 2rem;
  box-sizing: border-box;
}

@media (max-width: 640.98px) {
  .movie-review-detail.detail {
    padding-left: var(--nr-content-padding-x-article-sm);
    padding-right: var(--nr-content-padding-x-article-sm);
  }
}

/*
 * Mobile: .detailSectionInner card shell — outer horizontal inset (showtimes, news, generic detail).
 * Movie flows with .movie-reviewlist-detail / .movie-review-detail handle their own column padding;
 * clear outer sides to avoid double padding and align .tabs (see below).
 */
@media (max-width: 767.98px) {
  .detailSectionInner {
    padding-left: var(--nr-detail-mobile-outer-x) !important;
    padding-right: var(--nr-detail-mobile-outer-x-right) !important;
    padding-top: 12px !important;
    padding-bottom: 16px !important;
    box-sizing: border-box !important;
  }

  .detailSectionInner:has(.movie-reviewlist-detail),
  .detailSectionInner:has(.movie-review-detail) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .detailSectionInner:has(.movie-reviewlist-detail) > .tabs {
    padding-left: max(var(--nr-content-padding-x), env(safe-area-inset-left, 0px));
    padding-right: max(var(--nr-content-padding-x), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }

  .detailSectionInner:has(.movie-review-detail) > .tabs {
    padding-left: max(var(--nr-content-padding-x-article), env(safe-area-inset-left, 0px));
    padding-right: max(var(--nr-content-padding-x-article), env(safe-area-inset-right, 0px));
    box-sizing: border-box;
  }
}