/* Filimo Host V10 — mobile-only UX polish.
   No desktop/network/API behavior is changed by this stylesheet. */
@media (max-width: 767px) {
  :root {
    --fm-edge: 14px;
    --fm-gap: 10px;
    --fm-radius: 9px;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: #101010;
  }

  body {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    -webkit-tap-highlight-color: transparent;
  }

  #root,
  #portal-root {
    width: 100%;
    max-width: 100vw;
    min-width: 0 !important;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  button,
  [role="button"],
  input,
  select,
  textarea,
  a {
    touch-action: manipulation;
  }

  /* The real Filimo layout remains in charge. These classes are applied only
     to detected content rails on narrow touch screens. */
  .filimo-mobile-strip {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: inline proximity;
    scroll-padding-inline: var(--fm-edge);
    scrollbar-width: none;
    padding-inline: var(--fm-edge) !important;
    gap: var(--fm-gap) !important;
  }

  .filimo-mobile-strip::-webkit-scrollbar {
    display: none;
  }

  .filimo-mobile-strip > .filimo-mobile-card {
    box-sizing: border-box;
    flex: 0 0 clamp(112px, 31.5vw, 148px) !important;
    width: clamp(112px, 31.5vw, 148px) !important;
    min-width: clamp(112px, 31.5vw, 148px) !important;
    max-width: clamp(112px, 31.5vw, 148px) !important;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  .filimo-mobile-strip > .filimo-mobile-card img,
  .filimo-mobile-strip > .filimo-mobile-card picture,
  .filimo-mobile-strip > .filimo-mobile-card video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--fm-radius);
  }

  .filimo-mobile-row-section {
    box-sizing: border-box;
    max-width: 100vw !important;
    margin-block: 14px 20px !important;
    overflow: visible !important;
  }

  .filimo-mobile-row-section > h1,
  .filimo-mobile-row-section > h2,
  .filimo-mobile-row-section > h3,
  .filimo-mobile-row-section > h4,
  .filimo-mobile-row-section > [class*="title" i] {
    margin-inline: var(--fm-edge) !important;
  }

  .filimo-mobile-header {
    box-sizing: border-box !important;
    padding-top: max(0px, env(safe-area-inset-top)) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .filimo-mobile-header button,
  .filimo-mobile-header [role="button"],
  .filimo-mobile-header a {
    min-height: 40px;
  }

  /* Prevent a fixed bottom bar from sitting on the iPhone home indicator. */
  .filimo-mobile-bottom-nav {
    padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
  }

  /* Give the page enough breathing room when a bottom navigation is present. */
  html.filimo-has-mobile-bottom-nav body {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }

  /* Very small phones: show a comfortable two-and-a-bit poster rhythm. */
  @media (max-width: 374px) {
    :root { --fm-edge: 12px; --fm-gap: 8px; }
    .filimo-mobile-strip > .filimo-mobile-card {
      flex-basis: clamp(104px, 32vw, 124px) !important;
      width: clamp(104px, 32vw, 124px) !important;
      min-width: clamp(104px, 32vw, 124px) !important;
      max-width: clamp(104px, 32vw, 124px) !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .filimo-mobile-strip { scroll-behavior: auto !important; }
}