/* =====================================================
   HARBUG MARKETING — MEMBERS DIRECTORY (REFINED)
   ===================================================== */


/* =========================
   CONTAINER GENERAL
   ========================= */
#cards,
#hm-members-controls{
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}


/* =========================
   GRID
   ========================= */
.hm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
}

/* tablet */
@media (min-width:640px){
  .hm-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (min-width:1024px){
  .hm-grid{
    grid-template-columns: repeat(3, 280px);
    justify-content: center;
  }
}


/* =========================
   CARD
   ========================= */
.hm-card{
  border:1px solid rgba(0,0,0,0.12);
  border-radius:10px;
  padding:14px;
  background:#fff;
  line-height:1.35;
  transition:transform .2s ease, box-shadow .2s ease;
}

/* hover */
.hm-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}


/* =========================
   CARD CONTENT
   ========================= */
.hm-card-title{
  margin-bottom:8px;
  font-size:16px;
  font-weight:800;
  font-family:"Hamburg Sans Bold", sans-serif;
}

.hm-card-title a{
  color:#F07D00;
  text-decoration:none;
}

.hm-card-title a:hover{
  text-decoration:underline;
}

.hm-card-branch{
  margin-bottom:10px;
  font-weight:600;
  opacity:.9;
}

.hm-card-address{
  margin-bottom:10px;
}

.hm-card-contact{
  font-weight:600;
}


/* =========================
   SEARCH CONTROLS
   ========================= */
#hm-members-controls{
  display:flex;
  justify-content:center;
  margin-bottom:25px;
}

#hm-members-controls .row{
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  width:100%;
  max-width:620px;
  margin:0 auto;
}

/* inputs */
#hm-members-controls input,
#hm-members-controls select{
  width:280px;
  height:46px;
  border-radius:6px;
  border:1px solid #ccc;

  padding-left:15px;
  padding-right:14px;

  font-size:16px;
  font-weight:600;
  color:#333;
}

/* placeholder */
#hm-members-controls input::placeholder{
  font-size:15px;
  font-weight:500;
  color:#888;
}


/* =========================
   PAGINATION
   ========================= */

.hm-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  list-style:none;
  padding:0;
  margin:25px 0 0;
}

/* botones */
.hm-pagination a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  padding:0 10px;
  border-radius:6px;
  border:1px solid #ddd;
  text-decoration:none;
  font-size:14px;
  background:#fff;
  color:#333;
  transition:all .15s ease;
}

/* hover más fuerte (pedido de Rafael) */
.hm-pagination a:hover{
  background:#d5d5d5;
  border-color:#999;
  color:#000;
}


/* ACTIVE PAGE REAL */
.hm-pagination .hm-page--active a{
  background:#111 !important;
  color:#fff !important;
  border-color:#111 !important;
  font-weight:700;
}

/* disabled */
.hm-pagination .hm-page--disabled a{
  opacity:.4;
  pointer-events:none;
}



/* =========================================
   MOBILE CONTROLS FIX (BUSCADOR + SELECT)
   ========================================= */
@media (max-width:640px){

  /* stack vertical */
  #hm-members-controls .row{
    display:block !important;
  }

  /* columnas bootstrap anuladas */
  #hm-members-controls .row > div{
    width:100% !important;
    max-width:320px !important;
    margin:0 auto 12px auto !important;
  }

  /* input y select mismo tamaño */
  #hm-search,
  #hm-branch{
    width:100% !important;
    max-width:320px !important;
    display:block !important;
    margin:0 auto !important;
    box-sizing:border-box;
  }

/* ancho total del bloque */ #cards, #hm-members-controls{ max-width:240px; margin-left:auto; margin-right:auto; } /* grid 1 columna centrada */ .hm-grid{ grid-template-columns:1fr; justify-content:center; } /* ancho real de la card */ .hm-card{ width:100%; max-width:340px; margin:0 auto; }

}

/* =========================================
   TABLET WIDTH CONTROL
   ========================================= */
@media (min-width:641px) and (max-width:1023px){

  /* reducir ancho total del bloque */
  #cards,
  #hm-members-controls{
    max-width:640px;
    margin-left:auto;
    margin-right:auto;
  }

  /* grid sigue en 2 columnas pero más compacto */
  .hm-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:18px;
  }

  /* tarjetas más controladas */
  .hm-card{
    width:100%;
  }

}

/* FIX: remove bullet from pagination */
#cards ul.hm-pagination{
  list-style:none !important;
  padding-left:0 !important;
  margin-left:0 !important;
}

#cards ul.hm-pagination li{
  list-style:none !important;
}