/* SN_CSS_ARCH_LISTING_FILTER_WIDTH_V3
   Canonical estrutural de largura da listing e do filter drawer.
   Estado final alinhado ao runtime comprovado por getComputedStyle.

   Breakpoints globais SANOME:
   - mobile: até 767px;
   - tablet menor: 768px até 1023px;
   - tablet grande: 1024px até 1365px;
   - desktop médio: 1366px até 1599px;
   - desktop largo: 1600px ou mais.

   O layout interno das características pertence
   exclusivamente a listing-feature-filters.css. */


/* ======================================================
   MOBILE
   até 767px
   ====================================================== */
@media (max-width: 767px) {
  #filter-drawer {
    width: 320px !important;
    min-width: 0 !important;
    max-width: 92vw !important;
  }
}


/* ======================================================
   TABLET MENOR + TABLET GRANDE
   768px até 1365px

   Drawer fixo de 560px.
   ====================================================== */
@media (min-width: 768px) and (max-width: 1365px) {
  html.sn-filter-mobile-ready
  body
  #filter-drawer,
  body #filter-drawer {
    width: 560px !important;
    min-width: 560px !important;
    max-width: calc(100vw - 24px) !important;

    left: auto !important;
    right: 0 !important;

    box-sizing: border-box !important;
  }

  #filter-drawer > .fd-body,
  #filter-drawer #filter-form {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}


/* ======================================================
   DESKTOP MÉDIO
   1366px até 1599px

   Primeira coluna / drawer: 468px.
   ====================================================== */
@media (min-width: 1366px) and (max-width: 1599px) {
  body.sn-listing-layout-ready
  .sn-grid-listing-section
  .sn-listing-desktop-layout,
  .sn-grid-listing-section
  .sn-listing-desktop-layout {
    grid-template-columns:
      468px minmax(0, 1fr) !important;

    gap: 14px !important;
  }

  body.sn-listing-layout-ready
  .sn-listing-desktop-layout
  > #filter-drawer,
  .sn-listing-desktop-layout
  > #filter-drawer {
    width: 468px !important;
    min-width: 468px !important;
    max-width: 468px !important;

    box-sizing: border-box !important;
  }

  .sn-listing-desktop-layout
  > #filter-drawer
  > .fd-body,
  .sn-listing-desktop-layout
  > #filter-drawer
  #filter-form {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .sn-listing-desktop-layout
  > #imoveis-grid {
    min-width: 0 !important;
  }
}


/* ======================================================
   DESKTOP LARGO
   1600px ou mais

   Primeira coluna / drawer: 470px.
   ====================================================== */
@media (min-width: 1600px) {
  body.sn-listing-layout-ready
  .sn-grid-listing-section
  .sn-listing-desktop-layout,
  .sn-grid-listing-section
  .sn-listing-desktop-layout {
    grid-template-columns:
      470px minmax(0, 1fr) !important;

    gap: 14px !important;
  }

  body.sn-listing-layout-ready
  .sn-listing-desktop-layout
  > #filter-drawer,
  .sn-listing-desktop-layout
  > #filter-drawer {
    width: 470px !important;
    min-width: 470px !important;
    max-width: 470px !important;

    box-sizing: border-box !important;
  }

  .sn-listing-desktop-layout
  > #filter-drawer
  > .fd-body,
  .sn-listing-desktop-layout
  > #filter-drawer
  #filter-form {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  .sn-listing-desktop-layout
  > #imoveis-grid {
    min-width: 0 !important;
  }
}