/*
 * PrimeFlix 3.64.92 · P252 · Web Mobile Rebuild · Phase 1/8
 * FOUNDATION / RESPONSIVE TYPOGRAPHY / FLOW CONTRACT
 *
 * IMPORTANT:
 * - Responsive Web only. It never targets Mobile App or Desktop App surfaces.
 * - This is not a "shrink desktop" layer. It establishes a mobile-first reading,
 *   spacing and flow contract that later P252 phases build on.
 * - P250 remains available for Desktop Web (including Home poster parity), while
 *   this layer overrides its mobile geometry where that geometry was too dense.
 */

@media (max-width:820px){
  html:has(body.pf-web-mobile-rebuild-p252){
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    overflow-x:clip;
    background:#050507;
  }

  body.pf-web-mobile-rebuild-p252{
    --pfm-page:#050507;
    --pfm-surface:#0b0b10;
    --pfm-surface-raised:#111118;
    --pfm-border:rgba(255,255,255,.085);
    --pfm-border-strong:rgba(255,255,255,.14);
    --pfm-text:#f8f7fb;
    --pfm-copy:rgba(248,247,251,.74);
    --pfm-muted:rgba(248,247,251,.56);
    --pfm-faint:rgba(248,247,251,.40);
    --pfm-accent:var(--pf-accent,#7c3aed);
    --pfm-gutter:clamp(16px,4.5vw,22px);
    --pfm-section-gap:clamp(30px,8vw,44px);
    --pfm-card-gap:clamp(10px,3vw,14px);
    --pfm-radius-sm:12px;
    --pfm-radius:16px;
    --pfm-radius-lg:22px;
    --pfm-title-1:clamp(2rem,9.6vw,3.15rem);
    --pfm-title-2:clamp(1.45rem,6.2vw,2rem);
    --pfm-title-3:clamp(1.08rem,4.6vw,1.35rem);
    --pfm-body:clamp(.91rem,3.65vw,1rem);
    --pfm-small:clamp(.78rem,3.15vw,.88rem);
    --pfm-micro:clamp(.70rem,2.8vw,.78rem);
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    overflow-x:clip!important;
    background:var(--pfm-page)!important;
    color:var(--pfm-text)!important;
    font-size:16px!important;
    line-height:1.45!important;
    word-spacing:normal!important;
    letter-spacing:normal;
  }

  @supports not (overflow:clip){
    body.pf-web-mobile-rebuild-p252{overflow-x:hidden!important}
  }

  /* -----------------------------------------------------------------------
     1. DOCUMENT FLOW
     Every ordinary Web region is allowed to use the real viewport width.
     No inherited desktop min-width can create a squeezed text column.
     ----------------------------------------------------------------------- */
  body.pf-web-mobile-rebuild-p252 #pf-main,
  body.pf-web-mobile-rebuild-p252 main,
  body.pf-web-mobile-rebuild-p252 .site-main,
  body.pf-web-mobile-rebuild-p252 .pf-page,
  body.pf-web-mobile-rebuild-p252 .pf-container,
  body.pf-web-mobile-rebuild-p252 :is(
    .pfsr-page,.pfsr-wrap,.pfsr-shell,
    .pfg-explorer,.pfg-results-body,
    .pfex,.pfex-shell,
    .pfn-main,.pfn-panels,.pfn-panel,
    .pf-profile-page,.pf-profile-content,.pf-tab-panel,
    .pf-plans-page,
    .pfca-page,.pfav-page,.pfcinema-page,
    .pflegal-page,.pflegal-wrap
  ){
    min-width:0!important;
    max-width:100%!important;
  }

  body.pf-web-mobile-rebuild-p252 .pf-container{
    width:100%!important;
    padding-inline:var(--pfm-gutter)!important;
  }

  body.pf-web-mobile-rebuild-p252 :is(section,article,header,footer,nav,aside,form,fieldset,div){
    min-inline-size:0;
  }

  body.pf-web-mobile-rebuild-p252 :is(img,video,iframe,canvas,svg){
    max-inline-size:100%;
  }

  /* Desktop fixed widths should never squeeze their sibling copy on mobile. */
  body.pf-web-mobile-rebuild-p252 :is(
    .pfde-head,.pfde-inline-head,.pfde-section,
    .pfsr-header,.pfsr-body,
    .pfg-explorer-header,.pfg-results-header,
    .pfex-hero,.pfex-filter,
    .pfn-card,.pfn-card-head,.pfn-card-body,
    .pf-profile-info,.pf-profile-stats,
    .pfca-hero,.pfca-stream-head,
    .pfav-page__hero,
    .pfcinema-hero,.pfcinema-head,.pfcinema-tools,
    .pflegal-hero,.pflegal-body
  ){
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  /* -----------------------------------------------------------------------
     2. TYPOGRAPHY CONTRACT
     The previous P250 layer used 6.5–10px copy in many places. Mobile Web
     now uses a readable scale and normal horizontal word flow.
     ----------------------------------------------------------------------- */
  body.pf-web-mobile-rebuild-p252 :is(
    h1,h2,h3,h4,h5,h6,
    p,li,dt,dd,label,legend,
    .pf-sect-title,.pf-sect-sub,
    .pfde-head h2,.pfde-head p,.pfde-inline-head h2,.pfde-inline-head p,
    .pfsr-header h1,.pfg-explorer-title,.pfg-results-title,
    .pfex-hero h1,.pfex-hero p,
    .pfn-title,.pfn-tagline,.pfn-overview,
    .pf-profile-name,.pf-profile-handle,.pf-profile-email,.pf-profile-bio,
    .pfca-hero h1,.pfca-hero p,.pfca-stream-head h2,.pfca-card h2,.pfca-card p,
    .pfav-page__hero h1,.pfav-page__hero p,
    .pfcinema-hero h1,.pfcinema-hero p,.pfcinema-head h2,.pfcinema-head p,
    .pf-tv-live-heading h1,.pf-tv-live-heading p,
    .pflegal-hero h1,.pflegal-hero p,.pflegal-body
  ){
    writing-mode:horizontal-tb!important;
    text-orientation:mixed!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
  }

  body.pf-web-mobile-rebuild-p252 :is(h1,h2,h3,h4,h5,h6){
    margin-block-start:0;
    color:var(--pfm-text);
    font-family:var(--pf-font-display,var(--pf-font-body,'Roboto',Arial,sans-serif));
    font-weight:800;
    text-wrap:pretty;
  }

  body.pf-web-mobile-rebuild-p252 :is(p,li,dd){
    text-wrap:pretty;
  }

  body.pf-web-mobile-rebuild-p252 :is(p,.pf-sect-sub){
    color:var(--pfm-copy);
  }

  /* Page-level headline sizes. No arbitrary max-width:12ch that causes stair-step words. */
  body.pf-web-mobile-rebuild-p252 :is(
    .pfg-explorer-title,.pfex-hero h1,
    .pfca-hero h1,.pfav-page__hero h1,.pfcinema-hero h1,.pflegal-hero h1
  ){
    width:auto!important;
    max-width:min(100%,18ch)!important;
    font-size:var(--pfm-title-1)!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
  }

  body.pf-web-mobile-rebuild-p252 :is(
    .pf-sect-title,.pfde-head h2,.pfde-inline-head h2,
    .pfg-results-title,.pfca-stream-head h2,.pfcinema-head h2
  ){
    max-width:100%!important;
    font-size:var(--pfm-title-2)!important;
    line-height:1.12!important;
    letter-spacing:-.025em!important;
  }

  body.pf-web-mobile-rebuild-p252 :is(
    .pf-sect-sub,.pfde-head p,.pfde-inline-head p,
    .pfg-explorer-sub,.pfex-hero p,.pfn-tagline,
    .pfca-hero p,.pfca-card p,.pfav-page__hero p,
    .pfcinema-hero p,.pfcinema-head p,.pflegal-hero p
  ){
    max-width:60ch!important;
    font-size:var(--pfm-body)!important;
    line-height:1.58!important;
    letter-spacing:0!important;
  }

  body.pf-web-mobile-rebuild-p252 :is(
    small,.pf-stat-label,.pf10c-meta,.pf10c-badge,
    .pfn-chip,.pfg-card-tags,.pfcinema-privacy,.pfcinema-source
  ){
    font-size:var(--pfm-micro)!important;
    line-height:1.35!important;
  }

  /* -----------------------------------------------------------------------
     3. FLEX / GRID SAFETY
     Text can wrap by words, but components cannot collapse into 20px columns.
     ----------------------------------------------------------------------- */
  body.pf-web-mobile-rebuild-p252 :is(
    .pf-sect-head,.pfde-head,.pfde-inline-head,.pfg-results-title-row,
    .pfn-card-head,.pf-profile-info,.pf-profile-stats,
    .pfca-stream-head,.pfcinema-head
  ) > *{
    min-width:0!important;
  }

  body.pf-web-mobile-rebuild-p252 :is(
    .pfde-head,.pfde-inline-head,.pfg-results-title-row,.pfca-stream-head,.pfcinema-head
  ){
    align-items:flex-start!important;
    gap:10px!important;
  }

  body.pf-web-mobile-rebuild-p252 :is(
    .pfde-head,.pfde-inline-head,.pfg-results-title-row,.pfca-stream-head,.pfcinema-head
  ) > :first-child{
    flex:1 1 auto!important;
    width:auto!important;
  }

  /* Controls may wrap as whole controls; their labels must not split letter-by-letter. */
  body.pf-web-mobile-rebuild-p252 :is(
    button,.button,[role="button"],
    .pf-btn-primary,.pf-btn-secondary,
    .pf-sect-nav a,.pfde-head>a,.pfde-inline-head>a,
    .pfsr-chip,.pfg-pag-btn,.pfex-type button,.pfn-tab,
    .pf-profile-tab,.pfca-toolbar a,.pfav-format-rail>*,.pfcinema-head>a
  ){
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
  }

  body.pf-web-mobile-rebuild-p252 :is(button,.button,[role="button"],input,select,textarea){
    max-width:100%;
  }

  /* -----------------------------------------------------------------------
     4. MOBILE READING RHYTHM
     A Web page needs vertical hierarchy, not app-density everywhere.
     ----------------------------------------------------------------------- */
  body.pf-web-mobile-rebuild-p252 :is(
    .pf-sect,.pfde-section,
    .pfsr-body,.pfg-explorer,.pfex-shell,
    .pfn-panel,.pf-profile-content,
    .pfca-section,.pfav-page__section,.pfcinema-section,.pflegal-section
  ){
    min-width:0!important;
  }

  body.pf-web-mobile-rebuild-p252 :is(.pfde-section,.pfn-panel,.pf-profile-content){
    scroll-margin-top:84px;
  }

  body.pf-web-mobile-rebuild-p252 :is(
    .pfde-grid,.pfde-pulse__grid,.pfde-activity-grid,
    .pfsr-grid,.pfg-results-grid,.pfex-grid,
    .pfn-details,.pfn-rel-grid,.pfn-crew-grid,.pfn-collection-grid,.pfn-source-grid,
    .pf-cover-grid,.pf-plans-grid,.pfca-box__grid,.pfca-feed,
    .pfav-page__grid,.pfcinema-cinemas,.pfcinema-upcoming,.pflegal-grid
  ){
    min-width:0!important;
    max-width:100%!important;
  }

  /* Dense two-column information areas become one column on genuinely narrow phones.
     Poster/catalog grids are deliberately excluded; their visual treatment is Phase 4/5. */
  @media (max-width:389px){
    body.pf-web-mobile-rebuild-p252 :is(
      .pfn-details,.pfn-crew-grid,.pfn-collection-grid,.pfn-source-grid,
      .pf-cover-grid,.pf-plans-grid,.pfde-metrics,.pflegal-grid
    ){
      grid-template-columns:minmax(0,1fr)!important;
    }
  }

  /* -----------------------------------------------------------------------
     5. FORMS
     Native mobile-friendly sizing without forcing desktop forms into columns.
     ----------------------------------------------------------------------- */
  body.pf-web-mobile-rebuild-p252 :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
    min-width:0!important;
    width:100%;
    font-size:16px!important;
    line-height:1.35!important;
  }

  body.pf-web-mobile-rebuild-p252 :is(.pf-form-group,.pfex-fields,.pfg-filters,.pfcinema-tools){
    min-width:0!important;
  }

  body.pf-web-mobile-rebuild-p252 textarea{
    resize:vertical;
  }

  /* -----------------------------------------------------------------------
     6. MEDIA + LONG CONTENT SAFETY
     URLs/user text may wrap; normal UI words may not be chopped into letters.
     ----------------------------------------------------------------------- */
  body.pf-web-mobile-rebuild-p252 :is(.pf-profile-bio,.pflegal-body,.pfde-review-card p,.pfca-card p){
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }

  body.pf-web-mobile-rebuild-p252 :is(code,pre){
    max-width:100%!important;
    overflow-x:auto!important;
    white-space:pre!important;
  }

  /* -----------------------------------------------------------------------
     7. REMOVE P250'S MOST APP-LIKE DENSITY FROM THE FOUNDATION
     Later phases redesign the controls themselves. Here we only prevent tiny text.
     ----------------------------------------------------------------------- */
  body.pf-web-mobile-rebuild-p252 .pfmw-app-fab__copy small{font-size:11px!important;line-height:1.2!important}
  body.pf-web-mobile-rebuild-p252 .pfmw-app-fab__copy strong{font-size:13px!important;line-height:1.2!important}
  body.pf-web-mobile-rebuild-p252 .pf-mobile-nav-discovery .pf-mobile-nav-item{font-size:11px!important;line-height:1.15!important}
  body.pf-web-mobile-rebuild-p252 .pf-uhero .pf-uhero-metric span{font-size:11px!important;line-height:1.15!important}
  body.pf-web-mobile-rebuild-p252 .pf-uhero .pf-uhero-metric strong{font-size:13px!important;line-height:1.2!important}
  body.pf-web-mobile-rebuild-p252 .pf-uhero :is(.pf-uhero-kicker,.pf-uhero-pill,.pf-uhero-genre){font-size:11px!important;line-height:1.2!important}
  body.pf-web-mobile-rebuild-p252 .pf-sect-sub{font-size:14px!important;line-height:1.45!important}
  body.pf-web-mobile-rebuild-p252 :is(.pf10c-title,.pfg-item-title,.pfcinema-movie h3){font-size:13px!important;line-height:1.28!important}

  /* Never allow decorative all-caps tracking to force one-letter-per-line. */
  body.pf-web-mobile-rebuild-p252 :is(
    .pf-uhero-kicker,.pf10c-badge,.pfde-head>div>span,.pfde-inline-head>div>span,
    .pf-stat-label,.pfn-chip,.pfg-card-tags
  ){
    max-width:100%!important;
    letter-spacing:.055em!important;
    white-space:normal!important;
  }

  /* -----------------------------------------------------------------------
     8. ACCESSIBILITY / INTERACTION BASE
     ----------------------------------------------------------------------- */
  body.pf-web-mobile-rebuild-p252 :is(a,button,input,select,textarea):focus-visible{
    outline:2px solid #c4b5fd!important;
    outline-offset:3px!important;
  }

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

/* Tablet-sized responsive Web remains Web, not a stretched phone. */
@media (min-width:560px) and (max-width:820px){
  body.pf-web-mobile-rebuild-p252{
    --pfm-gutter:clamp(22px,4vw,30px);
    --pfm-section-gap:42px;
  }
}