/* ------------------------------------------------------------
   PG13 Shell Overrides (loaded last)
   Purpose: Desktop PG13 TikTok-style shell normalization
   marker: GGF_PG13_SHELL_OVERRIDES_BG_FIX_V1_20260108
------------------------------------------------------------- */

@media (min-width: 980px){

  /* 0) Never let the lane paint a solid dark canvas (it reads like a “stroke”) */
  html.ggf-pg13-shell .model-feed-swipe{
    background: transparent !important;
  }

  /* 1) Keep your chosen video column width */
  html.ggf-pg13-shell :is(#pg13-feed-stage, #ggf-pg13-feed-stage) .ggf-media{
    width: 540px !important;
    max-width: 540px !important;
    margin: 0 auto !important;

    /* “mat” behind letterbox so you can SEE edges */
    background: rgba(255,255,255,0.045) !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* 2) Letterbox standard (no crop) */
  html.ggf-pg13-shell :is(#pg13-feed-stage, #ggf-pg13-feed-stage) video{
    width: 100% !important;
    height: 100% !important;          /* card contract */
    display: block !important;
    object-fit: contain !important;
    object-position: 50% 50% !important;

    /* make the “mat” visible (not pure black bars) */
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    outline: 0 !important;
  }

  /* 3) If any rule paints a card background, kill it */
  html.ggf-pg13-shell :is(#pg13-feed-stage, #ggf-pg13-feed-stage) .ggf-card{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

/* marker: GGF_PG13_DESKTOP_POLISH_UI_AND_WIDTH_V1 */
@media (min-width: 980px){

  /* Tune these 3 numbers only */
  html.ggf-pg13-shell{
    --ggf-card-pad-y: 12px;      /* vertical breathing room */
    --ggf-ui-inset-x: 14px;      /* UI inset inside media */
    --ggf-media-max-w: 640px;    /* cap on big screens */
  }

  /* Compute a “portrait-friendly” media width from viewport height
     (9:16 => width = height * 0.5625). This minimizes SIDE letterbox
     for tall videos by narrowing the media column instead. */
  html.ggf-pg13-shell{
    --ggf-card-h: calc(100vh - var(--ggf-fixed-top, 0px));
    --ggf-media-h: calc(var(--ggf-card-h) - (var(--ggf-card-pad-y) * 2));
    --ggf-media-w: min(var(--ggf-media-max-w), calc(var(--ggf-media-h) * 0.5625));
  }

  /* Card stays 1-per-view; pad is INSIDE the fixed height */
  html.ggf-pg13-shell :is(#pg13-feed-stage, #ggf-pg13-feed-stage) .ggf-card{
    position: relative !important;
    padding: var(--ggf-card-pad-y) 0 !important;
    box-sizing: border-box !important;
  }

  /* Media box becomes a centered “column” whose width follows height */
  html.ggf-pg13-shell :is(#pg13-feed-stage, #ggf-pg13-feed-stage) .ggf-media{
    width: var(--ggf-media-w) !important;
    max-width: 100% !important;
    height: var(--ggf-media-h) !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 18px;
  }

  /* Video: still no-crop letterbox */
  html.ggf-pg13-shell :is(#pg13-feed-stage, #ggf-pg13-feed-stage) .ggf-media video{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* UI overlay: lock it to the SAME box as .ggf-media (so it never drifts) */
  html.ggf-pg13-shell :is(#pg13-feed-stage, #ggf-pg13-feed-stage) .ggf-ui{
    position: absolute !important;
    top: var(--ggf-card-pad-y) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: var(--ggf-media-w) !important;
    height: var(--ggf-media-h) !important;
    z-index: 50 !important;
    pointer-events: none !important;
  }

  /* Like + meta live inside the media box */
  html.ggf-pg13-shell :is(#pg13-feed-stage, #ggf-pg13-feed-stage) .ggf-ui .ggf-like,
  html.ggf-pg13-shell :is(#pg13-feed-stage, #ggf-pg13-feed-stage) .ggf-ui .ggf-like-btn{
    position: absolute !important;
    right: var(--ggf-ui-inset-x) !important;
    bottom: 18px !important;
    pointer-events: auto !important;
  }
  html.ggf-pg13-shell :is(#pg13-feed-stage, #ggf-pg13-feed-stage) .ggf-ui .ggf-meta{
    position: absolute !important;
    left: var(--ggf-ui-inset-x) !important;
    bottom: 18px !important;
    pointer-events: auto !important;
  }
}

/* marker: GGF_PG13_TINY_SIDEBAR_KILLER_MAT_V1 */
@media (min-width: 980px){

  /* 1) Slightly narrower than 9:16 (0.5625) to avoid 2–4px side slivers */
  html.ggf-pg13-shell{
    --ggf-media-w: min(var(--ggf-media-max-w, 640px), calc(var(--ggf-media-h) * 0.56));
  }

  /* 2) Friendly “mat” color for letterbox (pick one) */
  html.ggf-pg13-shell{
    /* soft charcoal */
    --ggf-letterbox-mat: rgba(0,0,0,0.08);
    /* or a light grey: --ggf-letterbox-mat: #f0f1f3; */
  }

  html.ggf-pg13-shell :is(#pg13-feed-stage, #ggf-pg13-feed-stage) .ggf-media{
    background: var(--ggf-letterbox-mat) !important;
  }
  html.ggf-pg13-shell :is(#pg13-feed-stage, #ggf-pg13-feed-stage) .ggf-media video{
    background: transparent !important;
  }
}