/*
 * PrimeFlix 3.64.99 · P259 · Web Mobile Rebuild · Phase 8/8
 * FINAL RESPONSIVE QA / UNIFICATION / LEGACY-CONFLICT CLOSURE
 *
 * Scope: PrimeFlix responsive Web only. No Mobile App/Desktop App selectors.
 * The footer remains owned by footer-unified-p251.css; P259 deliberately does
 * not restyle it so every route keeps one footer authority.
 */

@media (max-width:820px){
  html:has(body.pf-web-mobile-phase-8){
    scroll-padding-top:calc(var(--pfm-header-total,64px) + 14px);
    overflow-x:clip;
  }

  body.pf-web-mobile-phase-8{
    --pfm-control-min:44px;
    --pfm-readable-small:12px;
    --pfm-readable-meta:11.5px;
    --pfm-final-section-space:clamp(32px,7.5vw,52px);
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:clip!important;
  }

  @supports not (overflow:clip){
    html:has(body.pf-web-mobile-phase-8),
    body.pf-web-mobile-phase-8{overflow-x:hidden!important}
  }

  /* ---------------------------------------------------------------------
     1. TEXT FLOW — no staircase words / one-letter columns.
     --------------------------------------------------------------------- */
  body.pf-web-mobile-phase-8 :is(
    .pf-uhero-title,.pf-sect-title,
    .pfg-explorer-title,.pfg-results-title,.pfex-hero h1,
    .pfn-title,.pfn-card h2,.pfn-card h3,
    .pf-profile-name,.pfpub-identity h1,
    .pfca-hero h1,.pfca-card h2,
    .pfav-page__hero h1,.pfav-card h3,
    .pfcinema-hero h1,.pfcinema-focus h3,.pfcinema-up h3,
    .pflegal-hero h1,.pflegal-body h2,.pflegal-body h3,
    .pf-p249-discovery-bridge__copy h2
  ){
    max-inline-size:100%!important;
    min-inline-size:0!important;
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    hyphens:none!important;
    text-wrap:pretty;
  }

  body.pf-web-mobile-phase-8 :is(
    .pf-uhero-copy,.pf-uhero-content,.pf-sect-head,
    .pfex-hero>div,.pfex-filter-top>div,
    .pfn-card,.pfn-card-body,.pfn-panel,
    .pf-profile-info,.pf-profile-content,.pfpub-identity,
    .pfca-card,.pfav-card__body,.pfcinema-focus,.pflegal-body
  ){
    min-width:0!important;
    max-width:100%!important;
  }

  /* Long machine-like values may break; ordinary words must not. */
  body.pf-web-mobile-phase-8 :is(
    .pfn-detail-val,.pfn-detail-val a,.pfmd-dl dd,
    .pf-profile-email,.pflegal-body a
  ){
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }

  /* ---------------------------------------------------------------------
     2. READABILITY FLOOR — old 6–10px labels cannot leak back in.
     --------------------------------------------------------------------- */
  body.pf-web-mobile-phase-8 :is(
    .pf-uhero-metric span,.pf10c-badge,.pf10c-meta,
    .pf-view-count-badge,.pf-card-platform,.pf-countdown-badge,
    .pfchips-wrap::before,.pfex-hero>div>span,.pfex-filter-top span,
    .pfn-detail-lbl,.pfn-crew-role,.pfn-ep-num,.pfn-ep-meta,
    .pfn-vid-meta,.pfn-rel-meta,.pfmd-head-chips span,.pfmd-dl dt,
    .p258-profile-nav small,.pfca-toolbar>div>span,
    .pfav-card__official,.pfav-card__meta b,.pfav-card__meta span,.pfav-card__meta i,
    .pf-plans-badge,.pf-popular-badge,.pf-current-badge,.pf-plan-visual-tier,
    .pf-tlv2-ch-badge,.pf-tlv2-hud-meta
  ){
    font-size:var(--pfm-readable-meta)!important;
    line-height:1.25!important;
  }

  body.pf-web-mobile-phase-8 :is(
    .pf-sect-sub,.pfn-ep-ov,.pfav-card__body>p,
    .pfcinema-movie span,.pfcinema-movie p,
    .pfpub-card small,.pfsc-card small
  ){
    font-size:max(var(--pfm-readable-small),.76rem)!important;
    line-height:1.42!important;
  }

  /* ---------------------------------------------------------------------
     3. TOUCH TARGETS — preserve Web density without App-like tiny controls.
     --------------------------------------------------------------------- */
  body.pf-web-mobile-phase-8 :is(
    button,.button,[role="button"],
    .pf-btn-primary,.pf-btn-secondary,
    .pf-uhero-btn-play,.pf-uhero-btn-info,.pf-uhero-btn-trailer,
    .pf-webmob-menu-link,.pf-webmob-chip,.pf-webmob-utility,
    .pfn-tab,.pfn-more-toggle,.pfn-action,
    .pf-profile-hero-action,.pfpub-actions a,.pfpub-actions button,
    .pf-plan-cta,.pf-faq-q,.auth-tab,.btn-social,.btn-auth-submit,
    .pfcinema-tools button,.pfcinema-head>a
  ){
    min-height:var(--pfm-control-min)!important;
  }

  body.pf-web-mobile-phase-8 :is(
    button,.button,[role="button"],
    .pf-webmob-menu-link,.pfn-tab,.pf-profile-hero-action,
    .pf-plan-cta,.auth-tab,.btn-social,.btn-auth-submit
  ){
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
  }

  /* ---------------------------------------------------------------------
     4. SECTION RHYTHM — pages read as one Web product, not stacked widgets.
     --------------------------------------------------------------------- */
  body.pf-web-mobile-phase-8 :is(
    .pf-sect,.pfde-section,.pfn-panel,.pf-profile-content,
    .pfca-section,.pfav-page__section,.pfcinema-section,.pflegal-section
  ){
    scroll-margin-top:calc(var(--pfm-header-total,64px) + 18px);
  }

  body.pf-web-mobile-phase-8 :is(
    .pf-search-results-grid,.pfg-results-grid,.pfex-grid,
    .pfn-details,.pfn-crew-grid,.pfn-collection-grid,.pfn-rel-grid,
    .pfce-profile-grid,.pfwl-grid,.pfpub-grid,.pfsc-grid,
    .pfav-page__grid,.pfcinema-cinemas,.pfcinema-upcoming
  ) > *{
    min-width:0!important;
  }

  /* ---------------------------------------------------------------------
     5. P249 DISCOVERY BRIDGE — final mobile treatment.
     This section sits before the one global footer on many secondary pages.
     --------------------------------------------------------------------- */
  body.pf-web-mobile-phase-8 .pf-p249-discovery-bridge{
    width:auto!important;
    max-width:none!important;
    margin:var(--pfm-final-section-space) var(--pfm-gutter,16px) 0!important;
    padding:22px 0 4px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    border:0!important;
    background:transparent!important;
  }
  body.pf-web-mobile-phase-8 .pf-p249-discovery-bridge::after{
    left:0!important;
    right:0!important;
    background:linear-gradient(90deg,#8b5cf6,rgba(192,132,252,.28),transparent 78%)!important;
  }
  body.pf-web-mobile-phase-8 .pf-p249-discovery-bridge__copy>span{
    margin-bottom:8px!important;
    font-size:11.5px!important;
    line-height:1.2!important;
    letter-spacing:.10em!important;
  }
  body.pf-web-mobile-phase-8 .pf-p249-discovery-bridge__copy h2{
    margin:0!important;
    max-width:19ch!important;
    font-size:clamp(24px,7.4vw,34px)!important;
    line-height:1.07!important;
    letter-spacing:-.03em!important;
  }
  body.pf-web-mobile-phase-8 .pf-p249-discovery-bridge__copy p{
    margin:10px 0 0!important;
    max-width:55ch!important;
    font-size:14px!important;
    line-height:1.55!important;
  }
  body.pf-web-mobile-phase-8 .pf-p249-discovery-bridge__links{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  body.pf-web-mobile-phase-8 .pf-p249-discovery-bridge__links a{
    min-width:0!important;
    min-height:66px!important;
    padding:11px 13px!important;
    grid-template-columns:minmax(0,1fr) 22px!important;
    border-radius:14px!important;
  }
  body.pf-web-mobile-phase-8 .pf-p249-discovery-bridge__links b{
    font-size:14px!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  body.pf-web-mobile-phase-8 .pf-p249-discovery-bridge__links small{
    font-size:12px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  /* ---------------------------------------------------------------------
     6. MEDIA / TABLE / EMBED SAFETY.
     --------------------------------------------------------------------- */
  body.pf-web-mobile-phase-8 :is(img,video,iframe,canvas){
    max-width:100%!important;
  }
  body.pf-web-mobile-phase-8 iframe{border:0}
  body.pf-web-mobile-phase-8 :is(.pf-compare-wrap,.pfmd-table-wrap,.pflegal-table-wrap){
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* Native rails can scroll horizontally; the document itself cannot. */
  body.pf-web-mobile-phase-8 :is(
    .pf10c-slider,.pf10-slider,.pf10-continue-slider,
    .pfchips-slider,.pfn-tabs,.pfca-toolbar>div,
    .pfcinema-now,.pf-tlv2-groups
  ){
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }

  /* ---------------------------------------------------------------------
     7. OVERLAYS / VIEWPORT HYGIENE.
     --------------------------------------------------------------------- */
  body.pf-web-mobile-phase-8 .pf-webmob-menu-overlay,
  body.pf-web-mobile-phase-8 .pf-mob-srch-overlay{
    max-width:100vw!important;
  }
  body.pf-web-mobile-phase-8 .pf-webmob-menu-panel{
    max-height:100dvh!important;
    max-height:100svh!important;
  }
  body.pf-web-mobile-phase-8 :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    font-size:16px!important;
  }
}

/* Very narrow phones: change composition before reducing type. */
@media (max-width:389px){
  body.pf-web-mobile-phase-8{
    --pfm-gutter:14px;
    --pfm-readable-small:12px;
    --pfm-readable-meta:11.5px;
  }
  body.pf-web-mobile-phase-8 .pf-p249-discovery-bridge{margin-inline:14px!important}
  body.pf-web-mobile-phase-8 :is(.pfpub-actions,.pf-profile-hero-actions){column-gap:7px!important}
}

/* Tablet portrait / large mobile: keep mobile IA, allow more breathing room. */
@media (min-width:600px) and (max-width:820px){
  body.pf-web-mobile-phase-8{
    --pfm-gutter:clamp(24px,4vw,32px);
  }
  body.pf-web-mobile-phase-8 .pf-p249-discovery-bridge__links{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* Short landscape phones: do not force portrait hero heights or viewport traps. */
@media (max-width:820px) and (orientation:landscape) and (max-height:560px){
  body.pf-web-mobile-phase-8 :is(#pf-uhero-home,.pf-uhero.pf-hero-catalog-contract){
    min-height:0!important;
    height:auto!important;
  }
  body.pf-web-mobile-phase-8 .pf-webmob-menu-panel{
    padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.pf-web-mobile-phase-8 *,
  body.pf-web-mobile-phase-8 *::before,
  body.pf-web-mobile-phase-8 *::after{
    scroll-behavior:auto!important;
  }
}