/* ND78 — responsive.css
 * Ajustes responsivos para todo o app.
 */

@media (max-width: 1280px) {
  .nd-tpl-grid { grid-template-columns: repeat(4, 1fr); }
  .FJVideoBrick_contentList__38JyT { grid-template-columns: repeat(5, 1fr); }
  .FJFeatureWidthIcon_featureBox__08BsI { padding: 36px; gap: 34px; }
}

@media (max-width: 1080px) {
  /* header vira menu hamburger */
  .menu { min-height: 64px; padding: 0 18px; gap: 14px; }
  .menu-list .nav-template,
  .menu-list .web-nav-ul { display: none; }
  .header-more { display: inline-flex; margin-left: auto; }
  .login-btn .btn-login { display: none; }
  .mobile-menu-list { top: 64px; }
  .mobile-nav-ul, .now-mobile-list { display: flex; }

  /* backdrop-filter no header cria bloco de contenção para os descendentes
   * position:fixed — o painel do menu (inset:64px 0 0 0) ficava preso na altura
   * do header (80px) em vez de cobrir a viewport. No mobile o header recebe
   * fundo sólido e o menu volta a se posicionár pela janela inteira. */
  header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #fff;
  }

  /* O menu off-canvas fica fora do quadro (translateX(100%)) enquanto
   * fechado. Como header tem backdrop-filter (containing block de
   * position:fixed), esse deslocamento criava scroll horizontal na página.
   * Aqui os dropdowns já estão ocultos, então recortar é seguro. */
  header { overflow-x: clip; }

  .FJChoiceness_contentBox__WBdxz { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .FJChoiceness_right__p3CzB { min-height: 320px; order: -1; }
  .home_commentLayoutBox__aFRa1 { grid-template-columns: minmax(0, 1fr); }
  .FJFeatureWidthIcon_featureBox__08BsI,
  .FJFeatureWidthIcon_boxReverse__DgxAT { flex-direction: column; text-align: left; }
  .FJFeatureWidthIcon_featureInfoBox__VPhLS,
  .FJFeatureWidthIcon_featureImgBox__ioKii { width: 100% !important; }
  .FJResourceIntroduction_resourceIntroductionBox__15k4m { grid-template-columns: repeat(2, 1fr); }
  .nd-article { flex: 0 0 calc((100% - 20px) / 2); }
}

@media (max-width: 820px) {
  .home_headLayoutBox__x4Cb6 { padding-top: 48px; }
  .home_video_box__VLZoz { margin-top: 34px; border-radius: 16px; }
  .nd-tpl-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .FJVideoBrick_contentList__38JyT { grid-template-columns: repeat(3, 1fr); }
  .footer_wrapper { grid-template-columns: 1fr; gap: 34px; }
  .nav { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .FJRating_platformList__OD8rm { grid-template-columns: 1fr; }
  .FJRating_platformItem__lXVE_ { flex-direction: column; align-items: flex-start; }
  .FJRating_platformRight__I1SbI { text-align: left; }
  .FJEntrance_entrance__l5jvj { padding: 44px 24px; }
}

@media (max-width: 560px) {
  .home_banner_btn_box__nwPhe { flex-direction: column; }
  .home_templateBtn__ymbxs, .home_scratchBtn__9mPao { width: 100%; }
  .nd-tpl-grid { grid-template-columns: repeat(2, 1fr); }
  .FJVideoBrick_contentList__38JyT { grid-template-columns: repeat(2, 1fr); }
  .FJResourceIntroduction_resourceIntroductionBox__15k4m { grid-template-columns: 1fr; }
  .nd-article { flex: 0 0 100%; }
  .FJChoiceness_toolsItem__iNdX_ { grid-template-columns: 36px 1fr; }
  .home_commentType__rW53O { font-size: 36px; }
  .nd-cookies { flex-direction: column; align-items: stretch; }
  .nd-cookies .nd-cookie-actions { justify-content: flex-end; }
  .nd-social { grid-template-columns: 1fr; }
  .mod_fj_footer { padding: 40px 18px 32px; }
  .nav { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}