/* 1) Ayusin ang main container ng properties kapag GRID VIEW (layout=card) */
#gn-mf-kvcore-listings-shell .kv-properties-container.kv-layout-card {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;   /* alisin yung -15px row margin */
  margin-right: 0 !important;
  left: 0 !important;
}

/* 2) Siguraduhin na naka-full width lang ang column ng listings */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-column {
  width: 100% !important;
  max-width: 100% !important;
}

/* 3) Alisin ang extra padding sa loob ng listings container */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) Gawing 3 cards per row, nasa gitna, may pantay na space sa sides */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings.kv-grid-columns-2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 24px;
  width: 100%;
  max-width: 1240px;          /* lapad ng 3 cards, para may space sa gilid */
  margin: 20px auto 16px;     /* auto = equal left/right space (centered) */
}

/* 5) Cards bilang grid items – hayaan silang mag-fill ng column nang maayos */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings.kv-grid-columns-2
  .kv-property {
  height: 100%;
}

/* 6) Itago nang tuluyan ang map column sa GRID VIEW */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-map-column {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tablet: 2 cards per row */
@media (max-width: 1024px) {
  #gn-mf-kvcore-listings-shell
    .kv-properties-container.kv-layout-card
    .kv-property-listings.kv-grid-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 960px;
  }
}

/* Mobile: 1 card per row */
@media (max-width: 640px) {
  #gn-mf-kvcore-listings-shell
    .kv-properties-container.kv-layout-card
    .kv-property-listings.kv-grid-columns-2 {
    grid-template-columns: 1fr;
    max-width: 100%;
  }
}

#gn-mf-kvcore-listings-shell 
.kv-property-listings.kv-grid-columns-2 .kv-property {
  width: auto !important;
  max-width: none !important;
}

/* 1) Centered shell: ang grid dapat nasa gitna ng page */
#gn-mf-kvcore-listings-shell .kv-properties-container.kv-layout-card {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 2) I-center ang listings container sa loob ng column */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings-container {
  width: 100% !important;
  max-width: 1240px !important;     /* lapad ng grid block */
  margin-left: auto !important;      /* equal space left/right */
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 3) Gawing 3 columns ang grid wrapper, full width ng container */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings.kv-grid-columns-2 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  column-gap: 24px !important;
  row-gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 20px !important;
  margin-bottom: 16px !important;
}

/* 4) Neutralize ang "2 per row" width sa cards (hayaan silang mag-follow sa grid) */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings.kv-grid-columns-2
  .kv-property.kv-per-row-2 {
  width: auto !important;
  max-width: none !important;
}

/* 5) Gawing 100% ng grid cell ang mismong card box */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-property-listings.kv-grid-columns-2
  .kv-property.kv-per-row-2
  .kv-box {
  width: 100% !important;
  max-width: none !important;
}

/* 6) Siguraduhin na wala talagang map column sa GRID VIEW */
#gn-mf-kvcore-listings-shell
  .kv-properties-container.kv-layout-card
  .kv-map-column {
  display: none !important;
  width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tablet – 2 cards per row */
@media (max-width: 1024px) {
  #gn-mf-kvcore-listings-shell
    .kv-properties-container.kv-layout-card
    .kv-property-listings.kv-grid-columns-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 960px !important;
  }
}

/* Mobile – 1 card per row, full width */
@media (max-width: 640px) {
  #gn-mf-kvcore-listings-shell
    .kv-properties-container.kv-layout-card
    .kv-property-listings.kv-grid-columns-2 {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }
}
.kv-map-grey-area-filters {
    display: none;
}

/* =========================================================
   GN MF — Mobile only: center text + bigger + “5 spaces” gap per word
   NOTE: Sa CSS, ang word-spacing ay "extra space" na idinadagdag sa normal space.
         Para magmukhang ~5 spaces ang pagitan, ginawa nating malaki (≈ 1em).
   ========================================================= */
@media (max-width: 767px) {

  #gn-mf-kvcore-search-shell #dataset-area .view-content label.kv-form-label-button,
  #dataset-area .view-content label.kv-form-label-button{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;

    font-size: 14.5px !important;
    line-height: 24px !important;

    /* ✅ word gap (≈ 5 spaces look) */
    word-spacing: 1em !important;

    /* optional: konting letter spacing para mas “filled” pa rin tingnan */
    letter-spacing: 0.03em !important;

    /* keep compact gaps kung may inner elements */
    gap: 6px !important;
    column-gap: 6px !important;
    row-gap: 6px !important;
  }

  /* kung may inner wrapper */
  #gn-mf-kvcore-search-shell #dataset-area .view-content label.kv-form-label-button > span,
  #dataset-area .view-content label.kv-form-label-button > span{
    display: inline-block;
    width: 100%;
    text-align: center !important;
    word-spacing: 1em !important;
    letter-spacing: 0.03em !important;
  }
}