/* ============================================================
   Mobile overflow fix + Publisher fix
   (Photo grid CSS removed — restored to original layout)
   ============================================================ */

html, body { overflow-x: hidden !important; max-width: 100vw; }

/* ── Reels: 4:5 crop on mobile (1080px × 1350px equivalent) ──
   Full-vertical (9:16) videos are auto-cropped to 4:5 ratio.
   The container is fixed to aspect-ratio:4/5, overflow:hidden clips
   the excess, and object-fit:cover centers the video inside it.
   The wrapper is centered vertically so the 4:5 box sits in the
   middle of the screen against the black reel background.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 992px) {
  /* Wrapper: ensure flex column layout */
  .reel-video-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  /* 4:5 container: margin:auto pushes equal space above and below
     regardless of any other flex overrides — most reliable centering */
  .reel-video-wrapper .reel-video-container {
    position: relative !important;
    width: 100% !important;
    height: min(125vw, calc(100dvh - 101px)) !important;
    max-width: 100% !important;
    overflow: hidden !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    flex-shrink: 0 !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  /* Plyr layers must fill the container completely */
  .reel-video-wrapper .reel-video-container .plyr--video {
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }

  /* Video: center + cover-fill — crops equal top/bottom of 9:16 footage */
  .reel-video-wrapper .reel-video-container video {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }

  /* ── Black fade at top + bottom edges of the cropped video ──
     Hides the sharp 4:5 crop line. z-index keeps fades above the
     video but below the action buttons (z-index: 20+). */
  .reel-video-wrapper .reel-video-container::before,
  .reel-video-wrapper .reel-video-container::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    height: 100px !important;
    z-index: 5 !important;
    pointer-events: none !important;
  }
  .reel-video-wrapper .reel-video-container::before {
    top: 0 !important;
    background: linear-gradient(to bottom,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.3)  50%,
      transparent      100%) !important;
  }
  .reel-video-wrapper .reel-video-container::after {
    bottom: 0 !important;
    background: linear-gradient(to top,
      rgba(0,0,0,0.95) 0%,
      rgba(0,0,0,0.3)  50%,
      transparent      100%) !important;
  }

  /* ── Reel action buttons: right side, smaller ─────────────── */
  .reel-video-wrapper .reel-video-container .video-controlls {
    right: 10px !important;
    bottom: 30px !important;
    z-index: 20 !important;
  }
  /* Reduce circle size: 40px → 32px */
  .reel-actions .action-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 2px !important;
  }
  .reel-actions .action-btn svg {
    width: 17px !important;
    height: 17px !important;
  }
  .reel-actions .action-btn .far,
  .reel-actions .action-btn i {
    font-size: 15px !important;
    width: 17px !important;
    height: 17px !important;
    background-size: 17px !important;
  }
  /* Avatar */
  .reel-actions .post-avatar .post-avatar-picture {
    min-width: 32px !important;
    min-height: 32px !important;
    width: 32px !important;
    height: 32px !important;
  }
  /* Tighten spacing */
  .reel-actions { gap: 8px !important; }
  .reel-actions .post-avatar { margin-bottom: 6px !important; }
  .reel-action-btn span { font-size: 11px !important; margin-top: 3px !important; }
}

/* ── Photo album: swipeable carousel on mobile ───────────────
   display:contents on the grid wrappers flattens them so every
   photo becomes a direct flex-child of .pg_wrapper — one slide
   per photo, full-width, with scroll-snap for smooth swiping.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Scroll container — explicit 4:3 height so slides have a reference */
  .pg_wrapper {
    display: flex !important;
    overflow-x: scroll !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important; /* Firefox */
    float: none !important;
    height: 75vw !important;
    max-height: 480px !important;
    touch-action: pan-x !important;            /* element handles horizontal, vertical passes to page */
    overscroll-behavior-x: contain !important; /* stop scroll chaining at edges */
  }
  .pg_wrapper::-webkit-scrollbar { display: none !important; }

  /* Flatten grid wrappers */
  .pg_3x, .pg_4x, .pg_1o3 { display: contents !important; }

  /* Every slide: full-width, fills wrapper height */
  .pg_2x, .pg_2o3, .pg_1o3_in {
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    scroll-snap-align: start !important;
    overflow: hidden !important;
    position: relative !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* pg_2o3_in sits between pg_2o3 and its anchor — make it fill pg_2o3
     with absolute positioning so the height chain never breaks */
  .pg_2o3_in {
    position: absolute !important;
    inset: 0 !important;
    margin: 0 !important;
  }
  /* All slide anchors fill their immediate parent */
  .pg_2o3_in > a,
  .pg_1o3_in > a,
  .pg_2x > a {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding-bottom: 0 !important;
  }

  /* Hide the +N overlay — all photos accessible via swipe */
  .pg_wrapper .more { display: none !important; }

  /* Slide counter badge (added by JS) */
  .pg-counter {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0,0,0,0.52);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 10px;
    z-index: 20;
    pointer-events: none;
    letter-spacing: 0.3px;
  }
}

/* Extra photos beyond 4th: hidden on desktop grid, visible in mobile carousel */
.pg_extra { display: none !important; }
@media (max-width: 768px) {
  .pg_extra { display: block !important; flex: 0 0 100% !important; }
}

/* Publisher attachment thumbnail list */
.publisher-attachments { overflow: hidden; }
.publisher-attachments ul,
.js_attachments-photos ul,
.js_attachments-photos { max-width: 100%; overflow: hidden; }